Im having trouble with creating my form which is placed in a tab-pane. It seems that my labels and input
elements are crossing each others bounderies when labels are to long or the window made smaller
My code can be seen here .. please notice that labels and inputs dont stay aligned when window size changes. It seems like making rows and columns inside tab-pane is not working the same way as when they are created outside that class.
http://www.bootply.com/I3Iwdr4UVj
It's as if the input element does not know the boundry of the label ..
Are there other ways to nicely create the form inside my tab-pane ? ..
First of all, try to give a className with wider width, .col-sm-2 is too narrow for a label:
<div class="form-group">
<label class="control-label col-sm-5" for="pwd">Password:</label>
<div class="col-sm-7">
<input type="password" placeholder="Enter password" id="pwd" class="form-control">
</div>
</div>
I would suggest you always try to get the sum of 12 when you use Bootstrap classes.
Related
I am new to bootstrap forms. I see that the UI is different when the input is nested inside a label. Can someone explain me why?
Here is the code snippet
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>userName:
<input class="form-control col-sm-5" formControlName="userName" type="text">
</label>
</div>
<div class="form-group">
<label>userName:</label>
<input class="form-control col-sm-5" formControlName="userName" type="text">
</div>
</form>
My page is rendered as shown in an image. My question is why does the input element appear shorter in the first and longer in the second row?
it`s according HTML Way of treating Codes as Block and Inline elements.
A block-level element always starts on a new line.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
A block level element has a top and a bottom margin, whereas an inline element does not.
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
Source 1 Source 2
and the way bootstrap treat it according to flexbox theory
<div class="row mb-3">
<div class="col-6">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" >
<input type="text" id="startLocation" class="form-control" placeholder="von Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</form>
</div>
<div class="col-6">
<input type="text"id="destination" class="form-control" placeholder="nach Bahnhof / Haltestelle / Adresse" tabindex="-1">
</div>
</div>
I want my two text inputs to be the same with and toghther fill the total width. The Problem is the "startLocation does not have the correct width. I think its because its nested inside another element but I need the other element to have the class autocompleted so I don't know how to fix this.
Sorry If this is a stupid beginner question. Im new to html and bootstrap.
What is the "mb-3" class for in row?
Did you mean md-3? Which you would only need to set column widths (if you're using bootstrap).
Open the developer tools and check the padding and margin around the form. The form itself, and the nested div are probably taking up some space. Also the inputs have different parents so your styling might not be targeting the right selector.
I have a bootstrap form in this jsfiddle and a simple label + textbox combo.
<div class="form-group">
<label class="col-md-4 control-label" for="af_Email">Email</label>
<div class="col-md-4">
<input id="af_Email" readonly="readonly" name="af_Email"
placeholder="" class="form-control input-md"
required="" value="frizzo#hotmail.com" type="email">
</div>
</div>
When page is expanded (assuming in the col-md-* range), labels right align and the margins are good and the page looks good.
When I shrink the page to something lesser than col-md-*, the labels left align, the margins to the panel are non-existent and it looks unprofessional:
How can I add margins (on both side of the panel) when page size lesser than col-md-*?
As a bonus question, can someone explain where in bootstrap this behavior is defined or documented?
Looks like you missed to add .col-md-12 before .form-group.
Here's the update: https://jsfiddle.net/ttb0xtn0/1/
i need to add font-icon inside input field so i used this method
<input type="text" name="your name" placeholder=" YOUR NAME" style="font-family:Flaticon" class="restrict">
as you see placeholder=" YOUR NAME" this display font-icon but my problem is when user types some text place holder disapper so i need font icon to be placed permanent inside input field like <lable>
can someone help me
You can't. What do you expect it to look like? placeholder disappears by design.
If you want to prefix an icon in front of your input field, put them together in a container, give this container the needed style and put there your icon and your input-tag. That's the way, how bootstrap your problem solves.
Shortened example:
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="Amount">
</div>
Of course, you need CSS.
I use Bootstrap 3 and i have a multiple datepicker (from - to). It work well on a compute however i have problem for mobile phone compatibility. My input group overflows the screen and do not resize all the group.
In case of small device, i would like to have the the group on 2 rows:
- the first with the addon From + its datepicker
- the second with the addon To + its datepicker
how could i do ?
my html:
<form class="form-horizontal">
<div class="form-group">
<div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
<div class="input-group">
<div class="input-group-addon">From</div>
<input type="date" class="form-control" name="beginDate" id="beginDate"/>
<div class="input-group-addon" for="endDate">To</div>
<input type="date" class="form-control" name="endDate" id="endDate"/>
</div>
</div>
</div>
</form>
EDIT : I know it have to be done in css with #media, but how to get to the line only after the first datetimepicker ?
Bootstrap doesn't support multiple input fields within a single input group, regardless of browser:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
This would have to be done in the css.
So if you look at your bootstrap.css and scroll down to any #media 746px(I think its that many pixels it is for mobile) you should see examples of how they handle when the screen gets re sized. Mobile is just a screen size that is really small on a computer browser.