I am working on a requirement where the input group contains two text-boxes separated by input-group-addon. The problem I am facing is I am not able to set the width of the text-boxes using bootstrap css. The first text-box should be wider than the second text-box.
JSFiddle: https://jsfiddle.net/Vimalan/5eqdkveb/3/
Current:
The textbox before and after delimiter are of same size.
Expected:
The textbox after delimiter should be small. I am more interested in a solution which uses bootstrap css and not custom css.
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="form-horizontal">
<div class="form-group">
<label class="col-xs-3 control-label">Approval Number</label>
<div class="col-xs-9">
<div class="input-group">
<input type="text" class="form-control input-sm" id="ApprovalNumberTextBox" />
<span class="input-group-addon">Delimiter</span>
<input type="text" class="form-control input-sm" id="ApprovalNumberDelimiterTextBox" />
</div>
</div>
</div>
</div>
I don't get why you are not able to set text-boxes width?!
You can simply add css rule to the input you want and set its width, like
<style>
#ApprovalNumberDelimiterTextBox {
width:40%;
}
</style>
and it is working Here or there is another problem I don't get?
Related
I don't know why, but on scrren size 1024 x 768 my choose options from select are sooo big. How can I do this to this options to be width like select?
I would like to do this only on bootstrap 4 and use only classes from bootstrap but I don't know or it is possible and I don't know why this selects are acting like this. On larger screen sizes everything is ok.
How to fix it?
Here is my code:
<div class="row">
<div class="col-sm-6" style="border: 1px solid black">
<span class="font-weight-bold">Data</span>
<form role="form">
<div class="form-group">
<label class="control-label">Choose</label>
<select class="form-control" name="docType">
<option value="paragon">Test1</option>
<option value="complaint">Test2</option>
</select>
</div>
<div class="form-group">
<label for="docNo">Data</label>
<input type="text" class="form-control" id="docNo">
</div>
<div class="form-group">
<label for="docDate">Data</label>
<input type="text" class="form-control" id="docDate">
</div>
</form>
</div>
<div class="col-sm-6">
Test
</div>
</div>
Do you have something in your CSS that is forcing the options to be a static pixel size instead of allowing bootstrap's width to just be auto?
Usually the options tag will not display large options even if you are using bootstrap, but you could try adjusting the width by using the following css code for all form elements in html.
.form-control
{
width:90%;
}
I am using Bootstraps grid system to make my input box smaller. However, it seems to conflict with form-control.
HTML:
<form class="col-md-8">
<div class="form-group">
<input type="text" name="input_box" class="form-control col-md-3"/>
</div>
</form>
In Chrome's developer tools, the 25% (for .col-md-3 is automatically crossed out). If I take out .form-control then it works but looks ugly.
How do I use them both? Note that I do not want to change the width in .formcontrol because I have other forms that also use this and will get messed up
How about this
<form>
<div class="col-md-8">
<div class="form-group col-md-3">
<input type="text" name="input_box" class="form-control"/>
</div>
</div>
</form>
I have an asp page using bootstrap and I can't figure out how to change the size of a label in a form group. If I change the <div> column size it changes the width for the label and input. I need the label to be long but the input to be short. Here is what I have. Pretty basic. In the code below i just need the label to be size 8 and the input size 3. I've tried wrapping the input in its own div but the formatting looks really bad.
<div class="form-group">
<div class="col-xs-8">
<asp:label class="control-label dark-label">Inititiating Date: (if different than request date)</asp:label>
<asp:TextBox ID="initDate" runat="server" class="form-control" placeholder="Inititiating Date"></asp:TextBox>
</div>
</div>
If I understand you correctly, you can add the label and the input grid classes (col-xs-)
Like this:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
<label class="control-label dark-label col-xs-8">Inititiating Date: (if different than request date)</label>
<input class="col-xs-3" type="text" ID="initDate" class="form-control" placeholder="Inititiating Date" />
</div>
I'm developing a form in Bootstrap 3 that is to have a series of text controls and an image. The form takes up 100% of its container, and the text inputs also are set to 100% width. This works well when I don't have to worry about an image. I use the bootstrap .form-control and .form-horizontal classes to make it work (code at the bottom):
Current Look
I need to put the image to the right of these form controls and decrease their width appropriately:
Mockup
I would simply put in another column in Bootstrap's grid system to handle this, but I'd also like the columns to go back up to full width when the image is done, as shown in the mockup image above. Something similar to the "tight" image layout in Microsoft Word. I've tried setting float:right; and display:inline-block' to the image class but it doesn't turn out correctly:
Not Working Yet
Anyone know how to make the design work like how I described it in the mockup?
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div>
<h2>New Guest</h2>
<form class="form-horizontal" role="form">
<img src="http://images.all-free-download.com/images/graphiclarge/man_silhouette_clip_art_9510.jpg" style="float: right; max-width: 200px; display: inline-block;" />
<div class="form-group" id="group-tbFirstName">
<label for="tbFirstName" class="col-sm-3 control-label">First Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbFirstName" placeholder="First Name" value="" />
</div>
</div>
<div class="form-group" id="group-tbLastName">
<label for="tbLastName" class="col-sm-3 control-label">Last Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="tbLastName" placeholder="Last Name" value="" />
</div>
</div>
<div class="form-group" id="group-optGender">
<label for="optGender" class="col-sm-3 control-label">Gender</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="optGender" placeholder="Gender" value="" />
</div>
</div>
<div class="form-group" id="group-tbAge">
<label for="tbAge" class="col-sm-3 control-label">Age</label>
<div class="col-sm-9">
<input type="number" class="form-control" step="any" id="tbAge" value="" placeholder="Age" />
</div>
</div>
<div class="form-group" id="group-dtDateOfBirth">
<label for="dtDateOfBirth" class="col-sm-3 control-label">Date of Birth</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="dtDateOfBirth" placeholder="Date of Birth" value="" />
</div>
</div>
</form>
</div>
</body>
</html>
The specific effect I'm going for is to have the inputs below the image expand out to 100% again. Like this:
I know that the image can be floated but I don't want all the inputs below it at the same width as the ones on the lines with the image. I want them to expand.
You just need to add some floats to the image and also to the form, as in the following:
(FIDDLE)
HTML
<img class="img-right">
<form class="form-horizontal">
</form>
CSS
.img-right {
float: right;
max-width: 200px;
padding-left: 20px }
.form-horizontal {
float: right }
Have you tried putting the first 3 or 4 inputs and the image in their own row? This will cause the row to expand out to the width of the container and keep your image on the right. You can also add the class class="img-responsive" to the image so that it will shrink down as the screen shrinks.
<div class="row">
<div class="col-sm-8">
//inputs go here
</div>
<div class="col-sm-4">
//image goes here
</div>
</div>
<div class="row">
<div class="col-sm-12>
//the rest of your inputs here
</div>
</div>
I see many kinds of format column in your code. This makes it behave uncontrollable.
Try to use one format only, say, class="col-lg-6.
As long as I know, bootstrap use 100% for form-control, we can modify it by choosing the suitable class of columns.
To handle your need, you can create new CSS file. place it below the bootstrap.min.css. Then Float the image to the right and set the min-width and max width in % to make it resized automatically based on browser's windows.
Besides, use class='img-responsive' inside the image attr to make it resized auto.
Use float property float: right;
.img-right {
float: right;
max-width: 200px;
padding-left: 20px;
}
.form-horizontal {
float: right;
}
<img class="img-right">
<form class="form-horizontal">
</form>
I need my 2 inputs which placed inline to have width of parent div which defines col-md-6 and col-md-3. Right now inputs are aligned correctly but have width which in one case less than col-md-6 and in second case more than col-md-3. How to make this inputs have width col-md-6 and col-md-3 correspondingly?
<div class="col-md-9">
<form action="" role="form" class="form-inline">
<div class="col-md-6">
<div class="form-group">
<label for="iR" class="sr-only">i R</label>
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" />
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="iS" class="sr-only">i S</label>
<input type="text" class="form-control" id="iS" placeholder="some mid long explanation 2" />
</div>
</div>
</div>
As others have mentioned, you need to specify custom widths with inline forms. From the docs:
Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
In your case, you need to specify width: 100% for both the input and the form-group:
<div class="form-group" style="width: 100%">
and
<input type="text" class="form-control" id="iR" placeholder="some mid long explanation" style="width: 100%" />
Working example in JSFiddle
Just put style="width: 100%;" on the input; Btw, you are missing a form closing tag.
Also if you look at bootstraps for any elements you set up most of the time they leave a bit of margins. So if you don't want any margins just change the margins to 0.