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
Related
I've been running around trying to figure out how I can use grid to format the layout of a form. I seem to be doing exactly what other coders are doing to utilize grid in CSS but it's just not working. My goal is to put the "type" selector to the right of the pet name and the reset button to the right of the submit button. Could someone point out what I'm missing?
my css code and what the form looks like
The HTML for the form
I think your issue might be because of the <div> you have on both input and select tags. By default div are block elements and browsers will start div on a new line by placing a line break before and after a div.
One quick fix is removing the div surrounding your Pet Name and
Type. If you must, have both of them in a single div.
Preferably use 1fr in place of 50%.
You will get this desired output
You are using seperate div for individual elements, that's why the elements are displaying one after another. You can put a common div for the elements which you want to display adjacent to each other.
<div class="grid">
<div>
<legend>Add pet</legend>
</div>
<div>
<label for="Name">Pet Name</label>
<input type="text" id="name" name="pet_name">
<label for="Type"></label>
<select id="type" name="pet_type">
<option value="Cat">Cat<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
<option value="Dog">Dog<option>
</select>
</div>
<div>
<button type="submit" id="new_pet_submit_button">Create New Pet</button>
<button type="reset">Reset</button>
</div>
</div>
Trying to get the input box's to line up with their text, the second input box drops a line and throws everything off when float: right is on. I'd like to know why it skipping a line and how to fix it please. Thank you.
tried rearranging, tried clearfix.
https://jsfiddle.net/dpq1fzcj/4/
<section>
<h1> </h1>
<div id="controls" class="controls">
<form id="add-book-form">
Title:
<input type="text" name="title" required /><br>
Author:
<input type="text" name="author" required /><br>
Pages:
<input type="text" name="pages" type="number" required /><br>
Read:
<input type="checkbox" name="read" /><br>
<input type="submit" id="add-book-btn" value="Add"> <button onclick="hideForm()">nvm</button>
</form>
<button onclick="addBookForm()">Add Book</button>
</div>
</section>
You have several problems.
First, you're floating right the input fields and leaving labels to figure out what to do. First label ends up ok, second up breaks the flow because it fits in the same row as the input field since the text line-height is smaller than height of the input field. But the input field doesnt fit in that same line as its label.
Second, you're using <br> for breakings instead of wrapping everything in some kind of a block element.
Third, you're not using label tag at all.
So, to fix this:
Add labels (and for property in labels)
Float labels left and inputs right.
Add div around every label/input pair and add clearfix to it.
Lose <br> altogether.
<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.
The only difference between this fiddle and this other version of the fiddle is that the 2nd one has </label><label for="address_zip" class="zip"> without a line break after the closing </label> tag.
<label for="address_state" class="state">
<span>State</span><input name="address_state" type="text" placeholder="CA" required="" class="field is-empty">
</label><label for="address_zip" class="zip">
<span>ZIP</span><input name="address_zip" type="text" placeholder="94107" required="" class="field is-empty">
</label>
I've experienced similar weirdness before. Line breaks are tricky.
So, I figured "I'll live with the fact that the HTML won't have a new line after the closing label tag, even though that looks sloppy."
However, then I noticed that a nearly identical webpage I'd coded (with just different CSS) seems to be immune from this line break problem.
Why?
Your form is basically one long line, since there are no block sections such as div. You added a display: flex to each label, but not to fieldset, so that each label is on its own row.
When you add a break line between your labels, that break line is added to the HTML view as a space, which makes it too long to fit into one row.
Here is how the code should look like:
<div>
<label for="cardholder-name"> Name </label
<input name="cardholder-name" type="text" placeholder="Jenny Rosen" class="question field is-empty personHead">
</div>
You might have to redo some css to align it properly, but this is the proper format.
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.