I have a html form(ASP.Net MVC). The input textboxes are wrapped in a div with a class name of editor-field. Example html:
<div class="editor-field">
<input id="EmployeeNo" type="text" value="" name="EmployeeNo">
</div>
The style for the editor-field class is:
.display-field, .editor-field
{
float: left;
}
The textboxes are all way of to the right, how can I get it to be closer to the labels? I've tried adding margins and padding, but it doesnt work.
The problem was with the .editor-label. It had a width that was too big.
Related
If I have a form defined inside a bootstrap panel, then the form group layout goes to pieces.
I coloured the form red so that I could see where it was ;) here's the jsFiddle : https://jsfiddle.net/DTcHh/
I have found that if I add
.panel-body .form-horizontal .form-group {
margin-right: 25px;
margin-left: 25px;
}
to the css, I then get this
(I coloured the form red so that I could see where it was ;) )
so it looks like it's fixed, but seems a terrible hack to me
Is this is a bug in bootstrap
Do I just have to apply this css
Is there something wrong with my form definitions ?
thanks
According to bootstrap docs (https://getbootstrap.com/docs/3.4/css/#forms-horizontal), the class form-horizontal makes <form> act like a .row so you don't need to add it and have .col-**-* in from groups, label and stuff. The docs give you an example o
But you have a .row inside a .row and no .col-**-*. .row has negative margin to delete the padding of his parent so with no .col-**-* as parent it has 2 negative margins.
So it's kind of messy. I suggest removing your .row and .form-horizontal class to achieve the look you want or add the margin like you already did.
Here it's a fiddle.
Thanks to the other answer for pointing me in the right direction. I personally like the option of adding a column with 12 width that wraps around the other form-groups.
<form class="form-horizontal" style="background: red;">
<div class="col col-xs-12">
<div class="form-group">
<label>field 1</label>
<input class="form-control" type="text" />
</div>
<div class="form-group">
<label>field 2</label>
<input class="form-control" type="text" />
</div>
</div>
</form>
Here's the fiddle
Basically I have a couple of input fields which have a span prepended with some text. When I try to set col-lg-4 and col-lg-8 on the input-group-addon and the input field itself, it doesn't do what I expected it to do and resize them.
<div class="input-group">
<span class="input-group-addon">some text</span>
<input type="text" class="form-control" id="current_pwd" name="current_pwd" />
</div>
Can anyone help me getting the input-group-addon get the same size?
I've created a fiddle here: http://jsfiddle.net/Dzhz4/ that explains my problem.
Anyone that can shed some light please?
try this
http://jsfiddle.net/Dzhz4/1/
.input-group-addon {
min-width:300px;// if you want width please write here //
text-align:left;
}
.input-group-addon { width: 50px; } // Or whatever width you want
.input-group { width: 100%; }
The first part sets the width of your addons, the second forces the inputs to take up all of their parent container.
I have a checkbox and two text fields. When the checkbox is checked, the two textfield appear (via jquery code). I want that the two label "First field" and "Second field" be aligned with the label "MyCheckbox" Or, in some way, that the two textfield label should be indented respect to the level of the checkbox.
This is my html code:
<div>
<input type="checkbox" name="mycheckbox"> MyCheckbox
</div>
<div id="mydiv">
<div><label>First field</label>
<input type="text" name="first_field" value="">
</div>
<div><label>Second field</label>
<input type="text" name="second_field" value="">
</div>
</div>
How could I do it with css?
#mydiv div {
padding-left: 16px;
}
JSFiddle
You could put them inside of the same div and append to the div using jquery. You would access the div like this
$('input[name=mycheckbox]').parent()
and the append like this
$('input[name=mycheckbox]').parent().append($('#mydiv').html());
If you put the first field and second field outside of the div and the div has a default width //width = 100%
It will be put underneath your first checkbox div. So you need to do one of two things...
Use the above jquery to put your code inside of the 100% div
Or specify the first div's width and float the item next to it an
example of this is
////the float is optional
//div{
//width: 50%;
//float:left;
//}
//#mydiv{
//width: 50%;
//float:left;
//}
I would like to make the login and password field in thesame order. when i try to change order in css file with margin command, it moves both field.
Try something like this. There are many way to do it, but this is the most straighforward.
http://jsfiddle.net/QutGz/1/
dunno want is going on width the fiddle. You can accomplish evening out the "columns" like this:
label
{
float:left;
width: 100px;
}
input
{
float:left;
}
Set the width to something that will be larger than the largest label text.
You can use CSS float to fix the inputs position in relation to each other and their parents elements:
See this working Fiddle example!
Assuming a structure like:
<form method="post" action="#">
<div class="clear">
<label>KULLANICI ADI</label>
<input type="text" value="" name="foo">
</div>
<div class="clear">
<label>SIFRE</label>
<input type="text" value="" name="bar">
</div>
</form>
The CSS solution would be:
input[type="text"] {
float: right;
}
.clear {
clear:both;
}
I have
<input type='text', id='name'></input>
and I have
<p>my name is xyz</p>
I would like the <p> element to be located 20px the right side of <input>, how to use CSS to achieve this?
I realise that this is a little bit more work than simply adding a CSS style declaration, but could I suggest that you use slightly-more semantic mark-up to style your forms? Something along the lines of:
<form action="path/to/script.php" method="post">
<fieldset> <!-- to associate related inputs -->
<legend>Name</legend> <!-- a broad description of this group of inputs -->
<input name="name" id="name" type="text" /> <!-- input elements are usually self-closing -->
<label for="name">My name is</label> <!-- the for attribute takes the id of the associated input, and allows a click on the label to focus the input -->
</fieldset>
</form>
Then, in the CSS, if you want the label to be 20px to the right of the input, all you need to do is:
input {
margin-right: 20px;
}
/* or */
label {
margin-left: 20px;
}
JS Fiddle demo of margin-right.
JS Fiddle demo of margin-left.
Recommended reading:
http://www.alistapart.com/articles/prettyaccessibleforms
http://www.themaninblue.com/writing/perspective/2004/03/24/
<label><input type='text', id='name'><span style="padding-left:20px;">my name is xyz</span></label>
You can float the elements to achieve this:
input { float: left; }
p {
float: left;
margin-left: 20px;
}