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().
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 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>
I am using jQuery Mobile. I am attempting to allow the user to change a slider value in two ways. A number, or a percentage. For example, let's say that the total of a metric is $224. So 50% is $112. Well, I want the user to be able to specify $100 manually, OR specify 50% manually.
With this said, I placed a numeric text box and a slider next to each other. The numeric text box appears larger and different from the slider's text box. One thing to note - I have removed the up/down buttons via CSS.
Try as I might, I cannot get these to display the same way. Does anyone know what classes are needed for this? Changes done on pageinit()?
To put elements side by side, use ui-grid layout. For two items, add class ui-grid-a to a div. Then wrap first with div with class ui-block-a and the other one class ui-block-b.
Demo
<form>
<div class="ui-grid-a">
<div class="ui-block-a">
<label for="numbers"></label>
<input type="number" name="numbers" id="number" />
</div>
<div class="ui-block-b">
<label for="slider-6" class="ui-hidden-accessible">Slider:</label>
<input type="range" name="slider-6" id="slider-6" min="0" max="100" value="50" />
</div>
</div>
Optional - Override width of child divs.
.ui-block-a { width: 30% !important; padding-right: 10px !important }
.ui-block-b { width: 70% !important }
For input, you need to adjust input's parent div's height by either jQuery or CSS.
Note: Slider has type=number attribute as well, therefore, you need to override the input box only which has class ui-input-text.
CSS
div.ui-input-text { height: 28px !important }
jQuery
$('[type=number]').closest('div.ui-input-text').css('height', '28px');
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> }