Page in question is here
The overflow can be seen on mobile only (e.g. iPhone SE) on Chrome browser. Issue doesn't happen on Firefox.
The issue is with the horizontal scroll table, shown here:
picture of the horizontal scroll table
If you remove the white-space: nowrap tag from the table.hscroll-table selector, the overflow goes away and the horizontal scroll works properly. Otherwise, the horizontal scroll works, but there's also overflow on the entire page, enabling horizontal scrolling throughout the whole page and a bad user experience.
I can't for the life of me figure out why this is happening. Is it a Chrome bug?
Any help would be greatly appreciated. I can remove the white-space: nowrap to fix the issue, but that makes the table design worse.
Weirdly enough, the issue only seems to be with the td tags. If I add white-space: nowrap to the header cells only, there's no unwanted overflow.
Ok, turns out the problem was because of the screen reader text that was being generated within the table by the rating icons.
I set the screen reader text to display: none as a temporary fix and now display the text right beside the rating instead.
Related
I'm using bootstrap with bootstrap-toc (https://afeld.github.io/bootstrap-toc/)
Working with the following scenario:
http://jsbin.com/cerozeleya/edit?output (make sure to click "run with Js" to be able to see the sidebar)
As I scroll the view, I would like the sidebar to scroll until a point where the jumbotron is no longer in view. At that point, it should stay affixed while the content scrolls.
I can't get that behaviour to happen with the included jsbin. I tried messing with the data-offset-top/data-offset-bottom attributes within my nav #toc but nothing changes. I found another question here that instructed the following changes on the css:
.affix{ top: 0px;}
.affix-bottom{ position: absolute;}
But that didn't work either. I tried reading the affix and scrollspy documentation, but its either not clicking with me, or I'm not seeing what I'm doing wrong.
Any help appreciated. Thanks!
You have to use data offset top within the tag which you want to affixed
data-spy="affix" data-offset-top="197"
Eg.
<nav id="toc" data-toggle="toc" data-spy="affix" data-offset-top="197"></nav>
Edit the offset value according to your needs
I have problem with my nav bar on a theme I am developing. http://astanmedia.com/blog All is ok at full screen, but reduce the screen size so the the menu collapses and when you click / touch the toggle button, the dropdown refuses to break over the slider, no matter what z-index is set, or positioning used. on scroll I have the nav change to fixed at the top, and it displays fine once the slider has passed it. The dropdowns also function fine over the slider at full screen. Have tried to paste code here for 15 minutes, I must be doing it wrong, so I have linked to a paste bin of the code here http://pastebin.com/6war9TGu. Thanks in advance
I think I see your problem. It's not the z-index, it's the navbar-collapse style.
You have:
.navbar-collapse { max-height: 50px; }
You need something like:
.navbar-collapse { max-height: 275px; }
According to the Google Chrome developer tools, you can find the .navbar-collapse style on line 106 of your style.css. In your Pastebin it looks like it's on line 94.
As a note, once you fix the .navbar-collapse max-height, you'll also need to add a background color to your .navbar .navbar-nav class so that the drop down menu doesn't have a transparent background.
I'm seeing a few other little things on your style that may need adjustment, but I'm going to assume that you'll ask specifically about these issues as you go. To fix the question you asked about, the navbar-collapse should help.
Please have a look at http://www.bootply.com/133473.
I have at least a couple of problems and I didn't find any solution up to now...
First problem:
The leaflet map is 0px height and the next row is not in the correct position.
Second problem (but maybe it is related to the first one):
On a small device the width of the map is the full width but I'd like to have a margin and I wasn't able to get it (I tried but margin-left, margin-right and padding-left, padding-right...) and of course the text row is superimposed to the map and that's not what I want...
Looking at your bootply posting, it looks like your first problem was solved (I see the map so the height must not be 0px).
As for your second problem, it is the Bootstrap Editor that is not able to show your app on smaller screens. This problem may go away when you view your app on its own web page.
I'm using Font-awesome in my project, and every icon is aligned in the middle of the line. On Chrome, Firefox and IE, They are aligned corretly, but on Safari, the icon drop around 3 or 4 pixels.
I inspect the icon and in every browser, they are render and ocupate the exactly space they should be. But in Safari, they are rendered with extra top size, a transparent padding on top of the icon. It's not vertical-alignment or line-height problem, the character itself have this "transparent padding" on top.
That seens silly, but on a huge project, every icon is aligned 3/4px down than it should be give me a lot of headache.
One possible reason is that you have a different default line height in the different browsers. Try explicitly setting this to see if if it makes a difference:
CSS
i{
line-height:20px;
}
or even
i{
display:inline-block;
}
depending on the specifics of your styling, you might need to also set a class on the i tag, e.g.
i.icon-class{ ....}
Good luck!
I am having trouble trying to get a jquery ui tab panel's height to grow with floating divs within the panel.
the divs have specific data returning to these divs and I need them to float left and right to save ui real estate.
Does anyone know how i can fix this?
Actually, this is a well-known css issue. A discussion is here:
http://www.quirksmode.org/css/clearing.html
To summarize the article, any <divs> that you wish to function as both a tab pane and a float container should have these styles added to them either in your <style> or css <link> files:
overflow: auto;
width: 100%
This isn't a bug. It's intentional. The floating div literally lifts out of the container, and the container will not be aware of the floating div. At least, that was the goal.
You should do a search on here for "clearing floats" or other related css rules, because using the above will cause issues with certain browsers (in short: 'take care to test this, all the same').