I am using a JQM flip switch in one of my views in an ASP.Net MVC 4 mobile web application. When the flip switch is moved all the way to the right it is showing an unwanted vertical line when rendering. See screenshot below:
Here is the code:
<li data-role="fieldcontain">
#Html.Label("AutoLogin", New With {.style = "text-align:center;font-weight:bold"})
<div class="center-wrapper">
<select name="AutoLogin" id="AutoLogin" data-role="slider" data-mini="true">
<option value ="false">Off</option>
<option value ="true">On</option>
</select>
</div>
</li>
Why is this happening and how can I prevent it?
center-wrapper class:
.center-wrapper{
text-align: center;
}
.center-wrapper * {
margin: 0 auto;
}
EDIT:
I discovered that this rendering issue is not caused by centering the flip switch but is instead caused by simply having the flip switch inside of a list item. If I reduce the flip switch down to its simplest form (see below), I still get the rendering issue if the flip switch is inside of a list item. You should be able to easily reproduce this.
<label for="flip-1">Flip switch:</label>
<select name="flip-1" id="flip-1" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
Related
For some reason in some cases select2 (version 4.0.3) shows partially selected value.
HTML:
Selected value partially visible<select name="example" id="wraps">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>
<br>
Selected value fully visible
<select name="example2">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>
JS:
$('#wraps').select2({width: 'resolve', dropdownAutoWidth : true});
Result:
result
fiddle also
https://jsfiddle.net/nhqzzf64/2/
When using default drop-down I see value "Harju maakond" but with select2 I see "Harju ma..."
Setting exact width for dropdown is not an option because I don't know the maximum width. Content is changing.
width: 'auto' option is also not suitable because I want fix width after page is rendered.
Any solution how to set the width the same as original drop-down?
You can try expanding the select2 box with pure CSS (note the !important rule):
.select2-container {
width: 200px !important;
}
See this fiddle.
the "resolve" option does not appear to be supported in 4.0.3
Your best bet is to use width: 100% when initializing select2, and place the element within a container you control the width of.
$('#wraps').select2( {
width: '100%'
});
$('#wraps').select2({width: '100%'});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet"/>
Selected value fully visible
<select name="example" id="wraps">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>
<p></p>
Selected value fully visible
<select name="example2">
<option value="71.0">Harju maakond</option>
<option value="73.0">Hiiumaa</option>
<option value="48.0">Ida-Virumaa</option>
</select>
I was able to solve to problem when getting the original width() and specifying also font-size via css and after that converting drop-down with select2().
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
these appear one above the other inside the data-role="page" div and I would like them horizontal "side by side" (preferably the second fieldset on the right, the first fieldset to the left with a shrinking gap spacing them) , does anyone know the "right" way to do this? i.e. so that they are not one above the other but side by side and work with resizing?
<fieldset data-role="controlgroup" data-type="horizontal" >
<button data-inline="true" data-icon="refresh" data-theme="d">save</button>
back
</fieldset>
<fieldset data-role="controlgroup" data-type="horizontal" >
<input type="checkbox" name="selectallbox" id="selectallbox" class="checkable selectall">
<label for="selectallbox">select all</label>
</fieldset
I have a hidden webview loading a html login form which contains a drop down menu from which the user can specify it´s type. I have a segmented control set up and want it to select from the html drop down menu, but can´t get it to work. The relevant code looks like this:
//The html code with the drop down menu.
<div class="login_formtable">
<label class="login_label">I am</label>
<div id="loginselect" style="clear:both:">
<select name="usertype" size="1" id="usertype" class="select1" >
<option value="0" selected="selected">Staff</option>
<option value="1" >Student</option>
<option value="2" >Parent</option>
</select>
You should not do this.
If you want to use check boxes, you need to create your own UI using UIButton or UIPickerView.
If you try this in UIWebView, you cannot fetch the selected values in UIWebView.
I guess this link might help you.
I'm trying to throw a list of radio buttons in a dialog for a user to select. How do I make the lists that wrap align? It would be nice to have them uniform or at least stretch out to the edge.
Any help would be greatly appreciated!
Right now I just use $("#mydiv").buttonset()
<div id="mydiv">
<div class="ui-widget-header" style="padding-top: 5px">
<input type="radio" name="slot" id="slot-1" value="1" /><label for="slot-1">7:10 AM - 7:50 AM</label>
...
</div>
</div>
Knowing the width of your dialog, you could easily apply a width to the buttons elements for them to fill the space:
.ui-buttonset .ui-button { width: <your size> }