Menu
Is there anyway to add a select box inside the header?
I have tested with this code
<div data-role="header" data-position="inline" data-theme="b">
<h1>My Page</h1>
<select>
<option>Option 1</option>
<option>option 2</option>
</select>
</div>
but it doesn't work
Edit:
sorry because the question is not so clear. With the above code, i have a select box in the header, but the select box is centered (underneath the page title). Which i want is that, the select is placed on the right(just like a button inside header).
|[back] --------- Title ----------- [select box]|
596
What do you see / not see exactly? I placed your code in a jQuery Mobile page, and I got a select field as expected in the page header. Here's the code snippet I used, which checks out OK in Desktop and Mobile Safari (iPad):
<body>
<div data-role="page" id="somepage" data-theme="c">
<div data-role="header" data-position="inline" data-theme="b">
<h1>My Page</h1>
<select>
<option>Option 1</option>
<option>option 2</option>
</select>
</div>
<!-- rest of page -->
</div>
<body>
EDIT
I think the issue you run into is that h1 is a block element of course, and so is the select field once jQM has run its code. If you inspect the field once the page is rendered in a WebKit browser, you will see that jQM applies extra divs and the like, which means that the select field can't easily reside on the same line as your header.
According to the docs, you need to experiment with custom mark-up in the header by placing it in its own div (so jQM doesn't try to manipulate it) and then styling it yourself. The kind of look you want to achieve is best done when building a header bar with two links it, but obviously that doesn't apply for you because the second "button" isn't a link, it's a select field:
The header plugin looks for immediate children of the header container, and automatically sets the first link in the left button slot and the second link in the right. In this example, the 'Cancel' button will appear in the left slot and 'Save' will appear in the right slot based on their sequence in the source order.
You could try doing something like this to fudge it, but you'd need to test across the devices you're supporting in your app (and obviously put the styles in a class, I've only done it this way for example purposes):
<div data-role="header" data-position="inline" data-theme="b">
<h1>My Page</h1>
<div data-role="fieldcontain" style="position: absolute; top: 0; right: 0; margin: 0; padding: 0">
<select>
<option>Option 1</option>
<option>option 2</option>
</select>
</div>
</div>
...
If you want to use an actual Select element, encapsulating it in an anchor tag with data-role="none" worked for me.
e.g.
<div data-role="header">
<a data-role="none">
<select>
<option value="1">Option One</option>
<option value="2">Option Two</option>
</select>
</a>
</div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
