I am doing jQuery Mobile, how to make the checkbox for "stay signed in" is same line with button login.
please refer my jsfiddle.net/mapsv3/sZdCu/
My goal is same interface with Google signin box like
Thank you for your help!
Using the grid/block classes from jquery mobile will allow you to inline your elements simply.
<div class="ui-grid-a">
<div class="ui-block-a">
<a data-theme="d" id="loginButton" data-role="button" data-inline="true" data-mini="true" value="Login" href="booking.html" rel="external" >Login</a>
</div>
<div class="ui-block-b">
<input type="checkbox" name="checkbox-1" id="checkbox-1" data-mini="true">
<label for="checkbox-1">Stay Signed in</label>
</div>
</div>
You could also add
data-role="none" this will remove the styling on the checkbox. I had to build something similar and it was quite hard.
Related
we're using this lib : https://github.com/angular/flex-layout
so far, we have below code to achive the fxlayout, but it did not work in mobile device.
<div fxLayout="column" id="width">
<div class="table-cell" fxLayout="row">
<div fxLayout="column" class="columnlabel">
<label class="f_label margintop">width </label>
</div>
<div fxLayout="column leftpadding">
<input type="number" matInput
style="font-weight: bold;background: white;margin-top: 2px;" name="width">
</div>
</div>
</div>
what i am looking for is,
when it is mobile device want input control as underneath to label
when it is large device want textbox on right side
but in some case want input control on right side in mobile also, for example, tongle switch control.
please click on below link for sample representation, and can you please guide me what i am missing ?
sample
provided sample work on stack blitz as requested in comment. Thanks
https://flex-layout-angular-material-wqeqvc.stackblitz.io/
https://stackblitz.com/edit/flex-layout-angular-material-wqeqvc?file=app/app.component.html
What you want to achieve is probably something like that with their responsive API:
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Sports </label>
<input type="number" matInput>
</div>
<div fxLayout="column" fxLayout.gt-xs="row">
<label class="f_label margintop">Country </label>
<input type="number" matInput>
</div>
By default with fxLayout, it will be in ROW and when the screen is bigger than xs, then it's in column with fxLayout.gt-xs
i'm trying to force bootstrap to vertical align this col in desktop view. because it's overlaping otherwise
the mess now :
enter image description here
so the problem fix it self if i resize the windows until it reach the mobile view (it will automaticly vertical align the div.) but i want it to be like that in any windows size.
what i trying to :
enter image description here
here is the catch. i can only acsess the css on that particular div.
because it's dynamically generated. and i cant change the html part.
here is what the html looks like :
<ul class="subquestions-list questions-list checkbox-list list-unstyled">
<div class="row">
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ001" class="question-item answer-item checkbox-item">
<div class="checkbox">
<label for="answer736732X11537X92547SQ001" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ001" id="answer736732X11537X92547SQ001" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ001" id="java736732X11537X92547SQ001" value="">Grundlagen der Informatik</label>
</div>
</li>
</div>
<div class="col-md-1">
<li id="javatbd736732X11537X92547SQ002" class="question-item answer-item checkbox-item">
<div class="checkbox"><label for="answer736732X11537X92547SQ002" class="answertext"><input class="checkbox" type="checkbox" name="736732X11537X92547SQ002" id="answer736732X11537X92547SQ002" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)"><input type="hidden" name="java736732X11537X92547SQ002" id="java736732X11537X92547SQ002" value="">Theoretische Informatik</label></div>
</li>
</div>
</div>
</ul>
i can also acsess it with javascript using dom manipulation. but i dont think it helps that much.
please help me!
thanks!
I'm trying to add a checkbox into my bootstrap modal. But it doesn't appear on my page.
<div class="form-group">
<div class="checkbox">
<label>
<input type="checkbox"/> Check me out
</label>
</div>
</div>
The same code works perfect in jsfiddle.
Did you look with the Inspect element / Developer Tools over the modal of your browser?
Perhaps another CSS style is hiding your checkbox.
You don't need to put '/' after "checkbox".
It should be:
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
If you can provide the full code of modal. That will be easier for me to check where is the mistake.
I have some forms which mostly consist of input controls, but there are times when the horizontal form has a variant like the following:
<div class="form-group">
<span class="col-md-3 control-label">Features</span>
<div class="col-md-9">
<span>This is not available.</span>
</div>
</div>
Or sometimes I have multiple controls:
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
The label content doesn't quite line up at the same level as the control-label. I've tried to mimic the css class for form-control to get span content to line up, but it never quite worked out so well in my scenarios. Any recommendations on getting the content to line up?
If you just want to print a static text you could use a static form control (http://getbootstrap.com/css/#forms-controls-static).
If you want to use multiple checkboxes and radio buttons, you can also use what bootstrap provoides. See http://getbootstrap.com/css/#forms-controls.
Would you like to have something like this? http://www.bootply.com/ztbj1dCJrP
Its Simple add class to the div (here my-label)
<span class="col-md-3 control-label">Payment</span>
<div class="col-md-9 my-label">
<input value="2" name="CustomerPaymentOption" type="radio">
<span>Credit Card</span>
</div>
and css
.my-label{
display:inline-block;
}
fiddle http://jsfiddle.net/harshdand/a4n4nc1r/
for multiple http://jsfiddle.net/harshdand/a4n4nc1r/2/
I want to reduce the size of the font in my radio buttons as they are taking up too much space on mobile app. I tried to do inline styling and it did not work. I'm using jquery mobile 1.3 and when I was using jquery mobile 1.2, I had no problem changing font-size. Any help would be appreciated.
<div data-type="horizontal">
<fieldset class="ui-grid-a">
<legend>I am a </legend>
<div class="ui-block-a">
<input type="radio" name="rad-User-Type-1" id="rad-User-Type-1" value="driver" checked="checked" data-theme="c" />
<label for="rad-User-Type-1"style="font-size:12px" >Driver</label>
</div>
<div class="ui-block-b">
<input type="radio" name="rad-User-Type-1" id="rad-User-Type-2" value="passenger" data-theme="c"/>
<label for="rad-User-Type-2" style="font-size:12px">Passenger</label>
</div>
</fieldset>
</div>
You can inspect styles with Firebug (http://getfirebug.com/) and see/edit styles in real time to find the solution.
Try changing:
<label for="rad-User-Type-1"style="font-size:12px" >Driver</label>
To:
<label for="rad-User-Type-1"style="font-size:12px !important" >Driver</label>
And let us know?
.ui-radio-on .ui-btn-text, .ui-radio-off .ui-btn-text{
font-size:13px;
}