size of the select field is affecting by a bootstrap file as shown in the screenshot and i'm unable to find out how to solve this problem.
<form>
<div class="form-group">
<label for="name" class="labstyle">Enter Your Name</label>
<input type="text" class="form-control" name="name" size="20"
maxlength="40" placeholder="Enter You Name" required autofocus>
</div>
<div class="form-group">
<label for="sell" class="labstyle">Chose Your Wish:</label>
<select class="form-control" id="sell">
<option value="0" hidden="hidden" disabled="" selected="">Chose Your
Wish</option>
<option value="morning">Good Morning</option>
<option value="night">Good Night</option>
</select>
</div>
<div class="form-group">
<label for="message" class="labstyle">Message</label>
<textarea class="form-control" name="message" rows="3" cols="40"
placeholder="Optional" maxlength="92"></textarea>
</div>
<button type="submit" class="btn" id="btncustom">Create</button>
</form>
Adding the following will calculate correctly the height in this situation.
select.form-control:not([size]):not([multiple]) {
height: auto!important;
}
include this in abc.component.ts
styles: [`
:host /deep/ select.form-control:not([size]):not([multiple]) {
height: auto!important;
padding: 0.375rem 0.75rem;
}`]
Ok, inside your custom select.form-control class, try to decrease the line-height property for something like that:
line-height: 1.0;
or maybe a small value.
Add this class in your custom style sheet (css file).
.form-control{
height:30px;
line-height:30px;
padding:6px;
}
include this on your css it will fix the problem
#sell.form-control{
height: 46px important!;
}
Related
I would like to remove all the extra spacing between my form controls using bootstrap 4 horizontal form to make it more compact and smaller. I added the css below which removes some of the spacing, but the spacing between label and input is still there and I cant figure out how to remove it.
.form-group {
margin-top: 0;
margin-bottom: 0;
}
Use !important to prevent override:
.form-group {
margin-bottom: 0px!important;
}
Or use bootstrap 4 spacing:https://getbootstrap.com/docs/4.0/utilities/spacing/
<div class="form-group mb-0">
For example:
.space .form-group {
margin-bottom: 0px!important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="/action_page.php">
<h1>Without space</h1>
<div class="space">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-grou">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</div>
<h1>With space</h1>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd">
</div>
</form>
Bootstrap sets a default margin-bottom on the .form-group class:
By default it only applies margin-bottom
https://getbootstrap.com/docs/4.1/components/forms/#form-groups
If youre using precompiled bootstrap just overwrite it using a stronger selector (aka proper cascading).
If youre compiling bootstrap yourself just set the $form-group-margin-bottom variable to whatever value you desire (e.g. 0).
I solved it by adding
label {
margin-bottom: 0;
}
It works fine now.
I spent an hour trying to apply my css to Bootstrap input of type text inside a form. Here's my code:
<form>
<div class="form-group">
<input type="text" name="username" value="" id="username" class="form-control" />
</div>
</form>
input [type=text] {
background-color: red !important;
}
The strange thing is that if I remove the [type=text] part, then all is ok.
JSFiddle
You have to remove the space between input and [type=text]:
input[type=text] {
background-color: red !important;
}
<input type="text"/>
<input type="password"/>
Your background spelling is wrong and remove space.
input [type=text] {
barckground-color: red !important;
}
so make sure you type correct.
input[type=text] {
background-color: red !important;
}
hi try this one hope i can help you:
<div class="form-group">
<label for="usr">Name:</label>
<input type="text" class="form-control" id="usr">
<input type="text" name="username" placeholder="input username">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd">
<input type="text" name="password" placeholder="input password">
</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.
My HTML has a class called .required that is assigned to required fields.
Here is the HTML:
<form action="/accounts/register/" method="post" role="form" class="form-horizontal">
<input type='hidden' name='csrfmiddlewaretoken' value='brGfMU16YyyG2QEcpLqhb3Zh8AvkYkJt' />
<div class="form-group required">
<label class="col-md-2 control-label">Username</label>
<div class="col-md-4">
<input class="form-control" id="id_username" maxlength="30" name="username" placeholder="Username" required="required" title="" type="text" />
</div>
</div>
<div class="form-group required"><label class="col-md-2 control-label">E-mail</label><div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password</label><div class="col-md-4"><input class="form-control" id="id_password1" name="password1" placeholder="Password" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">Password (again)</label><div class="col-md-4"><input class="form-control" id="id_password2" name="password2" placeholder="Password (again)" required="required" title="" type="password" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">first name</label><div class="col-md-4"><input class="form-control" id="id_first_name" maxlength="30" name="first_name" placeholder="first name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label">last name</label><div class="col-md-4"><input class="form-control" id="id_last_name" maxlength="30" name="last_name" placeholder="last name" required="required" title="" type="text" /></div></div>
<div class="form-group required"><label class="col-md-2 control-label"> </label><div class="col-md-4"><div class="checkbox"><label><input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service</label></div></div></div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-primary">
<span class="glyphicon glyphicon-star"></span> Sign Me Up!
</button>
</div>
</div>
</form>
I added the following to my CSS;
.form-group .required .control-label:after {
content:"*";color:red;
}
Still that does not give a red * around the required fields. What am I missing here? Isn't there a direct way in Bootstrap 3 to introduce * to required fields?
EDIT
The * in terms and conditions does not appear immediately to a checkbox. How to fix this?
Use .form-group.required without the space.
.form-group.required .control-label:after {
content:"*";
color:red;
}
Edit:
For the checkbox you can use the pseudo class :not(). You add the required * after each label unless it is a checkbox
.form-group.required:not(.checkbox) .control-label:after,
.form-group.required .text:after { /* change .text in whatever class of the text after the checkbox has */
content:"*";
color:red;
}
Note: not tested
You should use the .text class or target it otherwise probably, try this html:
<div class="form-group required">
<label class="col-md-2 control-label"> </label>
<div class="col-md-4">
<div class="checkbox">
<label class='text'> <!-- use this class -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Ok third edit:
CSS back to what is was
.form-group.required .control-label:after {
content:"*";
color:red;
}
HTML:
<div class="form-group required">
<label class="col-md-2"> </label> <!-- remove class control-label -->
<div class="col-md-4">
<div class="checkbox">
<label class='control-label'> <!-- use this class as the red * will be after control-label -->
<input class="" id="id_tos" name="tos" required="required" type="checkbox" /> I have read and agree to the Terms of Service
</label>
</div>
</div>
</div>
Assuming this is what the HTML looks like
<div class="form-group required">
<label class="col-md-2 control-label">E-mail</label>
<div class="col-md-4"><input class="form-control" id="id_email" name="email" placeholder="E-mail" required="required" title="" type="email" /></div>
</div>
To display an asterisk on the right of the label:
.form-group.required .control-label:after {
color: #d00;
content: "*";
position: absolute;
margin-left: 8px;
top:7px;
}
Or to the left of the label:
.form-group.required .control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -15px;
}
To make a nice big red asterisks you can add these lines:
font-family: 'Glyphicons Halflings';
font-weight: normal;
font-size: 14px;
Or if you are using Font Awesome add these lines (and change the content line):
font-family: 'FontAwesome';
font-weight: normal;
font-size: 14px;
content: "\f069";
.form-group .required .control-label:after should probably be .form-group.required .control-label:after. The removal of the space between .form-group and .required is the change.
use simple css,
.myform .required:after {
content: " *";
color: red;
font-weight: 100;
}
<form class="myform">
<div class="col-md-12">
<label for="xxx_fname" class="form-label required">First Name</label>
<input type="text" class="form-control" id="xxx_fname" >
</div>
<div class="col-md-12">
<label for="xxx_lname" class="form-label required">Last Name</label>
<input type="text" class="form-control" id="xxx_lname" >
</div>
</form
The other two answers are correct. When you include spaces in your CSS selectors you're targeting child elements so:
.form-group .required {
styles
}
Is targeting an element with the class of "required" that is inside an element with the class of "form-group".
Without the space it's targeting an element that has both classes. 'required' and 'form-group'
This CSS worked for me:
.form-group.required.control-label:before{
color: red;
content: "*";
position: absolute;
margin-left: -10px;
}
and this HTML:
<div class="form-group required control-label">
<label for="emailField">Email</label>
<input type="email" class="form-control" id="emailField" placeholder="Type Your Email Address Here" />
</div>
This works for me:
CSS
.form-group.required.control-label:before{
content: "*";
color: red;
}
OR
.form-group.required.control-label:after{
content: "*";
color: red;
}
Basic HTML
<div class="form-group required control-label">
<input class="form-control" />
</div>
I modified the css, as i am using bootstrap 3.3.6
.form-group.required label:after{
color: #d00;
font-family: 'FontAwesome';
font-weight: normal;
font-size: 10px;
content: "\f069";
top:4px;
position: absolute;
margin-left: 8px;
}
the HTML
<div class="form-group required">
<label for="return_notes"><?= _lang('notes') ?></label>
<textarea class="form-control" name="return_notes" id="return_notes" required="required"></textarea>
</div>
I have the following form. How do I create this look without <table>. Thanks
<table>
<tr><td><label for="firstname">First Name</label></td><td><input type="text" name="firstname" id="firstname" /></td></tr>
<tr><td><label for="lastname">Last Name</label></td><td><input type="text" name="lastname" id="firstname" /></td></tr>
<tr><td><label for="phone">Phone</label></td><td><input type="text" name="phone" id="phone" /></td></tr>
<tr><td><label for="email">Email</label></td><td><input type="text" name="email" id="email" /></td></tr>
<tr><td><label for="address">address</label></td><td><input type="text" name="address" id="address" /></td></tr>
<tr><td><label for="city">City</label></td><td><input type="text" name="city" id="city" /></td></tr>
<tr><td><label for="State">state</label></td><td><input type="text" name="state" id="state" /></td></tr>
</table>
This enough for basic styling:
input {
display: block;
}
label {
width: 100px; /* whatever value you wish */
float: left;
}
You can see how this works at http://dabblet.com/gist/2794359
.label {width:30px;} certainly won't do it. First of all, because when you write .label, that selects elements having a class called label. Secondly, even if you didn't use the dot, the label element is by default an inline element, so setting a width on it is useless if you don't give it a display: block as well (floating it also does the trick).
You can use this styles:
CSS markup:
.divContainer
{
display: table;
}
.divRow
{
display: table-row;
}
.divColumn
{
display: table-cell;
}
HTML markup:
<div class="divContainer">
<div class="divRow">
<div class="divColumn">
<label for="firstname">First Name</label>
</div>
<div class="divColumn">
<label for="lastname">Last Name</label>
</div>
</div>
</div>
Sample HTML:
<div id="container">
<div class="row">
<div>
<label for="firstname">First Name</label>
</div>
<div>
<input type="text" name="firstname" id="firstname"/>
</div>
</div>
<div class="row">
<div>
<label for="lastname">Last Name</label>
</div>
<div>
<input type="text" name="lastname" id="firstname"/>
</div>
</div>
<div/>
CSS:
.row {
width: 100%;
}
.row > div:first-child {
width: 20%;
float: left;
}
.row > div:last-child {
float: left;
width: 80%;
}
jsFiddle: http://jsfiddle.net/Q4g2u/1/
Apart from religious-like issues, there is no reason to format tabular data such as a form without using table markup. But if you must, the technique described in the answer of Luis Sánchez comes closest – but it is just simulating tables in CSS, with more limited browser support.