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
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 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
I am trying to remove padding from jquery mobile checkbox so that its align left: 0px however i cant get it to work. here is a JSFiddle of my problem: http://jsfiddle.net/jGhqS/4/
How do I align jquery mobile checkbox fully to the lefT?
The easiest way to find out how is to open up your console on your browser, inspect the checkbox and see what other styles are being applied to the checkbox
jQuery mobile created its fancy styles by appending and wrapping HTML around what you make, so your checkbox input and label become
<div class="ui-checkbox">
<input id="rememberCheck" type="checkbox" checked="">
<label id="rememberLb" for="rememberCheck" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="c" class="ui-btn ui-btn-corner-all ui-btn-icon-left ui-checkbox-on ui-btn-up-c">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text">CHECK BOX</span>
<span class="ui-icon ui-icon-shadow ui-icon-checkbox-on"> </span>
</span>
</label>
</div>
So to remove the spacing I copied jQuery mobile's style and changed the spacing to make the margin on the left smaller
.ui-checkbox .ui-btn-icon-left .ui-icon, .ui-radio .ui-btn-icon-left .ui-icon {
left: 5px;
}
Like this - http://jsfiddle.net/jGhqS/6/
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
I can't figure out how to register the taphold event for a Flip toggle switch. I tried as described here with the following code.
<div data-role="fieldcontain">
Sex
<select name="sex" id="id" data-role="slider">
<option value="off">Male</option>
<option value="on">Female</option>
</select>
</div>
$('#id').live('taphold', function(){
console.log("taphold");
});
And, because the actual <select> tag is hidden, and the switch is rendered by following html
<div role="application" class="ui-slider ui-slider-switch ui-btn-down-c ui-btn-corner-all ui-focus">
<span class="ui-slider-label ui-slider-label-a ui-btn-active ui-btn-corner-all" role="img" style="width: 100%">Female</span>
<span class="ui-slider-label ui-slider-label-b ui-btn-down-c ui-btn-corner-all" role="img" style="width: 0%">Male</span>
<div class="ui-slider-inneroffset">
<a href="#" class="ui-slider-handle ui-btn ui-shadow ui-btn-corner-all ui-slider-handle-snapping ui-focus ui-btn-up-c" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" data-theme="c" role="slider" aria-valuemin="0" aria-valuemax="1" aria-valuenow="on" aria-valuetext="Female" title="Female" aria-labelledby="eforms_patient_sex-label" style="left: 100%">
<span class="ui-btn-inner ui-btn-corner-all">
<span class="ui-btn-text"/>
</span>
</a>
</div>
</div>
Which is a sibling of aboves <select> tag I also tried this
$('#id').parent().find('[role="application"]').live('taphold', function(){
console.log("taphold");
});
But nether did work. So...
How to register the virtual taphold event for jQuery mobile Flip toggle switch?
//edit
I added a onclick function to the <div> tag, via opera dragonfly, and it worked. So It seams that registering the event to the <div> is the right approach. But it does not work, with the code above.
The event is called taphold not tabhold.