33.333% leads to a small space left on the right of the three buttons #4472

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
3 participants

33.333% leads to a small space left on the right of the three buttons which is very visible when the rightmost button is selected.

Adding 0.001% seems to get rid of that space without overflowing the rightmost button on a new line.

33.333% leads to a small space left on the right of the three buttons…
…, very visible when the rightmost button is selected. adding 0.001% seems to get rid of that space without overflowing the rightmost button on a new line

I created a css hack for a 3 column nav that removed the space on iOS and Android devices with less than a 768px width. Over this width caused wrapping. Works for me on these devices until I find a better solution. For anyone who wants a quick hack/fix:

@media only screen and (max-device-width:768px){
.ui-grid{width:100%}
.ui-grid-b .ui-block-a, .ui-grid-b .ui-block-b{width:33%}
.ui-grid-b .ui-block-c{width:34.23%}
}

Oh ok thanks ! But does it wrap for you if you try my fix ? Just so I know...

@ghost ghost assigned jaspermdegroot May 31, 2012

Member

jaspermdegroot commented Jun 1, 2012

@istrasoft

Thanks for your PR. I agree we should look into how to avoid/minimize that gap. At the same time there are browsers (i.e. BB5 and IE7) where the navbar buttons wrap. It all depends on the available width and how the browser rounds off subpixels.

We have to be very careful with making changes to these percentages and probably need to test first on all supported platforms. I am not saying this is not a good fix, but it's better to address all issues at once before changing anything.

So I am closing this PR for now and would like to invite you to join the discussion at #3341.

Thanks again,

Jasper

Thanks a lot for your explanation. I surely only tested it on a few devices available, so it was a mere suggestion. There are surely better solutions out there. Maybe work something out to make the last element fill in all the available space, not a fixed percentage (like it would behave with a table of 100% width and two TDs of 33% and the last with no width set). I'm not suggesting using tables though...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment