I have this code that generates a red asterisk in my required fields
.required:before {
content:"* ";
color:red;
}
in some it shows well but in others it doesn't
How can I make it show on the same line of my label?
<div class="form-group container-fluid">
<label class="col-md-2 control-label required">Nombre:</label>
<div class="col-md-10">
<input type="text" class="form-control" ng-model="activity.name">
</div>
</div>
Looks like it's the width of your labels which pushes the text to lines below.
If you increase the width of .control-label you should be able to keep everything on the same line.
It looks like you are using bootstrap so try change the col widths (col-md-*)
you can try col-md-3 and col-md-9 or col-md-4 and col-md-8 respectively.
e.g. (3 and 9)
<div class="form-group container-fluid">
<label class="col-md-3 control-label required">Nombre:</label>
<div class="col-md-9">
<input type="text" class="form-control" ng-model="activity.name">
</div>
</div>
I solved my mistake with this:
.required:before {
content:"*\00a0";
color:red;
}
Related
Using bootstrap 3.3 and angular here.
I am trying to create a search filter above my grid but having some alignment issues. In full page I can see them aligned correctly, but when I try to resize the page all my form controls get jumbled up and down. I believe these is some css class which is missing but cant seem to figure out what is that. Could anyone point me in right direction.
I also created a stackblitz demo here at:
https://angular-datrange-enhq8w.stackblitz.io/
If you resize the window you would see what I am talking about.
Here is the stackblitz editor for this:
https://stackblitz.com/edit/angular-datrange-enhq8w
Below is some relevant code:
<div id="filters">
<form [formGroup]="filtersForm" >
<div class="row padding-top-10">
<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off" class="hidden-xs hidden-sm" />
</div>
</div>
</form>
</div>
Also on side note if you see the demo somehow I feel my dropdown does has the right style, is there some extra bootstrap 3 style I can add for this.
Thanks for looking into.
Anyone for inputs?
The grid system for bootstrap states that every row must be wrapped by a container class.
<div id="filters">
<form [formGroup]="filtersForm">
<div class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-sm-12 col-md-1 col-lg-1 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
class="hidden-xs hidden-sm" />
</div>
</div>
</div>
</form>
</div>
This does not solve the issue of changing the size. The bootstrap grid system is setup like this: For every row, there are 12 columns. What you are saying is that for the div with the class col-xs-12, make the element in that class have a width of 100% when the screen size is extra small. You are also saying that when it hits the col-md-1 (medium screen size breakpoint), it should have a width of 8.3333%. You have 6 divs in that page you provided. Since you have 6 divs, 12 columns / 6 divs = 2 columns per div. Therefore your code should be refactored to something like this:
<div id="filters">
<form [formGroup]="filtersForm">
<div class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-md-2 form-group" style="margin-right:65px">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" style="height:33px" autocomplete="off"
class="hidden-xs hidden-sm" />
</div>
</div>
</div>
</form>
</div>
Notice how I removed col-sm-12.. this is because col-xs-12 will set the width for every screen size up to the next given class. In this case you have col-xs-12, therefore when the screen size is xs and sm, it'll have a width of 100%. When it hits the md breakpoint, it'll change the width to 2/12 and have the same width for lg and xl screen sizes.
Check out bootstrap grid system.
The base syntax is:
container | container-fluid
row
columns (the total of col must be 12)
Also, there is no need of aditional margins on your col divs.
<div id="filters">
<form class="container-fluid">
<div class="row padding-top-10">
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label for="name">Name</label>
<input formControlName="name" name="name" type="text" autocomplete="off" class="form-control" />
</div>
</div>
<div class="col-xs-12 col-md-2">
<div class="form-group">
<label for="age">Age Range</label>
<select class="form-control" formControlName="age">
<option [selected] value="">All</option>
<option *ngFor="let age of ages" value='{{age}}'>
{{age}}
</option>
</select>
</div>
</div>
</div>
</form>
</div>
If you want to persist all columns in a single row even on small screens, remove col-xs-12 and change col-md-2 to col-xs-2.
I'm wondering how to get 2 input groups next to each other but have only 1 label above the input groups...kind of like this
so far I have:
<div class="row">
<div class="form-group col-xs-3 col-xs-offset-1">
<label for="attendeeCountMin">Guests</label>
<input id="attendeeCountMin" class="form-control input-group-lg" type="number" name="attendeeCountMin" placeholder="Min"/>
</div>
<div class="form-group col-xs-3">
<label for="attendeeCountMax"></label>
<input id="attendeeCountMax" class="form-control input-group-lg" type="number" name="attendeeCountMax" placeholder="Max"/>
</div>
</div>
it keeps on making the second input box a little above the first one unless i put something in the second label box. Any one know how to do this?
thanks
Move the label outside the row
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<label>Guests</label>
<div class="row form-group">
<div class="form-group col-xs-3 col-xs-offset-1">
<input id="attendeeCountMin" class="form-control input-group-lg" type="number" name="attendeeCountMin" placeholder="Min"/>
</div>
<div class="form-group col-xs-3">
<input id="attendeeCountMax" class="form-control input-group-lg" type="number" name="attendeeCountMax" placeholder="Max"/>
</div>
</div>
You can get the result you want by adding a couple of CSS rules.
.form-group {
display: inline-block;
}
The above CSS rule makes sure every element that contains .form-group class is position inline with the other element
.form-group label {
display: block;
}
Makes sure every label under .form-group class is not affected by the rule above.
You can see the JSFiddle here: https://jsfiddle.net/NikolaosG/r80fjLwt/
The generated HTML I have is this:
I put it in Bootply so you can just see and play with it easier, notice it has a small CSS section too:
http://www.bootply.com/NrxiDfZJdC
Problem is it is not "bootstrappy" enough! If you start making the window smaller the labels jump to the right side of the control.
What have I done that has caused this issue?
You have a couple of major problems here.
Right Alignment:
You have set this by adding .text-right on your labels. Obviously this was meant for the desktop view only. Take it off of your labels and use a min-width media query to set the alignment or override the alignment with max-width at small resolutions
Overflowing text boxes:
You didn't use a row. You should most always use a row because it corrects the padding wit negative left and right margins. You tried to fix this yourself by instead adding a class that removes the padding on the .col-sm-4. The padding is there for a reason and should not be removed. Even adding in the row and removing the .multi-row doesn't completely correct the issue, however. When you do that you run into the text inputs being too wide. That is because you added the 100% width to the inputs. This is not a bad thing per se, but it causes problems because you have used spans for your inner columns. spans are naturally collapsed in width. They don't fill their parents' container like divs do. Swap them for divs.
Weird "Ext" label:
This is because you added a margin-left: 85% to the label to simulate the right alignment that the others have. Just remove that margin and add text-right to this label like you have on all the other similar labels.
No padding:
After all that, you'll have no padding on smaller resolutions. Add a .container around your form.
In the end, you should have this: http://www.bootply.com/uiPpBytre3
Demo:
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.form-input{
width :100%;
}
#media(max-width: 768px) {
.form-group .text-right {
text-align: left;
}
}
<div class="container">
<form class="form-horizontal" role="form">
<br>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Name">Name</label></div>
<div class="col-sm-4"><select class="form-control" id="nameadmin" name="nameadmin"><option>77881</option>
<option>77882</option>
<option>77883</option>
<option>77884</option>
<option>77885</option>
</select></div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowEmailInFooter" name="ShowEmailInFooter" type="checkbox" value="true"><input name="ShowEmailInFooter" type="hidden" value="false">
<label class="control-label" for="Show_Email_in_Footer">Show Email in Footer</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Email">Email</label></div>
<div class="col-sm-4">
<input id="AdminEmail" name="AdminEmail" style="width:100%;padding-right:30px;" type="text" value="">
<span class="glyphicon glyphicon-envelope form-control-feedback" style="right: 10px; line-height: 27px; color: lightblue"></span>
</div>
<div class="col-sm-4 col-sm-offset-1">
<div>
<input class="checkbox-inline" id="ShowAdminPhone" name="ShowAdminPhone" type="checkbox" value="true"><input name="ShowAdminPhone" type="hidden" value="false">
<label class="control-label" for="Show_Admin_phone">Show Admin phone</label>
</div>
</div>
</div>
<div class="row form-group">
<div class="col-sm-offset-2 col-sm-1 text-right"><label class="control-label" for="Phone">Phone</label></div>
<div class="col-sm-4">
<div class="row">
<div class="col-sm-5"><input class="form-input" id="AdminPhone" name="AdminPhone" type="text" value=""></div>
<div class="col-sm-2 text-right"><label class="control-label" for="Ext">Ext</label></div>
<div class="col-sm-5"><input class="form-input" id="AdminExt" name="AdminExt" type="text" value=""></div>
</div>
</div>
</div>
</form>
</div>
Add responsive text align class text-sm-right instead of text-right
#media (min-width: #screen-sm-min) {
.text-sm-right { text-align: right; }
}
bootply
I have the following html. My label is not aligned vertically in the center compare to the input field.
<div class="row">
<div class="col-sm-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-sm-2">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
How can I set both input and label have the same height ?
JSFiddle
https://jsfiddle.net/mLcrv19z/
To get the two elements (label and input) to align vertically, try using the form-inline class, along with form-group. Here's what that looks like:
<div class="form-inline">
<div class="form-group">
<label for="investmentbalance">Investment Balance</label>
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" />
</div>
</div>
https://jsfiddle.net/mLcrv19z/10/
You can use both padding or line-height.
Add to label:
padding: 7px;
or:
line-height: 34px;
The input height is 20px; the padding 6 and the margin 1. So here's the calculation:
padding: 6 + 1 = 7px
line-height: 20 + 7 (top) + 7 (bottom) = 34px
You may use margin-top:3%; to the label CSS
The value is based on the jsfiddle example. It may change depending on the application you are developing.
Issue is not with your alignment but the classes you have defined. You need to define bootstrap grid class for every width. Otherwise grid would appear different in different resolutions. Check this out.
<div class="col-sm-10 col-md-10 col-xs-10">
<div class="col-sm-2 col-md-2 col-xs-2">
Fiddle Solution
Another solution is to use a custom class, setting it's line-height equal to the parent's height and aligning it in the middle.
.middle {
vertical-align: middle;
line-height: 34px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
<div class="row middle">
<div class="col-xs-5">
<label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
</div>
<div class="col-xs-7">
<input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
</div>
</div>
</div>
I have an problem that i have not been able to finde any answer. I have section of the view:
If the label on the right is to long for the view, it will of course break, but the input does not follow down to be centered with the label. Are there any way to do that. So it looks something like this instead:
Here is the code
<div class="row">
<div class="col-xs-12 col-md-12 noPadding">
<label class="checkboxlabel control-label col-xs-4 col-md-2" for="EmEquipDescEnglish">
#Html.Action("GetLabel", "Translatable", new { key = "MMS_EquipmentManagement2" })
</label>
<div class="col-xs-6 col-md-3">
<div>
<input type="text" class="form-control requiredField validateField translateString imgtooltip" data-isvalid="false" id="EmEquipDescEnglish" #Html.Action("GetString", "Translatable", new { key = "MMS_EquipmentManagement19" }) data-toggle="tooltip" data-placement="top" title="">
</div>
</div>
</div>
</div>
I've made you a fiddle https://jsfiddle.net/3fx4cchs/
It's made with position absolute, there is also a version where you could use display:table; but i chose this one.