I have seen documentation on the JQueryMobile site that shows you how to group links in the header/footer together. I have also seen documents that allow you to place links specifically in the space to the left and/or right of the heading tag. I have NOT seen any documents on how to merge them
Basically what I want is
<div data-role="header">
left 1
left 2
<h1>Page Title</h1>
right 1
right 2
right 3
</div>
and for that to appear as
[left 1][left 2] Page Title [right 1][right 2][right 3]
I have tried wrapping the links in a div and using floats (adding the class(s) ui-btn-left/right also appears to work), however the anchor tags remain as-is and the styles defined by the framework are never applied (All I see is regular links, no fancy buttons)
Can someone please tell me if I'm missing an attribute? or if there is a container class that I can use that will not block the buttons from having their new markup applied?
Edit:
The above code will currently output
[left 1] Page Title [left 2]
[right 1][right 2][right 3]
Solution:
Use a wrapping container to fix the position left or right aligned (I am using the class ui-btn-[left/right]) then force the link to take the markup with data-role="button"
So it looks like
<div data-role="header">
<div class="ui-btn-left">
left 1
left 2
</div>
<h1>Page Title</h1>
<div class="ui-btn-right">
right 1
right 2
right 3
</div>
</div>
use the class "ui-btn-right"/ "ui-btn-left"
Update use wrapers for multiple buttons
<div class="ui-btn-left">
left 1
left 2
</div>
<div data-role="header">
<div class="ui-btn-left" data-role="controlgroup">
left 1
left 2
</div>
<h1>Page Title</h1>
<div class="ui-btn-right" data-role="controlgroup">
right 1
right 2
right 3
</div>
</div>
Related
When creating some clickable dropdowns, I noticed the dropdown menu will hide behind any clickable dropdown buttons if they overlap. Here is an example
How can I fix this? Here is the code used to create the dropdown.
<div class="w3-container">
<div class="w3-dropdown-click">
<button onclick="myFunction()" class="w3-btn">Click Me!</button>
<div id="Demo" class="w3-dropdown-content w3-border">
Link 1
Link 2
</div>
</div>
</div>
I also made a fiddle, but it doesn't seem to be working: https://jsfiddle.net/n2fole00/99d8d7pj/
BTW, would this be considered a bug?
Thanks.
Based on Tony Hensler's comment, it was the z-index.
<div id="<?php echo $course->course_id; ?>" class="w3-dropdown-content w3-border" style="right:0; z-index:1;">
I just added z-index:1 to the w3-dropdown-content div as an inline style for the fix.
Thanks Tony.
I have a container that is a row if screen size is greater than "sm" in angular material
<div layout="column" layout-gt-sm="row" layout-margin="20px" >
<div id="div1" flex="80">
</div>
<div id="div2" flex="20">
</div>
</div>
</div>
When it turns to a column, I need my div2 stacked onto top of div1 but as the natural order is, divs on the left are stacked over divs on right.
How can I change this and have the div on right on the top of div1 or any other div for that matter?
You can use flex-order and flex-order-gt-sm option to get the desired result.
http://codepen.io/next1/pen/EKXedG
For more info check the offical doc Material Layout
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
my site is: http://www.italianiaperth.com/
i am trying to align the text in white 'Italiani a Perth' and the search Widget horizontally.. (text floating left, search widget to the right)
I have managed to get them on the same line by setting their respect divs width to auto but the problem is the content underneath floats to the right along with the search widget
ive played with this for hours and looked at similar questions on the forums but im at my witts end, can someone point me in the right direction? thanks :)
Use Bootstrap 3.0 ( getbootstrap.com )
Put the two divs like this :
<div class="container">
<div class="row">
<div class="col-md-8"> DIV LEFT </div>
<div class="col-md-8"> DIV RIGHT </div>
</div>
</div>
More info here :
http://getbootstrap.com/css/#grid
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