This is my first question in Stack Overflow!
So, I'm trying to align (horizontal) all labels of my form, but, without success. My HTML is:
<form class="form-inline" id="form-filtro" role="form">
<div class="form-group">
<label class="control-label" for="filtrar-por">Filtrar por</label>
<select class="form-control" id="filtrar-por">
<option value="id">ID</option>
<option value="id">Nome</option>
<option value="id">Nome comercial</option>
<option value="id">CPF/CNPJ</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="filtro">Filtro</label>
<input type="text" class="form-control" id="filtro">
</div>
</form>
But, the result is:
What am I doing wrong?
I went to the bootstrap site and pasted your form code directly over the top of the example form-inline demo and things worked fine.
I did however encounter an issue if I manually styled the form to restrict it's maximum width. It looks like your form may not have enough room to display and so the label is wrapping.
Check the styles on the form in your stylesheet, or on the containing element to see if something is restricting the size.
It would also help if you posted a minimalist reproduction of your issue. ;-)
Related
<div class="dx-field"> <dx-text-box #userLogin label="userName" [(value)]="login" placeholder="UserName or email" width="100%"> <dx-validator> <dxi-validation-rule type="required" message="UserName Required"></dxi-validation-rule> </dx-validator> </dx-text-box> </div> How to add a associate label to the dx-text-box control
I have created a login page by giving username and password under textbox control. Now lighthouse showing me the error of. Forms do not have associate labels. How to fix it?
I encourage you to review how label works in HTML, see MDN.
Here is an Angular example from angular.io:
<div class="form-group">
<label for="power">Hero Power</label>
<select class="form-control" id="power" required>
<option *ngFor="let pow of powers" [value]="pow">{{pow}}</option>
</select>
</div>
However, please read the HTML content I shared above, otherwise you will have more problems. Just my 2 cents.
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>
I have been working on a project that will ask users for their details and then underneath a bunch of questions. The details section uses a form with gutters (unsure if that is correct terminology). But i want to be able to input the questions and have them come down 1 by 1 in order. And not by the side of eachother like it does for inputting the details.
This is the link i used for the gutters- https://getbootstrap.com/docs/5.1/forms/layout/
This is the link to what the details page looks like - https://imgur.com/a/yI7R09H
And i want it the questions like this underneath - https://imgur.com/a/qu0qjfm
However they must be in the same form otherwise my code wont work and unsure to change it to submit the form from two pages...
Code of both parts - https://pastebin.com/5nbavuUt
/* Code From Details */
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name</label>
<input type="name"
class="form-control"
id="site_name"
name="site_name"
value="<?php if(isset($_GET['site_name']))
echo ($_GET['site_name']); ?>"
placeholder="Enter Site Name"
required><br>
</div>
/*Code From Questions */
<div class="form-group">
<h6 for="q9">9. Is there clear access to the position of the Machine(s)   (e.g. acess through doors)</h6>
<select class="form-select form-select-sm" name="q9">
<option selected>Choose</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
</select>
</div>
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'm using Twitter Bootstrap. Select boxes are always narrower than input boxes.
How can I make them the same width? Adding padding helps, but it looks ugly.
EDIT
Here is a little example - http://jsfiddle.net/DfY8z/2/
Same example with custom class applied - http://jsfiddle.net/DfY8z/3/
I can use classes like span3, span4 etc. But I want my inputs to fill all available space (and to be the same size) so I'm using custom class.
Just adding input-sm class just next to the form-control worked for me.
<select class="form-control input-sm" id="xxx" ... >
<input type="text" value="" name=""><br>
<select>
<option>Some options which is very very long... </option>
</select>
The result is the exact size of the boxes.
You appear to be using an older version of bootstrap (current version is 2.2.1). Select boxes and input boxes in newer versions are the same size when no class is applied and when resized using the span* method
If you need to set a custom size you will have to use 2 different custom classes or target select boxes and input boxes individually. The input boxes need to be 14px smaller than select boxes (as do text areas).
See updated example
// code sample because its required
<input class="myClass" type="text" value="Abcdefghijklmnop" />
<br />
<br />
<select class="myClass">
<option> ABC </option>
<option> XYZ </option>
</select>
place the control
inside a div and apply class="col-sm-2" on the div.
<div class="col-sm-2">
<select></select>
you can change col-sm-2 col-sm-3 as per your requirement
This has worked for me -
Go to bootstrap.css file and comment out the following --
select.form-control:not([size]):not([multiple]) {
height: calc(2.25rem + 2px); }
This works:
<select style="width: 200px">...</select>