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.
Related
I want to handle slider with hidden check box for scripts using watir.
Can any one help me to resolve this issue?
This would be more like visibility: hidden
Try setting the checkbox's opacity to 0. If you want the checkbox to be out of flow try position:absolute and offset the checkbox by a large number.
HTML
<label class="checkbox"><input type="checkbox" value="valueofcheckbox" checked="checked" style="opacity:0; position:absolute; left:9999px;">Option Text</label>
How many checkboxes do you have at this page? If there is only one then this might work:
browser.checkbox(attribute: attribute-value).when_present.set
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 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 need to group checkbox together but in 2 columns. In the image below ive created 2 different fieldsets. I know this isnt very semantic but it displays the layout I want to achieve.
Is there a standard jQuery Mobile way to do this?
I want the checkboxes to look like they belong in one section. I could remove the rounded corder of green top left, pink bottom left and blue bottom right. Do I need to use standard CSS overrides for this or is there a more elegant way? Thanks
I think you want to look at Layout Grids: http://jquerymobile.com/test/docs/content/content-grids.html
<div class="ui-grid-a">
<div class="ui-block-a">
<label><input type="checkbox" name="checkbox-1" /> Any</label>
<label><input type="checkbox" name="checkbox-1" /> Red </label>
</div>
<div class="ui-block-b">
<label><input type="checkbox" name="checkbox-1" /> Green </label>
<label><input type="checkbox" name="checkbox-1" /> Black </label>
</div>
</div><!-- /grid-a -->
UPDATE
Based on your comment, no you cannot have two separate columns grouped into one fieldset.
The data-role="controlgroup" on a fieldset removes the margins and padding to give the grouped effect, but what you end up with is something like this: http://jsfiddle.net/shanabus/qNYPh/1/
However, if you are ok with one parent fieldset and two nested, grouped, fieldsets... then you can end up with a solution like this: http://jsfiddle.net/shanabus/hcyfK/1/
shanabus gave a good answer with his nested grouped solution:
http://jsfiddle.net/shanabus/hcyfK/1/
You can take that one step further by setting/overriding the appropriate css 'border radius' values to zero for any corner you need to in order to get rid of the touching rounded corners and achieve a more consistent appearance.
As per the example:
<label for="radio-choice-1" style="border-top-right-radius: 0">Cat</label>
<label for="radio-choice-2" style="border-bottom-right-radius: 0">Dog</label>
<label for="radio-choice-3" style="border-top-left-radius: 0">Hamster</label>
<label for="radio-choice-4" style="border-bottom-left-radius: 0">Lizard</label>
Yes, I am a bad person because I didn't separate html & css but it's an example. :-)
I need to modify the radio buttons. how can i show text left side and icon right side for Arabic text?
Just render a radiobutton like you want it:
<input type="radio" name="something"/>
<label>Radio Right</label>
or
<label>Radio Left</label>
<input type="radio" name="something2"/>