I'm taking my first steps in jQuery Mobile and I'm getting a bit disappointed with the lack of customization it provides...
As an example, I have a simple form and I'd like to customize the layout of the form components.
This is my code:
<form id="loginForm" action="#" method="post">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
<a id="info" href="#" data-role="button" data-icon="info" data-iconpos="notext">Info</a>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</form>
See the fiddle.
Concretely I'd like:
The rememberMe checkbox to be as wide as the text inside, and the info button to be inline with the checkbox.
The "group" containing the previous checkbox and button to be aligned to the right.
The submit button to be to the right as well.
Please provide an example of how such things can be achieved...
EDIT: I'd like something like this:
Customization you require will not come from jQM but from custom css.
Usually this could be easily done with jQuery Mobile grids but they are not that flexible. So you need a custom solution.
A div around every element is needed because jQM recreates every element with new style and unless we have a parent div everything will go to hell.
Working example: http://jsfiddle.net/Gajotres/8NB22/
HTML :
<form id="loginForm" action="..." method="post">
<div class="row">
<div class="inline-mid">
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext" class="middle-button">Info</a>
</div>
<div class="inline-left">
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe">Remember me in this computer</label>
</div>
</div>
<div class="row">
<div class="inline-left">
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</div>
</form>
CSS :
.row {
min-width: 400px;
width: 400px;
}
.inline-left, .inline-mid , .row {
position: relative;
float: right;
}
.inline-mid {
margin-left: 10px;
padding-top: 5px;
}
This can be achieved using ui-grid classes.
Working Demo
Markup
<form id="loginForm" action="..." method="post">
<div class=ui-grid-a>
<div class=ui-block-a>
<input id="rememberMe" name="rememberMe" type="checkbox"/>
<label for="rememberMe" data-inline="true">Remember me in this computer</label>
</div>
<div class=ui-block-b>
<a id="info" href="..." data-role="button" data-icon="info" data-iconpos="notext">Info</a>
</div>
</div>
<div class=ui-grid-solo>
<input id="submit" type="submit" value="log in" data-inline="true"/>
</div>
</form>
Override CSS
.ui-block-a { width: 95% !important; text-align: right !important; }
.ui-block-b { width: 5% !important; padding-top: 5px !important; }
.ui-grid-solo { text-align: right !important; }
Layout should never be primarily the responsibility of Javascript code, as such you shouldn't blame jQuery Mobile for this.
Customization for different screen sizes should be done with CSS Media Queries instead, click the link for more examples than you'll ever need.
Related
My form on this page http://fashiondevelopmentgroup.com/
In the sidebar ENJOY OUR FREE NEWSLETTER is not looking right in Firefox. Everywhere else it is fine. Is there a way to code CSS specific to Firefox to fix this?
I have used the -moz-margin-start to set the horizontal css, but is there a specific vertical code for Firefox?
Thanks,
Brian
here is my code:
input, textarea, select {
vertical-align: middle;
color: #889291;
margin-left: 20px;
margin-top: 50px;
}
.button {
display: inline-block;
margin-left: 200px;
margin-top: -55px;
color: #fff;
background-color: #889291;
-moz-margin-start:67%;
-webkit-margin-start:70%;
}
HTML:
<div id="optin">
<form action="http://fashiondevelopmentgroup.us2.list-manage1.com/subscribe/post? u=1eed93a2e1bb3dc00d80e42af&id=25ea8ae595"; method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" style="background- image:url('HERE IS WHERE YOU WILL PUT THE LINK TO YOUR IMAGE THAT YOU UPLOADED');background-repeat: no-repeat; width:300px; height:151px;" novalidate>
<input type="email" size="30" value="Email Address" name="EMAIL" class="required email" id="mce-EMAIL" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;">
<div id="mce-responses" class="clear">
<div class="response" id="mce-error-response" style="display:none"></div>
<div class="response" id="mce-success-response" style="display:none"></div>
</div>
<div class="clear">
<input type="submit" value="SIGN UP" name="subscribe" id="mc-embedded-subscribe" class="button">
</div>
</form>
</div>
in your my_style.css line 8 you have a 50px margin-top for all input, textarea, and select elements. get rid of that so you can style individually for your situation.
then add position:relative you the parent div of the submit button. then add position:absolute; top:0;right:0; to your .button class.. this will align the button properly in firefox as well.
You will no longer need those margins in the .button class either. use the value in top: and right: to move the button exactly where you want it
This is my code where I am trying to put 3 Buttons in parallel.
<!DOCTYPE html>
<html>
<head>
<div class="aParent">
<div id="left_side">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<label for="q">Make A new folder:</label><br>
<input id="q" name="q" type="text" /><br>
<input name="commit" type="submit" value="Submit" />
</form></div>
<div id="centre">
<input id="btn" type="button" value="Save" action="update" alignment="center" />
</div>
<div id="right_side">
<form accept-charset="UTF-8" action="/target" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓" /></div>
<input name="commit" type="submit" value="Customize Weight" />
</form></div>
</div>
<style type="text/css">
#left_side {
float: left;
}
#center_s {
margin:50px 50px;
width: 65px;
}
#right_side {
float: right;
}
</style>
Now if I change margin values save button position is not changing . Any guesses for changes to be made to put 3 buttons in parallel.
Add this:
#centre{ float:left;}
If you're looking to centre this div, you will need to add an appropriate margin-left value, so long as your parent container is of fixed width.
add display:inline-block to all the three container div and remove the float property.
#left_side {
display: inline-block;
}
#center_s {
margin: 50px 50px;
width: 65px;
display: inline-block;
}
#right_side {
background: Green;
display: inline-block;
}
Js Fiddle Example
You have some complex html structure to do this simple thing as you can achieve without using the css and just you need to put simple markup like this
<div class="aParent">
<form accept-charset="UTF-8" action="/new" data-remote="true" method="get">
<div id="label">
<label for="q">Make A new folder:</label>
</div>
<div id="input-control">
<input id="q" name="q" type="text" />
</div>
<div id="button-control">
<input name="commit" type="submit" value="Submit" />
<input id="btn" type="button" value="Save" action="update" alignment="center" />
<input name="commit" type="submit" value="Customize Weight" />
</div>
</form>
</div>
Js Fiddle - Simple design
Can you just put all 3 divs {float: left} and then add a small margin to them to separate them?
You have two options for this:
1.You can float the elements you want to position. Add a line in the css code, for example
#center_s {
margin: 50px 50px;
width: 65px;
float: left;
}
This will change the element model from box to inline.
Using float will stack the elements next to one another.
You can read this great article about float property - http://css-tricks.com/all-about-floats/
You can change the display property to inline-block - add a new css property - display: inline block; to all three elements.
This will change the div from block model to inline model!
Another great article about display property - http://www.impressivewebs.com/difference-block-inline-css/
Hope this answered your question.
From what I can tell, my form field is completely standard. The page is at http://worldcastmovie.com/login.php
The email field on the right is two lines tall, and input is centered. My code doesn't seem to reflect this, so is there another place within my site I should be looking?
Thanks in advance!
Ryan
Here's the code in question:
<div>
<label>Name:</label>
<input type='text' name='name'/>
</div>
<div>
<label>Email:</label>
<input type='text' name='email' id = 'email'/>
<div class='error'>
Please enter your email.
</div>
</div>
<div>
<label>City:</label>
<input type='text' name='city'/>
</div>
<div style='position:relative'>
<label>Desired Username:</label>
<input type='text' name='username' id='username'/>
<div class='error'>
Please choose different username.
</div>
</div>
<div>
<label>Desired Password:</label>
<input class='input' type='password' name='password' id='password'/>
<div class='error'>
Please specify different password.
</div>
</div>
<div>
<label>Confirm Password:</label>
<input class='input' type='password' name='cpassword' id='cpassword'/>
<div class='error'>
Please confirm your password.
</div>
</div>
<!--<div>
<label>Video:</label>
<input type='file' name='video' />
</div>
<div>
<input type='checkbox' name='terms' style='margin-left:12px;margin-top:20px;' id='terms' /><span style='margin-left:10px;'>I have read and agree to the <a href='terms.php'>terms and conditions</a></span>
<div class='error'>
You have to read and agree to the terms and conditions.
</div>
</div>-->
<input type='image' src='/images/register.png' id='submit'/>
</form>
It's matching the rule on #email on line 62 of style.css:
#email {
text-align: center;
color: black;
padding-top: 30px;
}
In other words: the element ID email is not used uniquely as it should, this rule is probably meant for some other element requiring the padding-top and the horizontal centering.
A simple right click and 'inspect element' would've shown you this as well.
you should make the email field left aligned currently it is centered and make the padding top to 0
#email {
text-align: left;
color: black;
padding-top: 0px;
}
You are using padding-top to make the email field look larger, I would play around with height not padding if you want it to the text to be vertical aligned to the middle and not padding-top..
#email {
text-align: left;
color: black;
height: 100px;
}
I've got a set of checkboxes I would like to position using CSS. This is how they are rendered:
<div id="edit-event-type" class="form-checkboxes">
<div class="form-item form-type-checkbox form-item-event-type-pubQuiz">
<input type="checkbox" id="edit-event-type-pubquiz" name="event_type[pubQuiz]" value="pubQuiz" class="form-checkbox">
<label class="option" for="edit-event-type-pubquiz">Pub Quiz </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-dancing">
<input type="checkbox" id="edit-event-type-dancing" name="event_type[dancing]" value="dancing" class="form-checkbox">
<label class="option" for="edit-event-type-dancing">Dancing </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-foodDeals">
<input type="checkbox" id="edit-event-type-fooddeals" name="event_type[foodDeals]" value="foodDeals" class="form-checkbox">
<label class="option" for="edit-event-type-fooddeals">Food Deals </label>
</div>
<div class="form-item form-type-checkbox form-item-event-type-liveMusic">
<input type="checkbox" id="edit-event-type-livemusic" name="event_type[liveMusic]" value="liveMusic" class="form-checkbox">
<label class="option" for="edit-event-type-livemusic">Live Music </label>
</div>
</div>
//Other form elements come after.
At the moment, they are getting displayed stacked one on top of another and I would like them to be displayed in stackes of, say 4. So I would like them to be displayed like this:
http://i.imgur.com/SvIQv.png
However, I have limited control over the markup so ideally I would like it all to be done in CSS. I have tried float:left and assigning them a right margin, but when I do that, although they are in stacks of 4, there is an issue where they are not aligned properly. Has anyone had an issue like this before?
Thanks,
give all container divs this class "form-type-checkbox" (also the first - its missing it). also add a container to all this.
css:
.container-of-all {
overflow: auto;
background: #000000;
}
.form-type-checkbox {
float: left;
width: 100px;
margin: 5px 10px 5px 10px;
}
maybe you need to reposition the labels or checkboxes itself a bit to get them on a pretty baseline.
I'm having some trouble centering my Bootstrap login form.
Centering
I've tried many different ways of centering the form. The whole div is centered with the col-md-offset class, but I don't understand how to make the content (the form inputs) center in the div itself. For the text I know you can use text align, and for content I usually use margin: 0, auto;, but that isn't working for the form.
I also want to center it vertically, if possible, but given what I have researched on the internet, it seems very difficult to do so, and there is nothing I've found in the bootstrap references explaining how to do so.
Another random question, is why on the form are the left corners right angles whereas the right corners are rounded? Even when I change the corner-radius it only effects the right corners.
CODE:
http://jsbin.com/gamufagehu/edit?html
If you want to place the form in the center of the screen then use position: absolute and don't use the grid. You can use media queries to control other factors depending on what you ultimately want on smaller or larger viewports.
Also, you're use of input-group (Docs) doesn't really make sense and is the reason you're having adverse styling on your inputs (one being shorter than the other and the border-radius). Use form-group instead.
.myForm {
min-width: 500px;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5rem
}
#media (max-width: 500px) {
.myForm {
min-width: 90%;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" id="logoText">Test</a>
</div>
<div class="collapse navbar-collapse">
<form class="navbar-form navbar-right" method="post">
<div class="form-group">
<input type="email" class="form-control" name="loginemail" id="loginemail" placeholder="email" />
</div>
<div class="form-group">
<input type="password" class="form-control" name="loginpassword" placeholder="password" />
</div>
<input type="submit" name="submit" class="btn btn-default" value="Log In" />
</form>
</div>
</div>
</div>
<div class="container">
<form class="myForm" method="post">
<div class="form-group">
<label for="email">Email</label>
<input class="form-control input-lg" type="email" name="email" id="email" placeholder="email" />
</div>
<div class="form-group">
<label for="password">Password</label>
<input class="form-control input-lg" type="password" name="password" placeholder="password" />
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-success btn-lg" value="Sign Up" />
</div>
</form>
</div>
you can use
.input-group{
margin:0px auto;
}
here is a bin working fine with same rules.
the reason you input box has right-top and right-bottom radius but not the left-top and left-right is that it is excepting something on the left of it, like some button or something, let me throw a link to make it understand better. go to amount field on this link. we can always overwrite the bootstrap rules but it is not recommended when there is a problem with use of classes, good luck.
well well well, sorry for frequent edits, but check out the use of .input-group class, i guess you messed it up there
I would recommend using column layout in a proper way.
You could wrap your login elements in divs that are based on column layout grid with length 4 and offset equal 4 too. You would get elements centered on the page and fully responsible. Then you could style elements inside them as in normal form groups.
I'd also recommend not using input groups as they are designed to group inputs as the name suggests and this is the reason you have square corners on left side of the inputs (for other inputs on left to seamlessly integrate into one input group) :)
Just put every form row inside that structure:
<div class="row">
<div class="col-sm-4 col-sm-offset-4">
<div class="input-group">(...)</div>
</div>
</div>
Look here:
JSBin example
Good note for future use of any library, including bootstrap - it is a good way to read all examples of use of particular library and its documentation, because otherwise you could end up overwriting functionalities that are already provided within it :)
You can use this:
.input-group {
position: relative;
border-collapse: separate;
display: block;
}