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.
Related
HTML:
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label>
<input type="text" class="form-control" id="validationCustom03" value="Describe service you need" required>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
CSS
#validationCustom03{
height: 100px;
}
input[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
Hello guys, I am trying to stylize the value of form - text input, but the only one thing I can reach is red color. My purpose is to remove break line before and after the text, to make is from the very first line in the input, please check out the picture. Thank you for your time and wisdom !
I think you should use a <textarea> form attribute instead of an <input> element. Here's an example:
#validationCustom03{
height: 100px;
}
textarea[id=validationCustom03]{
display:inline;
padding-top: 0px;
margin-top: 0px;
color:red;
}
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationCustom03">Service</label><br>
<textarea rows="4" cols="50" name="comment" class="form-control" id="validationCustom03" form="usrform" value="Describe service you need" required>
Enter text here...</textarea>
<div class="invalid-feedback">
Please write here a needed service.
</div>
</div>
</div>
you don't have a break-line here. it is just because the height of the input field is much bigger than the size of the font.
I have the following form, I want to have 3 items in a row.
Since it is auto generated I cant really change to much the html.
I cant have dynamic span for each column.
With the limitations I have here, is it possible to break the code bellow so Ill have 3 fields in a row?
http://fiddle.jshell.net/52VtD/446/
<div class="row-fluid">
<input id="Id" name="Id" type="hidden">
<div class="span1">
<label>
Email Address
</label>
<input class="form-control" id="Email" name="Email" type="text">
</div>
<div class="span1">
<label>
Full Name
</label>
<input class="form-control" id="FullName" name="FullName" type="text">
</div>
<div class="span1">
<label>
Active?
</label>
<input class="form-control" id="IsActive" name="IsActive" type="text">
</div>
<div class="span1">
<label>
Password
</label>
<input class="form-control" id="Password" name="Password" type="password">
</div>
<input name="Avatar.Id" type="hidden">
<div class="span1">
<label>
Upload image
</label>
<input class="form-control" id="Avatar.FileContent" name="Avatar.FileContent" placeholder="Select an image" type="file">
</div>
</div>
Sometimes, it helps not over thinking Bootstrap. Also note, this is Bootstrap 3 I'm using.
If you're looking to have "three items" in a row, including the labels, that can be created with 6 columns. 3 per label and 3 per input.
http://fiddle.jshell.net/pLSD9/1/
In this case, you don't use any of the built in form layouts like .form-inline. You use the Bootstrap grid and place your elements in it accordingly. Since Bootstrap gives it's form input elements 100% width, they'll fill the grid space.
I used the "sm" size grid so when the form gets to what Bootstrap considers a "small" size, it will stack the elements. Since JSFiddle brings the page down into windows,you might have to adjust the window size to see the grid layout.
I hope that helps!
Cheers!
You're going to break Bootstrap a lot, but if you could give the container an id and style it this way:
#form-container {
width: 700px;
}
#form-container .row-fluid .span1 {
float: left;
margin-right: 10px;
}
To get this result: http://fiddle.jshell.net/52VtD/448/
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'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.
I'd like to have some "horizontally styled" fields inside a "vertically styled" form with Bootstrap.
How can I do that (if possible)?
You can leverage Bootstrap's existing classes (checkbox.inline)to get the effect you're looking for. The key to making it look right is to specify padding-left: 0px; on the labels:
<div class="control-group">
<div class="controls">
<label class="checkbox inline" style="padding-left: 0px;" for="inputColor">Favorite Color <input type="text" id="inputColor" class="span2" /></label>
<label class="checkbox inline" style="padding-left: 0px;" for="inputNColor">Next Color <input type="text" id="inputNColor" class="span2" /></label>
</div>
</div>
Please see http://jsfiddle.net/jhfrench/Hzucn/ for a working example.
I tried to create a new class for you (along the lines of .controls-row label.inline { padding-left: 0px;} so you wouldn't have to do styling on the element, but it caused more conflicts than I anticipated. So if you're going to use this solution pervasively, you might want to invest the time in untangling that...
You can use similar formatting to .form-horizontal implementation in bootstrap. (scroll sown to Horizontal Forms here: http://twitter.github.com/bootstrap/base-css.html#forms)
Wrap your labels and form elements in grouping divs (that's what .control-group does in Horizontal Form layout in bootstrap).
Float labels left to show them in horizontal alignment with the fields.
label.horizontal {
float: left;
width: 160px;
padding-top: 5px;
margin-right: 20px;
text-align: right;
}
In the above example, labels with class .horizontal will be "horizontally styled" and the rest "vertical" or default form layout.
there is a class ready to use on bootstrap!
check this example:
<div class="span6">
<form>
<div class="controls controls-row">
<input id="name" name="name" type="text" class="span3" placeholder="Name">
<input id="email" name="email" type="email" class="span3" placeholder="Email address">
</div>
<div class="controls">
<textarea id="message" name="message" class="span6" placeholder="Your Message" rows="5"></textarea>
</div>
<div class="controls">
<button id="contact-submit" type="submit" class="btn btn-primary input-medium pull-right">Send</button>
</div>
</form>
</div>