How can I set how many items are on one row with data-role="navbar"?

"data-*" attributes don't do anything by themselves. It's up to CSS or JavaScript to look for them and style/do something. As such there is insufficient information to provide an answer to the question that was asked.

Apparently Gary knows (or guessed) something that's not stated here.

I don't think it is guessing.  If there is no class or id associated then that should override any other css that is formatting the width.  A link to the test page would be most helpful though.

Not guessing anything, jQuery mobile spaces out the buttons upto 5 in a row, if there are more than 5 then it moves it into two columns of 3 etc.

One thing I forgot, you will need to add !important to the class, since it adds it inline

Hi Gary, This is what I put in the css

<style type="text/css">
[data-role="navbar"]  li{
    width:10%  !important // divide your number of buttons into 100
}
</style>

Select allOpen in new window

And This is what is being generated

<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
 <ul class="ui-grid-duo ui-grid-a">
   <li class="ui-block-a"><a href="f?p=24424:AREA:4493192548008::NO:AREA:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">A</span></span></a></li>
   <li class="ui-block-b"><a href="f?p=24424:CATEGORY:4493192548008::NO:CATEGORY:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text">C</span></span></a></li>
   <li class="ui-block-a"><a href="f?p=24424:OUTCOME:4493192548008::NO:9:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">O</span></span></a></li>
   <li class="ui-block-b"><a href="f?p=24424:13:4493192548008::NO:13:P13_PARENT_ID,P13_PARENT_TYPE:4,OUTCOME" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text">F</span></span></a>
   </li><li class="ui-block-a"><a href="f?p=24424:13:4493192548008::NO:13:P13_PARENT_ID,P13_PARENT_TYPE:4,OUTCOME" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">N</span></span></a>
   </li><li class="ui-block-b"><a href="f?p=24424:13:4493192548008::NO:13:P13_PARENT_ID,P13_PARENT_TYPE:4,OUTCOME" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">+</span></span></a>
</li>
 </ul>
</div>

Select allOpen in new window

Still going into two rows of 3
Thank you for the help,
Bill

Actually, sorry.. it is not going into 2 rows of 3
it is going into 3 rows of 2

Kravamir,
If I don't have enough information here then what would be enough..

Where are you putting that css?  It needs to be after all your other css.

Do you have a link to the page.

Gary, you guessed he was asking about jQuery Mobile. To me at least, using jQuery in mobile development does not imply the use of jQuery Mobile.

bcarlis, sufficient information would be a full working example demonstrating the problem, not just a subset of the code that is necessary to reproduce it.

Gray, I was putting the css by the header of the page where the rest resides.

Kravimir,
I will create a sample app on the Oracle APEX site. Sorry,  Oracle APEX does use jQuery Mobile.
I will create tomorrow.


Thank you both for the help,
Bill

Kravimir and Gary,
Here is a sample app

https://apex.oracle.com/pls/apex/f?p=81400

demo/demo

Thank you,
Bill

Anyone access the demo app?
This is the exact code I am dealing with.

the navbar is acting as the documentation says it should but I would like to put 5-6 across one row..
Anyone know how?

Anyway to dynamically build it?
Thank you, Bill

Looking at your code, I think you are making this harder on your self then you have to. The code you posted seems to come from looking at the console. That is just going to mess things up for something like this.  

Looking at the docs http://demos.jquerymobile.com/1.4.3/navbar/  Gary's first answer is on the money.  You can only have up to 5 across.  

<div data-role="navbar" data-grid="d">
    <ul>
        <li><a href="#" class="ui-btn-active">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
        <li><a href="#">Five</a></li>
    </ul>
</div><!-- /navbar -->

Select allOpen in new window

If you want 4 across

<div data-role="navbar" data-grid="c">
    <ul>
        <li><a href="#" class="ui-btn-active">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
        <li><a href="#">Four</a></li>
    </ul>
</div><!-- /navbar -->

Select allOpen in new window

or 3

<div data-role="navbar">
    <ul>
        <li><a href="#" class="ui-btn-active">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</div><!-- /navbar -->

Select allOpen in new window

If you are going to have 6 nav items, then you want to use the 3 across version.

It kind of makes sense not to go beyond 5 because of size.   look at the sample and narrow your browser down to 400px and see what happens.    If you are using this for desktop, then you will want to detect the viewport or mobile and switch out using jqmobile or not.

Thank you Scott.. I can at least get 5
I thought it was 4 max across.. so I checked my example I posted above and I had a missing </li>

So, no way to get 6 across? yes, I look at it on my iPhone, use it on my iPhone also.
I can have just a single letter as the Label.

Thank you,
Bill

If you are going to use jquery mobile, it is set up for 5.  There are probably multiple places where all of this is baked in.    If you just want to make your own menu you can create a containing div and float the inner divs to the right.  It is really not worth the effort if you are using jquery mobile though.

Ok, thank you

Kravir,

You said...

bcarlis, sufficient information would be a full working example demonstrating the problem, not just a subset of the code that is necessary to reproduce it.

So, I created a working proto type..
But, never heard back from you ??

To get 6 across you have to override the css like i said earler

Hi Gary,
How would I do that? I created a prototype with a link above. If you can help me out, it would be much appreciated.
Thank you very much,
Bill

Add this css to your custom css (assuming your css file is after the jquery css)

.ui-grid-d li {
    clear: none !important;
    width: 16.666% !important;
}

Select allOpen in new window

Look for this class in the jquery.mobile-1.2.1.min.css

.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
    border: 0 none;
    box-sizing: border-box;
    float: left;
    margin: 0;
    min-height: 1px;
    padding: 0;
}

Select allOpen in new window

...and add to this class .ui-block-f

And you should be good to go for 6 across

Thank you, I will try it next couple days

That worked nicely!
But it shows with a section on the left that could hold another menu item, 6 items..
I tried 6 and it went to 3 rows again. If there is a way for 6 what would I do?

But 5 works sweet with below code... thank you so much Gary for not giving up on me!
This is for a personal app I built and am playing with...

htp.p('<style>
.ui-grid-d li {
    clear: none !important;
    width: 20% !important;
}
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e {
    border: 0 none;
    box-sizing: border-box;
    float: left;
    margin: 0;
    min-height: 1px;
    padding: 0;
}
</style>');
htp.p('<div data-role="navbar">
 <ul>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':CATEGORY:'||:SESSION||'::NO:CATEGORY:::">C</a></li>
   <li><a href="f?p='||:APP_ID||':OUTCOME:'||:SESSION||'::NO:9:::">O</a></li>
   <li><a href="f?p='||:APP_ID||:G_ADD_OBJECT||'">+</a>
</li>
 </ul>
</div><!-- /navbar -->');

Select allOpen in new window

I tried adding . .ui-block-f to the css thinking that may allow 6 across but it went to 3 rows...

htp.p('<style>
.ui-grid-d li {
    clear: none !important;
    width: 16.666% !important;
}
.ui-block-a, .ui-block-b, .ui-block-c, .ui-block-d, .ui-block-e , .ui-block-f {
    border: 0 none;
    box-sizing: border-box;
    float: left;
    margin: 0;
    min-height: 1px;
    padding: 0;
}
</style>');
htp.p('<div data-role="navbar">
 <ul>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':CATEGORY:'||:SESSION||'::NO:CATEGORY:::">C</a></li>
   <li><a href="f?p='||:APP_ID||':OUTCOME:'||:SESSION||'::NO:9:::">O</a></li>
   <li><a href="f?p='||:APP_ID||:G_ADD_OBJECT||'">+</a>
</li>
 </ul>
</div><!-- /navbar -->');

Select allOpen in new window

Gary, How did you do that it the test app?

Oh, shoot.. 5 was already working.. it was 6 we were trying for!

Boy I need more sleep!

I cannot change jquery.mobile-1.2.1.min.css, that is an Oracle file.. nor do I want to change this for ALL apps, just this one app.
Need to make it app specific.

Then just add your own css

.ui-grid-d li {
    clear: none !important;
    width: 16.666% !important;
}

.ui-block-f {
    border: 0 none;
    box-sizing: border-box;
    float: left;
    margin: 0;
    min-height: 1px;
    padding: 0;
}

Select allOpen in new window

Yes, I tried that.. but the Oracle css changes the classes to this before it hits my extra css code

Adding the sixth one renders like this...

<div data-role="navbar" class="ui-navbar ui-mini" role="navigation">
 <ul class="ui-grid-duo ui-grid-a">
   <li class="ui-block-a"><a href="f?p=81400:AREA:16875223550973::NO:AREA:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">A</span></span></a></li>
   <li class="ui-block-b"><a href="f?p=81400:AREA:16875223550973::NO:AREA:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text">A</span></span></a></li>
   <li class="ui-block-a"><a href="f?p=81400:AREA:16875223550973::NO:AREA:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">A</span></span></a></li>
   <li class="ui-block-b"><a href="f?p=81400:CATEGORY:16875223550973::NO:CATEGORY:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text">C</span></span></a></li>
   <li class="ui-block-a"><a href="f?p=81400:OUTCOME:16875223550973::NO:9:::" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text">O</span></span></a></li>
   <li class="ui-block-b"><a href="f?p=81400" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="c" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text">+</span></span></a>
</li>
 </ul>
</div>

Select allOpen in new window

Here is the sample app

https://apex.oracle.com/pls/apex/f?p=81400

demo/demo

Sorry, here is the log in to the APEX Tool...

https://apex.oracle.com/pls/apex

Workspace       sd_apps
User/passwd    demo/demo

then go into app 81400
then go into page 1
click on "Test" region to see my code...

That did it! You are awesome!

For those that need this for APEX Mobile.. here is the result thanks to Gary!

This is in the source area of a "PL/SQL Dynamic Region"

htp.p('<style>
.ui-grid-a li {
    clear: none !important;
    width: 16.6666% !important;
}
</style>');
htp.p('<div data-role="navbar">
 <ul>
   <li><a href="f?p='||:APP_ID||':1:'||:SESSION||'::NO:AREA:::">M</a></li>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':AREA:'||:SESSION||'::NO:AREA:::">A</a></li>
   <li><a href="f?p='||:APP_ID||':CATEGORY:'||:SESSION||'::NO:CATEGORY:::">C</a></li>
   <li><a href="f?p='||:APP_ID||':OUTCOME:'||:SESSION||'::NO:9:::">O</a></li>
   <li><a href="f?p='||:APP_ID||:G_ADD_OBJECT||'">+</a>
</li>
 </ul>
</div><!-- /navbar -->');

Select allOpen in new window