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;
}
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
I am using input group add-on at the front of the input box. While fixing it, the height of the add-on is getting little higher than the box. How to fix the addon to the size of input box?-
<div class="form-group">
<div class="input-group">
<div class="input-group-addon">
<i class="icon-home"></i>
</div>
<input class="form-control" type="text" placeholder=" ">
</div>
</div>
The default image used for the addon is having a bigger height. So, to match it with the input box I have changed the same image into an appropriate size.
Use this image in its place http://i.imgur.com/sCrdOXO.png
Check the FIDDLE
Work with the code in the following way:
.icon-home {
background:url('http://i.imgur.com/sCrdOXO.png') no-repeat;
width:23px;
height:22px;
display:block;
}
.input-group-addon {
display:block;
float:left;
}
#input_css {
display: inline;
margin-top:0px;
}
Hope this answers your question
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.
How can I align button right next to my input text. Example here
HTML
<div id="frm">
<label>Select an Item:
<input type="text" /><input type="button" value="..." class="open">
</label>
<label>Price:<input type="text" /></label>
CSS
#frm label
{
display:block;
float:left;
padding-right:6px;
}
#frm input
{
display:block;
}
Edit
I want my form elements horizontally aligned in blocks & I like the popup button to align with just one textbox.
I'd suggest to move the <input> outside the <label>, like this:
<div id="frm">
<div class="group">
<label for="item">Select an Item:</label>
<input type="text" id="item" />
<input type="button" value="..." class="open">
</div>
<div class="group">
<label for="price">Price:</label>
<input type="text" id="price" />
</div>
</div>
If you want to separate the inputs from the label, you should place the label text inside an own element, and not mix label text and input into a common tag.
Then, you can use the following CSS:
#frm .group {
display: block;
float: left;
padding-right: 6px;
}
#frm label {
display:block;
}
See how it looks like, is this what you want?
-Easiest way to solve your problem, is to remove all CSS - input is inline by default, so it won't wrap to the next line if you add no CSS.
-And I'd add an extra div to make sure your fields are on seperate lines, no CSS needed either.
Like this:
<div id="frm">
<div class="field">
<label>Select an Item:</label>
<input type="text"><input type="button" value="..." class="open">
</div>
<div class="field">
<label>Price:</label>
<input type="text">
</div>
</div>
http://jsfiddle.net/ckfZE/15/
http://jsfiddle.net/ckfZE/18/
added a span-tag though
This CSS is causing that conflict:
#frm input {
display:block;
}
You could set .open to display:inline to fix this.
Be a little more specific with your question. If you took the CSS out completely they would be aligned right next to each other. If you want them on separate lines add a <br/> after the text input.
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;
}