building a mobile site using bootstrap 3 which makes use of the collapse js plugin.
My issue is that when you hover over the font in the collapse (it's worth noting that this happens with system fonts and is not just a web-font issue, it's just easier to show with a webfont) or click the font it changes in appearance. Parts of the font are removed or the size changes. I'm not sure why this is happening and I've tried the following:
-webkit-font-smoothing
text-rendering
adding a fixed line height
backface-visiblity
However, none of those work. I'm running out of ideas and while it's harder to show in a screenshot it is 100% a big and noticeable issue when interacting with the site.
I'm assuming it's something to do with the collapse jquery but I can't find anything in the bootstrap repo, on here or from a general google search (hard thing to search for haha) so any help would be appreciated. I don't have much code related to the fonts but:
.panel-tap {
position: relative;
display: block;
width: 100%;
line-height: 1;
font-size: 16px;
}
The panel has some padding but this isn't altered during the animation, nor are any styles added during the animation (only class names are added to display/hide the content below.
I can't post a link to the site but hopefully this is enough info.
Thanks
edit: Worth noting that I've tried removing all styles associated with it (i.e position) and tried adding specific styles to make sure it isn't being overridden across the site (i.e adding font-weights, line-heights, borders etc)
edit2: This doesn't happen all the time, it stops after a few seconds or a few clicks, it's totally inconsistent
edit3: Disabled the animation/jquery side of collapse and it still does it
Some Ideas:
Have you tried setting all the CSS annimation properties to 0/none. It might be picking something up from a parent/bad selector elsewhere.
Double checked there is no CSS for :active or :focus. Or maybe a span around the text that has a relative font-size ( em, % etc)
I remember having trouble with something similar and position:relative;. Can you wrap a span around the text and give it position:static;
Is there an active class or something that might be causing the issue?
Thats all I can think of at the mo. But might help.
Related
I have created a custom css tooltip, however the tooltip width is very narrow (only 1-2 words per line).
Fiddle example of the problem
I would like the tooltip size to be dynamically generated, as I will be using it in a few places with different lengths of text (the text may also change at a later date). Another reason I need it to be dynamic is that it needs to allow for browser resizing and mobile view.
I have done a bit of research and played around with (not limited to) the following properties:
width: auto; /*doesn't change anything*/
max-width: ;/*max and min not useful as I want it to be dynamic*/
min-width: ;
white-space: normal; /*neither change anything*/
text-wrap: normal;
None of the above seem to give me a solution.
I can't use bootstrap in this project, but I am able to add JavaScript if that offers a possible solution.
Thanks in advance for any help.
The solution was to change position: absolute; to position: relative. This, however, messed up some other dependent styling which would need to be fixed.
Reasoning: Absolute requires a width to be set whereas relative can be dynamic.
I have been wondering for quite a while now how can you achieve this: https://www.apple.com/mac-pro/
As I put it in my own terms, removing the scrollbar or hiding it. I know you can easily put overflow:hidden but that wouldn't really solve the problem, as in Chrome for example it will not let you scroll with the mouse-wheel (pretty annoying).
I've been looking for quite a while now how to achieve something similar to that, which by the way I have no idea how to call it (again I search it as hiding the scrollbar, removing scrollbar) but no success yet.
If anyone can point me to the right direction, that would be really awesome!
I think that the page does not fill more than the window , so that is why there is no scroll bar. When you do scroll up or down , there are most likely event listeners that are just altering the content.
body { overflow:hidden } would work in some browsers , but not all - So , to avoid having a scroll bar, just don't have the content get larger than the window.
It seems like a slightly altered take on Parallax Scrolling.
If you google for it, you can find a million and one different ways of doing it, tutorials, examples, templates, etc.
Change overview.css on line no 10
position: fixed;
Remove following from overview.css on line 415 and 8
overflow: hidden;
Just add the code below to your css file.
::-webkit-scrollbar {
display: none;
}
Caution !
This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.
There was a similar question asked on here (not enough information was given) so no real solution was presented. I am using MixItUp to filter content within a framework (Foundation) based on a button being clicked. I noticed a weird movement that happens when a button is clicked. I have uploaded the files to be viewed here
http://cantaloupecreative.info/filter-code-snippet/
After the animation fires, I see page elements jump to the right a bit. If that's what you're referring to, take a look at the scroll bar. When there aren't enough elements on the page, the scroll bar disappears and everything re-centers, which is likely what you're seeing. You can avoid this by permanently enabling or disabling the scroll bar with CSS
overflow-y: scroll;
or something similar.
Okay here is what I uncovered in my search for a solution. WebKit is overriding the css change I am making to my body class. You cannot use overflow-y in chrome because of this. Now when I was making the change to my sass file it wasn't compiling correctly. After hardcoding the webkit fix into my stylesheet I was able to remove the scrollbar on all toggled divs with the following code.
::-webkit-scrollbar {
display:none
}
Obviously this only fixes half of the problem because now I am without a scrollbar. But it atleasts fixes the hoping issue.
I am trying to create a HTML site with CSS styling and run into the following issues:
Depending on monitors size, my HTML element's positioning changes. So if It's a bigger screen, then lets say everything fits correctly. But if you open it in a smaller screen, not everything is displayed!
If I zoom in the browsers view, the elements begin to overlay each other - yet I want to stay where they are (even if that means they wont be displayed on screen due to a high zoom IN).
(I cannot post images yet, so I'm adding a link to the picture to explain abit more):
I am also posting a fiddle where you can see my CSS for the MENU and the HTML part that is connected with it:
I have to write some code, but my code is too long and wouldn't look nice.
My Fiddle
It would be really nice of you, if you can help me out here. If it's a problem more complicated to explain on how to fix it, I'd kindly ask, if you can change my fiddle to a working version (if it's not too much to ask).
I have checked already similar Questions, but there were no efficient answers that helped me to solve my problem.
So, the reason that you are getting this behavior comes down to the fact that you have set your two buttons to each be fixed with the position set to %. This means the position of each is calculated as a percent relative to the 'viewport' (the browser window). If the window is only 500px wide, then your 40% left position button sits at 200px and the 50% left position button sits at 250px, thereby causing them to overlap.
Generally, I would not use fixed positioning here, but it's really not possible to provide a better alternative without seeing more of your code. (Perhaps you'd like to get feedback in general by posting all of your code on CR).
You can solve the problem by wrapping both elements in a div and give that div your fixed position values for the first element and allow the second button to be positioned relative to the first.
Here's an example of that approach and your updated fiddle:
Change your HTML:
<div class="btns">
<a href='index.html' class='button_lay'>NONE</a>
<a href='dft.html' class='button_dft'>NONE2</a>
</div>
Add a rule for the .btns class to your css and remove the fixed positioning from each of the buttons:
.btns {
position: fixed;
top: 80%;
left: 40%;
min-width: 300px;
}
This one is an odd one. I've got HTML5 Facebook comments on one of my pages, and after the page loads, the Facebook comment area starts to shrink horizontally until it reaches 5 or 0px. You can see it here:
http://www.rocketcases.com/casestarter/captain-quinn
I cannot figure out why this has started to happen. It didn't start off like that, it just started doing it recently.
I've tried disabling all my other JS, and it's still happening. I've searched Google and StackOverflow. It doesn't seem like anyone else has ever come across this.
Any ideas? Am I missing something very obvious?
Set the span's width which is inside the fb-comments fb_iframe_widget container to 100% !important.
Like this:
.fb_iframe_widget span { width: 100% !important}
EDIT:
The reason appears to be in one of Facebook's scripts, which calculates the width of the element relative to the parent element. A piece from the script:
s.height=Math.max(this._shrinker.offsetTop,0)
What this means is, unless the parent element (in your case, the div with the classes fb-comments and fb_iframe_widget) has a fixed width, the script will loop and keep on reducing the width.
Here's the snippet from the script if you're interested: http://pastebin.com/GesPgQNY
Setting a min-width for the element will solve the problem. and it is better to assign a unique class to plugin's parent element, to avoid future conflicts.
.fb-comments.fb_iframe_widget span:first-child {
min-width: 600px;
}
It was because I had added some custom CSS to size the width of the FB comments div.
.fb-comments, .fb-comments iframe[style] {width: 90% !important;
Once I removed that, it works just fine. So odd.
Thanks for the help!