I am currently struggeling making from elements if twitter bootsrap 3.0 display in one without breaks in it. What happens when I make a wrapper float is that the input elements cut off.
Look at this jsfiddle please
<form id="commentform" method="post" action="http://devsite.localhost/wp-comments-post.php" name="commentform">
<span class="comment-form-author"><label class="obscure" for="author">Name</label><span class="input-group span2"><input type="text" placeholder="Name *" aria-required="true" tabindex="1" size="30" value="" name="author" id="author" /></span></span> <span class="comment-form-email"><label class="obscure" for="author">Email</label><span class="input-group span3"><input type="text" placeholder="Email *" aria-required="true" tabindex="2" size="30" value="" name="email" id="email" /></span></span> <span class="comment-form-url"><label class="obscure" for="url">Website</label><span class="input-group span3"><input type="text" placeholder="Website" tabindex="3" size="30" value="" name="url" class="input-medium" id="url" /></span></span>
<div class="comment-form-comment">
<textarea placeholder="Comment" aria-required="true" tabindex="4" rows="8" cols="45" name="comment" id="comment">
</textarea>
</div>
<!-- #form-section-comment .form-section -->
<p class="form-submit"><input type="submit" value="Post Comment" id="submit" name="submit" /> <input type="hidden" id="comment_post_ID" value="14" name="comment_post_ID" /> <input type="hidden" value="0" id="comment_parent" name="comment_parent" /></p>
</form>
css
#import url('http://my-hardware.net/bs/bootstrap.css');
/* hiding content but not from screen readers, used in comments form */
.obscure {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
.comment-form-email{
display: block;
float: left;
}
For showing purposes I just added my attempt to one of the 3 imputs I want to line up.
Does anyone has a idea how to make this work?
I think this should work...
<div class="controls-row">
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">X</span>
<input type="text">
</div>
</div>
<div class="control-group col col-lg-2">
<div class="input-group">
<span class="input-group-addon">Y</span>
<input type="text">
</div>
</div>
</div>
Related
<div class="modal" id="myModal" style="width:50%; top:15%;" role="dialog" >
<div class="">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-bodys" style="padding:20px 8px 20px 20px">
<a style="background: #EAEAEA;" class="wt-closebtn close closeButtonJoinNOw" aria-label="Close"><i class="fa fa-times" data-dismiss="modal"></i></a>
<form id="wt-single-joinnow-form" class="row">
<h2 class="col-sm-12"> Join Us Now </h2>
<div class="form-group col-sm-6" >
<label for="usrname"> First Name</label>
<input type="text" class="form-control" name="first_name" id="first_name" placeholder="Enter your first name">
</div>
<div class="form-group col-sm-6">
<label for="usrname"> Last Name</label>
<input type="text" class="form-control" name="last_name" id="last_name" placeholder="Enter your last name">
</div>
<div class="form-group col-sm-12" >
<label for="usrname"> Email Address</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Enter your email">
</div>
<div class="form-group col-sm-12">
<label for="psw"> Password</label>
<input type="password" class="form-control" minlength="8" maxlength="16" id="password" name="password" placeholder="Enter your password">
<span id="password_strength"></span>
</div>
<div class="form-group col-sm-12">
<label for="psw"> Re-type Password</label>
<input type="password" class="form-control" minlength="8" maxlength="16" id="pass2" placeholder="Re-type your password" onkeyup="checkPass(); return false;">
<span id="confirmMessage" class="confirmMessage"></span>
</div>
<div class="formRadio123" id="customrediobtnmsgid">
<label>I want to start as:</label>
</div>
<div class="formRadio" id="customrediobtnid">
<input checked="checked" type="radio" class="" id="userTyp" name="user_type" value="freelancer">
<label for="Freelancer">Freelancer</label>
<input type="radio" id="userType" name="user_type" value="Client">
<label for="Client">Client</label>
<!-- <input style="visiblity:hidden !important; display: none;" type="radio" class="intersmodalclassclick" id="userType" name="user_type" value="Intern">
<label for="Intern">Intern</label> -->
</div>
<div class="problemSignUpError" id="problemSignUpError"></div>
<button class="btn btn-success btn-block" id="myBtn1" aria-hidden="true"> Join Now</button>
</form>
</div>
</div>
</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2#4.1.0-beta.1/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
$('.js-example-basic-multiple').select2();
});
</script>
I want to make this form responsive it is responsive for some sites but not responsive for the other so need to make it responsive . if anyone can guide me what to change in this code to make it responsive .I can share the css code for it as well as well as the form but I need to make it responsive on all mobiles devices . it works well on some but not on all .
Not responsive
Responsive
You can use #media rule and different css for different device
#media (min-width: 576px) {
//your css
}
You can change min and max-width according to ur device
you can use this css property to specify the width to your form. as soon the width of device will go down from 570(which is most of the cell phones) it will change
#media only screen and (max-width: 570px) {
/*
write the width and height of your form by using form property or class containing
the form
*/
}
I have just started to learn how to code and I was trying to select the button class to change the color when you hover over it. I managed to make it work by selecting this in css:
.button[type="submit"]:hover {
background-color: grey;
}
But I am wondering why this doesn't work instead:
.button:hover {
background-color: grey;
}
here is my html code:
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
It works perfectly, You probably faced not closed div's mistake's or something like this...
take a screenshot if you're sure that everything is alright with your code's.
this helps you to find mistaked like i said:
http://help.simplytestable.com/errors/html-validation/end-tag-for-element-x-which-is-not-open/end-tag-for-element-div-which-is-not-open/
.button:hover {
background-color: grey;
}
<form class="my-form">
<div class="form-group">
<label> Name: </label>
<input type="text" name= "name">
</div>
<div class="form-group">
<label> Email: </label>
<input type="text" name= "email">
</div>
<div class="form-group">
<label> Message: </label>
<textarea name= "message"></textarea>
</div>
<input class="button" type="submit" value="submit" name="">
</form>
I am trying to use sr-only class from bootstrap in order to make an inline form.
It should be something like this:
Title Cost
________________ __________ ______ days at $ ______ X (remove button)
I have already searched in lots of places but couldn't find a solution for this.
<form>
<div class="form-group col-sm-5">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group col-sm-2">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
</div>
<div class="form-group col-sm-2">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
</div>
</form>
Example
The class .sr-only has position:absolute style. But you can define you own class. Using margin-top or height. See this example i've made for you, so you can have an idea (See the snippet in fullpage option):
.form-group > .sr-only.control-label {
display: block;
position: relative;
height: 27px;
}
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<form>
<div class="form-group col-sm-5">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group col-sm-2">
<label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
<div class="input-group">
<input type="email" value='' class="form-control" id="name" placeholder="Ime" >
<div class="input-group-addon">days</div>
</div>
</div>
<div class="form-group col-sm-2">
<label class="sr-only control-label" for="exampleInputEmail3">&bnsp;</label>
<div class="input-group">
<input type="email" value='' class="form-control" id="name" placeholder="Ime" >
<div class="input-group-addon">days</div>
</div>
</div>
</form>
Use the following CSS. I added a class to the form in order to differentiate it from regular forms and removed the col classes from the groups, assuming they float the columns.
.inline-form .form-group {
display: inline-block;
vertical-align: bottom;
}
.inline-form label {
display: block;
}
.inline-form input {
border: none;
border-bottom: solid 1px;
}
<form class="inline-form">
<div class="form-group">
<label for="name" class="control-label">Title</label>
<input type="email" value='' class="form-control" id="name" placeholder="Title" />
</div>
<div class="form-group">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> days
</div>
<div class="form-group">
<input type="email" value='' class="form-control form-custom" id="name" placeholder="Ime" /> /day
</div>
</form>
I came across an interesting issue when trying to use html5's form size/maxlength and bootstrap.
The size is overridden by boostrap's .form-control class, but removing it causes the input to lose its styling.
Code pen : http://codepen.io/rkhayat/pen/JoeBqx
Thanks
<div class="container">
<div class="form-group">
<p>Phone</p><input class="form-control" id="inputPhone" maxlength=
"3" name="phone" required="required" size="3" title="" type="tel"
value="">
</div>
</div><!--with form-control-->
<div class="container">
<p>Notice that removing form-control loses ALL styling, but keeps the
size from html size input</p>
</div>
<div class="container">
<div class="form-group">
<p>Phone</p><input id="inputPhone" maxlength="3" name="phone"
required="required" size="3" title="" type="tel" value="">
</div>
</div><!--without form-control-->
Edit: Researching I have found this http://getbootstrap.com/css/#column-sizing
Implemented bootstrap's recommended fix, feels like a hack.
<div class="col-xs-4">
<div class="form-group">
<p>Phone</p>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-3">
<input type="tel" name="phone" class="form-control" value="" size="3" maxlength="3" required="required" title="">
</div>
<div class="col-xs-4">
<input type="tel" name="phone" class="form-control" value="" size="4" maxlength="4" required="required" title="">
</div>
</div>
</div>
I use am using cols to size width of lots of form elements (particularly whole form-groups). I just call them class="skinny" and then add:
.skinny{
padding-left:0;
}
Works fine for me so far. have not tried for maxlength but this solve my major layout headache!
Update This question has been viewed a lot, here's a blog post I wrote about it!
http://blog.dnwebdev.com/index.php/2015/07/28/my-bootstrap-toolbelt-phone-number-input/
Fixed it with the following if anyone is interested. Thank you #web2tips for your input. (Refer to question for html)
.phone-number .col-xs-3::after{
content: "-";
position:absolute;
right: 5px;
color: black;
border: 0px solid;
top: 5px;
}
.phone-number .col-xs-4{
width:25%;
}
.phone-number .col-xs-3, .phone-number .col-xs-4{
padding-left:0;
}
It's a shame that bootstrap's .form-control has width built in though.
I am little bit confused how to use Bootstrap CSS. I have two textboxes, a search button and image side to it. For fullscreen all elements should be in a row.
resizing screen, All elements should be one after another.
<div class="form-group" style="vertical-align: top; margin-right: 20px">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="vertical-align: top; margin-right: 20px">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
Please help....
<form class="form-inline">
<div class="form-group">
<label for="name">Name:</</label>
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
<div class="form-group">
<label for="city">City:</</</label>
<input type="text" class="form-control" id="city" placeholder="City">
</div>
<button type="submit" class="btn btn-warning">Search</button>
<img class="img-responsive" src="xx.jpg" />
</form>
You could add in display:inline-block on both those form-group div's
<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="vertical-align: top; margin-right: 20px; display:inline-block;">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
There is an image responsive class:
you can try adding:
<img class="img-responsive" src="xx.jpg" />
Try adding this to your code display: inline i.e, Replace your top line with this .
<div class="form-group" style="vertical-align: top; margin-right: 20px; display: inline">
You need to use display: inline-block; property.
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
<label for="name" style="color: #eea236">
name:</label>
<input type="text" class="form-control" placeholder="name" name="name" />
</div>
<div class="form-group" style="display:inline-block; vertical-align: top; margin-right: 20px;">
<label for="organization" style="color: #eea236">
City:</label>
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<button class="btn btn-warning" type="submit" style="vertical-align: top; margin-right: 20px">
Search</button>
<img src="xx.jpg" />
You don't have to add any inline css. There is a built-in feature in bootstrap that would position the text boxes, buttons, etc. side by side in one row.
Your form should be wrapped in a <form> tag.
<form class="form-inline" role="form">
*Your form groups here.*
</form>
That should make your form groups display inline, depending on the width of your browser. It should also be responsive as well.
<div class="form-group">
<label class="col-xs-2 control-label" style="color:eea236">name:/label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="name" name="name"/>
</div>
<label for="organization" style="color: #eea236">City:</label>
<div class="col-xs-3">
<input type="text" class="form-control" placeholder="organization" name="organization" />
</div>
<div class="col-xs-3">
<button class="btn btn-warning" type="submit">Search</button>
</div> <img src="xx.jpg" />
</div>