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.
Related
I'm using the following markup with Bootstrap:
<div class="row">
<label class="col-md-4">Date of Completion of Checklist</label>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control datepicker">
<span class="input-group-addon glyphicon glyphicon-calendar"></span>
</div>
</div>
</div>
I have some of my own CSS in a separate file, including:
.form-control {
border-color: #000;
border-radius: 0;
box-shadow: none;
}
.form-control:focus {
border-color: #009966;
}
label {
font-weight: bold;
margin-top: 8px;
}
.input-group-addon {
background: #fff;
border-color: #000;
}
However, even when I remove my whole custom stylesheet, I am still presented with this vertical alignment issue you can see below:
It looks like it's 1 pixel off what it should be. I've tried setting the positioning to relative and set bottom: 1px however it doesn't appear to budge.
If I remove the vertical-align property it completely messes up the look of it.
Does anyone have an idea what could be causing the problem?
.glyphicon {
top: 1px;
}
change this to top:0px; or add style="top:0px;" top your span
Changing your html to this fixes it:
<div class="row">
<label class="col-md-4">Date of Completion of Checklist</label>
<div class="col-md-4">
<div class="input-group">
<input type="text" class="form-control datepicker"/>
<span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span>
</div>
</div>
</div>
i have moved the glyphicon glyphicon-calendar class to an <i> inside your span, which now aligns all correctly.
Try some thing like this input-group-addon and place span above input
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="fa fa-calendar"></i></span>
<input type="text" class="form-control datepicker" aria-describedby="basic-addon1">
</div>
http://getbootstrap.com/components/#input-groups
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
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'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>
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.