Using jquery mobile.
Try to make the disabled checkbox visible. height/width can be overridden.
<div class=" ui-checkbox ui-state-disabled">
<input type="checkbox" name="foo" checked="checked" disabled="disabled">
</div>
Why the position is !important, and it can not be overridden. As a result, it can not align well with neighboring elements in different situations.
.ui-checkbox input:disabled, .ui-radio input:disabled {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px,1px,1px,1px);
}
Thanks for advice.
To use jQM styling, put the checkbox within a LABEL (whether you have text or not). Then when the widget is enhanced, if it is disabled, the opacity is used to dim the checkbox.
<label>
<input type="checkbox" name="foo" checked="checked" disabled="disabled" /> Check me
</label>
<label>
<input type="checkbox" name="bar" checked="checked" disabled="disabled" />
</label>
jQM actually hides the INPUT element and styles the label to be the checkbox.
If on the other hand, you want jQM to leave the checkbox unstyled, add data-role="none":
<input type="checkbox" name="bar" checked="checked" disabled="disabled" data-role="none" />
Related
The other two answers on this question propose overriding
div.ui-input-text {}
However, I have multiple input fields on this page and also within my project. So those answers won't work as they would effect everything on my page or project.
How can I modify a single text input?
A class designation in the input tag doesn't work. If I encapsulate the input with a div tag it still doesn't work. I'm trying to put an icon at the end but it seems all Jquery mobile text input takes the entire screen.
<input class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
CSS, No Effect!
.address {
width: 200px !important;
}
Now, I could still switch to Bootstrap if that's the better way to go on this project. It seems to have .col-xs-* classes that solve this problem.
Thanks in advance.
Instead of directly setting the class on the input,jQM provides a data-attribute for inputs called data-wrapper-class (api doc: http://api.jquerymobile.com/textinput/#option-wrapperClass). This allows you to apply a class directly to the outermost wrapping DIV that jQM adds when enhancing the textbox.
<input data-wrapper-class="address" type="text" name="address" id="basic"
placeholder="Street Address, City, State" />
Working DEMO
It is maybe bit late to answer this, but maybe for others looking for the same thing (I was :-)
You can put your address in a div:
<div class="myContainer">
<label id="lbAddress">Provide the address</label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
Then select your container and just the input inside that container in the CSS:
.myContainer > .ui-input-text
{
width:200px;
}
demo: https://jsfiddle.net/petitbarzun/cfazq5k5/
Reading your comments on the answer from ezanker, if you want all the inputs to appear on one line, there needs to be a container with ui-field-contain like this (the label should be there too):
<div class="ui-field-contain">
<label id="lbAddress" style="display:none"></label>
<input class="address" type="text" name="address" id="address" />
<input class="address" type="text" name="Street" id="Street" />
<input class="address" type="text" name="City" id="City" />
<input type="button" value="FindMe" data-icon="eye" data-iconpos="notext">
</div>
<div><input class="other" type="text" name="other" id="other"/></div>
The CSS then looks like this:
.ui-field-contain > #lbAddress~[class*=ui-input-text]
{
width:219px;
}
demo http://jsfiddle.net/petitbarzun/cfazq5k5/1/
I am using JQM datebox but I cannot get it to show several date inputs in a single row. This is the closest I've got:
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<label for="fromDate">
From
</label>
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
<label for="toDate">
To
</label>
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</fieldset>
And it sets the width properly but keeps putting it into a new line:
Also, the date shown in the flipbox does not match the one actually selected (check the date on the title):
Plus the dialog is shown too much to the left and it gets cropped.
Any help please?
I have a solution that just uses DIVs and CSS outside of the jQM data-roles. Here is a DEMO
Basically, instead of fieldcontain and controlgroups, I have contained each label/date input pair in a DIV set to display inline instead of block. Then the label and input are each also in DIVs set to inline with min-widths. In this way:
if your screen is wide enough, everything is displayed in one line.
as your screen narrows, the second label/input pair rolls to the next
line
as your screen narrows even more the labels also stack on top of the
inputs.
In the fiddle, try dragging the splitter to the left of the results plain to see the form automatically configure itself to the available width.
So the HTML looks like this:
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="fromDate">From</label>
</div>
<div class="dispInline">
<input data-theme="c" name="fromDate" id="fromDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' />
</div>
</div >
<div class="dispInlineCont">
<div class="dispInlineLabel" >
<label for="toDate">To</label>
</div>
<div class="dispInline">
<input data-theme="c" name="toDate" id="toDate" type="text" data-role="datebox"
data-options='{"useNewStyle":true, "mode":"flipbox"}' readonly="readonly"/>
</div>
</div>
<!-- Clear floats for each new line -->
<div class="clearFloats"></div>
And the CSS looks like this:
.dispInline, .dispInlineLabel, .dispInlineCont{
display: inline-block;
border-bottom-width:0;
}
.dispInlineLabel{
min-width: 55px;
}
.dispInline{
min-width: 200px;
}
.clearFloats{
clear:both;
}
Of course you can mess with the min-widths to get the behavior you want. The ClearFloats allows you to add the next controls on the next line.
I'm trying to use the semantic UI checkbox in an MVC application, however, I've noticed that when using CheckBoxFor() it creates 2 inputs, one of which is hidden:
<div class="field">
<div class="ui checkbox">
<input data-val="true" id="OilStarvation" name="OilStarvation" type="checkbox" value="true">
<input name="OilStarvation" type="hidden" value="false">
<label for="OilStarvation">Oil Starvation</label>
</div>
</div>
Then I activate the checkbox like so:
$('.ui.checkbox').checkbox();
When I then click the checkbox, the "tick" animation doesnt show if the checkbox is ticked, although the value of true IS being set. Is there a way I can tell semantic UI checkbox method to target the non-hidden element?
You can set css to show the tick/checked effect.
.ui.checkbox input:checked ~ .box:after,
.ui.checkbox input:checked ~ label:after
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
HTML:
<input id="1" type="checkbox" checked="checked" />
<label for="1">Online</label>
jQuery:
$(function () {
$('input[type=checkbox]').button();
});
When rendered in the browser it is showing both a traditional checkbox and a button underneath. I can click on either one and they will toggle the checkbox. This is the HTML in the browser:
<input id="1" type="checkbox" checked="checked" class="ui-helper-hidden-accessible">
<label for="1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Online</span></label>
When I enter the same into jsfiddle it works perfectly, get just the toggle button. So I'm at a loss what is causing this?
Your jQuery selector is wrong. You need to add " to the type, like this:
$('input[type="checkbox"]').button();
I'm using rightToLeft language for my UI, so I need to have label of textfield on right side. I tried using div with float:right for label and div with float:left for textfield. but it still doesn't align correctly in my form.
This is code sample:
<s:form action="processRegister" cssClass="form">
<div style="float:right;text-align:right">
<s:text name="label12.msg"/>
</div>
<div style="float:left">
<s:textfield name="username" cssClass="textfield" />
</div>
<div style="float:right;text-align:right">
<s:text name="label13.msg"/>
</div>
<div style="float:left">
<s:password id="password1" name="password" cssClass="textfield"/>
</div>
</s:form>
and when I used table and tried to put textfield on one column and label on the other column, they didn't align on one line.
In what way is it not aligning properly? can show us some screenshot and example of codings?
U wanna check your magin and padding of each field that is not aligning properly?
Make the margin and padding to 0 first.
Actually another way is to use a table, if it applies to you.
Inside individual cell, just make sure the padding/ margin is 0.
Then using the cell's alignment property to adjust the align problem.
From what I see, using table for form to align is definitely cross browser
This jsfiddle does what you want. The key is in clearing your floats so that all the input/label rows end up on their own distinct lines. It's also a good idea when using floats to specify widths on your elements whenever possible. This will prevent accidental float drop.
Also, for usability, I've added a <label> element so screen readers will know which <input>'s your labels apply to.
HTML
<form>
<div>
<label for="username">Username</label>
<input type="text" id="username" name="username" size="20"/>
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" name="password" size="20"/>
</div>
</form>
CSS
div {
clear: both;
width: 300px;
}
div label {
float: right;
text-align: right;
}
div input {
float: left;
}