I am using Jquery Mobile and I am trying to place two button on the right of the header.
<header data-role="header">
<h1>Myapptitle</h1>
<div class="share-it-wrapper">
<select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="app-shareicon" data-theme="a" data-iconpos="notext" onchange="handleSocialShare()">
<option value="no"></option>
<option value="facebook"><img src="images/fb.png" />Facebook</option>
<option value="twitter"><img src="images/twitter.png" />Tweeter</option>
<option value="email"><img src="images/email.png" />Email</option>
</select>
</div>
Credits
</header>
For now, my buttons are not aligned :
The doc indicate to use data-role="controlgroup" and data-type="horizontal" but if I wrap the buttons into a <div data-role="controlgroup" data-type="horizontal"> then the #creditspage buttons becomes text... is there a bug in JQM (Cf the doc seems to also have the problem). How can I achieve perfect alignment for buttons on the right ? Thanks
You can surround both buttons in a div with class ui-btn-right. This places the div at the right side of the header. Then you need a little CSS to put the 2 buttons inline and next to eachother.
<header data-role="header">
<h1>Myapptitle</h1>
<div class="ui-btn-right">
<div class="share-it-wrapper">
<select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="app-shareicon" data-theme="a" data-iconpos="notext" onchange="handleSocialShare()">
<option value="no"></option>
<option value="facebook">
<img src="images/fb.png" />Facebook</option>
<option value="twitter">
<img src="images/twitter.png" />Tweeter</option>
<option value="email">
<img src="images/email.png" />Email</option>
</select>
</div>
Credits
</div>
</header>
The CSS to make this work is a little different in jQM 1.3 vs 1.4.
For 1.3:
.headerButton, .share-it-wrapper {
float: left;
margin-right: 5px!important;
}
.headerButton {
margin-top: 8px!important;
}
For 1.4:
.headerButton, .share-it-wrapper {
display: inline;
margin-right: 5px!important;
}
.share-it-wrapper .ui-select{
display: inline;
}
1.3 DEMO
1.4 DEMO
Related
I want to place select menu and input type in a same line.
This is the link to jsfiddle demo.
html
<div class="lin">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
I tried it using style but i didn't get please any one help me.
Just place it in a grid, jQuery Mobile has available solution.
Working example: http://jsfiddle.net/Gajotres/26uph/
HTML:
<div class="ui-grid-a">
<div class="ui-block-a"><input type="text"/></div>
<div class="ui-block-b"><select><option>1</option><option>2</option></select></div>
</div><!-- /grid-a -->
HTML:
<div class="left">
<select data-inline="true">
<option>1</option>
<option>hello</option>
</select>
</div>
<div class="right">
<input type="text" name="txt" value=""/>
</div>
<div class="clear">
</div>
CSS:
.left{
display:inline;
float: left
}
.right{
float:right;
}
.clear{
clear:both;
}
take a look: http://jsfiddle.net/DRs8p/3/
I am using jquery mobile 1.4.2.The code which i am using in my page is here
<script>
$(document).ready(function () {
$(".hr").click(function(){
$("#imgs").show();
});
});
</script>
<div class="hr">click</div>
<div>
<img src="http://www.inmomundo.com/oinmonm/plugins/searchbox/images/load_blu.gif" class="imgst" style="display:none;">
<select name="im_c" id="im_c" data-mini="true">
<option value="1">first</option>
<option value="2">second</option>
</select>
I want the above image to be display inside a select option i.e next to first.The link to jsfiddle is
http://jsfiddle.net/Y8LtK/1/
If I understand it correctly you want to show a spinner on the selector to give the user some feedback after pressing the test(click) button. The way I who'd approach it is to add a class to the selector and in CSS position the spinner appropriately. Use further javascript events to hide and show the spinner and get the behavior you are looking for.
JS
$(document).ready(function () {
$(".hr").click(function () {
$("#im_c").addClass("showSpinner");
});
});
CSS
.showSpinner {
background: url("http://www.inmomundo.com/oinmonm/plugins/searchbox/images/load_blu.gif");
background-size: 1em;
background-repeat: no-repeat;
padding-left: 2em;
}
HTML
<button class="hr">Test</button>
<div>
<img src="http://www.inmomundo.com/oinmonm/plugins/searchbox/images/load_blu.gif" style="display:none;" width="16" height="16" name="imgstate" id="imgstate" class="imgstate" alt="cargando" />
<select data-mini="true" id="im_c">
<option value="1">first</option>
<option vakue="2">second</option>
</select>
</div>
UPDATE: You did not include any of the jQuery Mobile libraries
If your selector id is im_c you need to target the parent div so the selector becomes im_c-button
$("#im_c-button").addClass("showSpinner");
See this jsfiddle: http://jsfiddle.net/beRoberto/dgvWC/
I am trying to put a jquerymobile mobile (using version 1.3) selectmenu and autocomplete side by side, but the autocomplete search-box is not aligned with the selectmenu and is cut-off at the top.
I've tried this
<div class="ui-grid-a">
<div class="ui-block-a" style="float:left;">
<label for="TargetTypeList" class="ui-hidden-accessible">All Uses</label>
<select name="TargetTypeList" id="TargetTypeList">
<option value="standard">Standard: 7 day</option>
<option value="rush">Rush: 3 days</option>
</select>
</div>
<div class="ui-block-b" style="float:left;">
<ul data-role="listview" data-inset="true" data-filter="true" data-filter-reveal="true" data-filter-placeholder="Search cars...">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
<li>Cadillac</li>
<li>Chrysler</li>
<li>Dodge</li>
<li>Ferrari</li>
<li>Ford</li>
<li>GMC</li>
<li>Honda</li>
<li>Hyundai</li>
<li>Infiniti</li>
<li>Jeep</li>
<li>Kia</li>
<li>Lexus</li>
<li>Mini</li>
<li>Nissan</li>
<li>Porsche</li>
<li>Subaru</li>
<li>Toyota</li>
<li>Volkswagen</li>
<li>Volvo</li>
</ul>
</div>
(live demo at: http://jsfiddle.net/gE44j/) and table layouts with no luck.
Any ideas how to format them properly?
jQM adds negative margins around the filter input. Try adding this CSS:
.ui-listview-filter-inset {
margin: 4px 0 0 0 !important;
}
UPDATED FIDDLE
I have a control group of buttons that looks like this:
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
I'd like for the label to look like the rest of the labels in my form. As you can see, the label is not inline with the control group as it is with other controls:
How do I wrap a control group in a field container and have the label appear inline? Is it possible? I didn't see any examples of this on the jqmobile site.
The entire markup for the form is:
<div data-role="content">
<div data-role="fieldcontain">
<label for="select-native-1">Metric</label>
<select name="select-native-1" id="select-native-1">
<asp:Repeater ID="ui_metrics" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
<div data-role="fieldcontain">
<label for="select-native-1">Interval</label>
<select name="select-native-1" id="select1">
<asp:Repeater ID="ui_interval" ClientIDMode="Static" runat="server">
<ItemTemplate>
<option value='<%#DataBinder.Eval(Container.DataItem, "id")%>'><%#DataBinder.Eval(Container.DataItem, "friendly_name")%></option>
</ItemTemplate>
</asp:Repeater>
</select>
</div>
<div data-role="fieldcontain">
<label for="datetime-4">Start Date</label>
<input type="datetime-local" name="datetime-4" id="datetime-4" value="" />
</div>
<div data-role="fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
<div data-role="fieldcontain">
<div data-role="rangeslider">
<label for="range-7a">Index:</label>
<input type="range" name="range-7a" id="range-7a" min="0" max="100" value="0" />
<label for="range-7b">Index:</label>
<input type="range" name="range-7b" id="range-7b" min="0" max="100" value="100" />
</div>
</div>
</div>
</div>
Solution
Working example: http://jsfiddle.net/Gajotres/PMrDn/64/
HTML:
<div data-role="fieldcontain" id="custom-fieldcontain">
<label>Ahead</label>
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
CSS:
#media all and (min-width: 28em){
#custom-fieldcontain label {
width: 22% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] {
width: 78% !important;
display: inline-block;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls {
width: 100% !important;
}
#custom-fieldcontain [data-role=controlgroup] .ui-controlgroup-controls a {
width: 24.5% !important;
}
}
Info
Working example was made using your HTML. Media queries are used directly from jQuery Mobile css file. Rest of CSS is a label fix / content fix.
Here an example without customizing the fieldcontainer...
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Ahead</legend>
<input type="radio" name="radio1" id="hour" checked="checked">
<label for="hour">Hour</label>
<input type="radio" name="radio1" id="day">
<label for="day">Day</label>
<input type="radio" name="radio1" id="week">
<label for="week">Week</label>
<input type="radio" name="radio1" id="month">
<label for="month">Month</label>
</fieldset>
</div>
They dont stand in the same line because div with controlgroup is a block element. You could use one of the two solutions which I've used before :
Solution 1 : Using CSS to achieve the inline look
Solution
Just add a display: inline property to the control group, you're good to go.
[data-role=controlgroup] {
padding-left : 2em;
display: inline;
}
Note
The CSS selector I've used is just an indicator. Try using ID for the control group you want to change. Also, make sure that the custom style you are adding is loaded after jQM's style. To adjust the seperation between label and buttons, change the padding-left to your hearts' content.
Solution 2: Using grids to set up the layout
Grids provide a good way to arrange elements in jQM. A typical grid layoud would look like this :
<div class="ui-grid-a">
<div class="ui-block-a"><div class="ui-bar ui-bar-e" style="height:60px">Block A</div></div>
<div class="ui-block-b"><div class="ui-bar ui-bar-e" style="height:60px">Block B</div></div>
</div><!-- /grid-a -->
This is a typical 2-column layout, which we'd use here as well. So here's how your layout must look like :
<div data-role="fieldcontain">
<div class="ui-grid-a">
<div class="ui-block-a" style="width:20%">
<label>Ahead</label>
</div>
<div class="ui-block-b" style="width:70%">
<div data-role="controlgroup" data-type="horizontal">
Hour
Day
Week
Month
</div>
</div>
</div>
</div>
Note
You could adjust the width of the ui-block-* elements to any size you need by changing the width property in the HTML tag.
A consolidated Demo
http://jsfiddle.net/bGjZ8/2/
I am failing to correctly organize jQuery Mobile components in the following way:
I was trying to build this fixed searchbar, but after many attemps I ended up here, asking for help.
<div data-role="header" data-position="fixed" data-theme="b">
<a data-role="button" class="ui-btn-lft" href="#pgIndex" data-icon="arrow-l" data-theme="b">Back</a>
<h1>Title</h1>
</div>
<div data-role="header" data-theme="b" id="second-header">
<div style="float:left; width: 75%;">
<select name="selCombo1" id="selCombo1" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
<span style="margin-bottom: 3px;"></span>
<select name="selCombo2" id="selCombo2" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
</div>
<div style="float:right; width: 25%;">
<a data-role="button" data-mini="true" data-icon="search" data-iconpos="top" data-rel="back">Search</a>
</div>
</div>
Is there a simple way to archieve this?
The complete code is on jsFiddle:
http://jsfiddle.net/mbarni/rjdt2/
You can achieve a similar effect to a second header level by appending a div with the classes:
class="ui-bar ui-bar-b"
to your header. Here's a simple example using your code.
JSFiddle Example
For more info, check the bottom of this doc