search

frequent / bartender

jQuery Mobile CSS iOS style tab bar
106 stars 24 forks source link

Tab bar with two or five items, not the full display width is used #1

Open ti-dev opened 13 years ago

ti-dev commented 13 years ago

First, a really cool extension! I like it very much and I will use it in my project!

On your demo webpage and on my iPhone webapp I have a tab bar with five items. The problem its, that on the right-hand side, there are a few pixels free space.

I checked the CSS and I see this line: .ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.9%; }

Why isn't there 20.0%? With 20 it works and the whole width of the screen is used.

Also you have some lines twice in your CSS: /* fix for JQM issue 2270, IE navbar breaking (will hopefully be worked into JQM / / grid a: 50/50 / .ui-grid-a .ui-block-a, .ui-grid-a .ui-block-b { width: 49.9%; } .ui-grid-a .ui-block-a { clear: left; } / grid d: 20/20/20/20/20 */ .ui-grid-d .ui-block-a, .ui-grid-d .ui-block-b, .ui-grid-d .ui-block-c, .ui-grid-d .ui-block-d, .ui-grid-d .ui-block-e { width: 19.9%; } .ui-grid-d .ui-block-a { clear: left; }

Best Regards.

frequent commented 13 years ago

Thanks!

There is an issue filed with JQM regarding the navbar breaking in Internet Explorer. See here issue 2270. To avoid this I needed to reduce the width from 20% to 19.9%.

I think the problem is only 1px, so I will either try to loose it somewhere or maybe try to center the whole navbar so the free space is at least spread evenly. Give me a few days.

ti-dev commented 13 years ago

Yes, always the IE :-) I use it for WebKit bases browsers, so I can switch without problems to 20.0%.