I need to add the button on the right hand side of the footer. I am adding it like this
<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed">
<h4>Copyright 2011</h4>
<a class="ui-btn-right" data-theme="a" data-ajax="false" href="/login.php?mode=logout">Logout</a>
</div>
I am getting the button but it is coming at the start of the next line. If I change the role to header, the button positions perfectly. Even if I add class="ui-header" in footer div, it comes ok but then it simply doesn't get its position fixed. ('coz it has now both the style ui-footer and ui-header)
How can I put the button on footer on extreme right without sacrificing the data-position? (I need the data-position fixed also)
the footer has a right margin set to 90px by default. You need to override it and make the two controls float, like so:
<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain"
data-position="fixed">
<h4 style="display: inline-block; margin-left: 65px; margin-right: 0">
Copyright 2011</h4>
<a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a"
data-ajax="false" href="/login.php?mode=logout">
Logout</a>
</div>
P.S. From usability point of view, I would have placed the "Logout" button in the top-right corner of the page rather than in a footer.
I found Tsar's answer helpful, though it doesn't seem like most of that markup is necessary. I get the same effect with
<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer">
<a class="ui-btn-right" href="/login.php?mode=logout">Logout</a>
<h3>Copyright 2011</h3>
</div>
(I have only tested this in my desktop browser so far.) Looks like the magic is in the ui-btn-right class. There is also a ui-btn-left.
Related
I'm trying to have a select menu and a button inline, same width as surrounding lines, see this:
http://jsbin.com/hibatehepe/edit?html,output
Here it's done with field-container, but the select menu should be wider.
Any ideas please?
You can look at this question:
How to make a div to fill a remaining horizontal space?
mystrdat's answer based on this codepen: http://codepen.io/anon/pen/mdoej can work for you.
You basically use float: right to keep the button with a fixed width all the way on the right side, and then select's container automatically fills the available width. (NOTE: I am only using inline CSS to quickly illustrate the answer, you should use CSS classes):
<div class="ui-field-contain">
<label for="b" class="select">Vælg kategori:</label>
<div >
<div style="float: right; padding-left: 0.5em;" >
Tilføj
</div>
<div style="overflow: auto;">
<select size="1" name="b" id="b" data-native-menu="false">
<option value="choose-one" data-placeholder="true">MAKE ME WIDE</option>
</select>
</div>
</div>
</div>
Updated jsbin
I have the following Panel in my jQuery mobile app , I want to make it to be drop down as appears in the following image rather than to be slide from the page edge . Is this can be done in jQuery mobile and How can i do this ?
<div data-role="page" id="MainPage" >
<div data-role="panel" id="Mainnavpanel" data-theme="b" data-display="overlay" data- position="right" data-position-fixed="true">
<ul data-role="listview"><li>
<a href="#MainPageheader" data-rel="close" class="ui-btn" >Close</a></li>
<li>Page1</li>
<li>Page2</li>
<li>Page3</li>
</ul>
</div>
<div data-role="header" id="MainPageheader" data-position="fixed" data-tap- toggle="false" data-fullscreen="false">
<div> <font size="6px"> Main Page </font></div>
</div>
<div data-role="content" >
//content
</div>
</div>
You can use popup widget to simulate dropdown menu.
As of jQuery Mobile 1.4, a new attribute data-arrow is added to popup widget. This creates an arrow which can be positioned anywhere in popup.
Arrow:
The popup can display an arrow along one of its edges when it opens if the data-arrow attribute is set. The attribute can take a value of true, false, or a string containing a comma-separated list of edge abbreviations ("l" for left, "t" for top, "r" for right, and "b" for bottom). For example, if you set data-arrow="r,b" then the arrow will only ever appear along the bottom or right edge of the popup. true is the same as "l,t,r,b" and false or "" indicates that the popup should be displayed without an arrow.
HTML
<div data-role="popup" id="popupID" data-arrow="t">
<!-- content -->
</div>
Add data-rel="popup" to button to call popup.
Menu
To modify arrow's size, check this link.
Demo
I want to have 2 buttons in the footer, one on the left side and the other on the right side.
With dataposition fixed, however right side button going little outside the page view.
Here is the code.
<div data-role="footer" data-theme="d" class="ui-bar" style="height:30px" data-position="fixed">
<a class="ui-btn-left" data-role="button" data-theme="a" id="approvetm">
Approve
</a>
<a id="sendback" data-rel="popup" data-theme="a" class="ui-btn-right" data-role="button" data-inline="true">Send Back</a>
</div>
Can you please tell me what is wrong in above code.....?
As per jQuery Mobile documentation footer is different than header in terms of buttons accommodation.
The page footer is very similar to the header in terms of options and configuration. The primary difference is that the footer is designed to be less structured than the header to allow more flexibility, so the framework doesn't automatically reserve slots for buttons to the left or right as it does in headers
However, this can be fixed by overriding ui-btn-right style (right position).
.ui-footer .ui-btn-right { right: 35px !important }
Demo
I want to have an image that stick to the bottom center of the screen. I know I can use <div data-role="footer"> to do it. However the footer has a visible horizontal line on top which I want to get rid off. Any idea how to do it?
The easiest way to do this is to use the built-in jQM footer, which has the data-position="fixed" attribute to make it stick to the bottom. I'm unfamiliar with this horizontal line you say the footer has, but it'll be easy to get rid of just by overriding the default jQM stylesheet. You can view/test-edit the CSS styles using Firebug in Firefox, or the built-in developer tools in any browser.
It should look something like this:
.ui-footer {
/* Use !important to ensure the target style will be overridden! */
border: none !important;
}
And the HTML:
... <!-- rest of page -->
<div data-role="footer" data-id="fixedFooter" data-position="fixed" data-tap-toggle="false">
<img src="path/to/image.png" />
</div>
I am developing something in a Right-To-Left (RTL) language and I need the text in the collapsible to be positioned on the right as opposed to the default left.
Here is the code:
<div id="content_c1" data-role="collapsible" data-iconpos="right" align="right">
<h3>Right to Left Text</h3>
<p>Right to Left Content</p>
</div>
<div id="content_c2" data-role="collapsible">
<h3></h3>
<p></p>
</div>
The first collapsible is Right to Left. The data-iconpos="right" nicely movees the icon to the right and the align="right" moves the content in the <p> to the right. But the text shown in <h3> stays on the left.
Thanks for the help in advance.
This is working for me:
.ui-collapsible h3 .ui-btn-inner
{
text-align:right;
}
I'm sure there is a better way but you could try this.
.ui-btn-text{float:right}
Having the same problem...
This one solved it :
.ui-collapsible-heading .ui-btn {
text-align: right;
}