Here is my existing view.
I do not understand why the textbox for "bbbbbbb" does not take the same width as column "aaaaa".
I set the border on the div and it clearly illustrates the width.
Why does the input element not fill the contents of the div?
<div class="container">
<div class="row" style="padding-top:10px;">
<div class="col-sm-2">
<label for="mtc">aaaaaa</label>
</div>
<div class="col-sm-10">
#(Html.Kendo().MultiSelect()
.Name("mtc")
.DataValueField("aaa")
.DataTextField("bbb")
.Placeholder("Select Map Type Codes...")
.AutoBind(false)
.DataSource(src =>
{
src.Read("Action", "Controller");
})
)
</div>
</div>
<div class="row" style="padding-top:10px;">
<div class="col-sm-2">
<label for="bb">bbbbbbb</label>
</div>
<div class="col-sm-10" style="border:solid">
<input type="text" style="width:100%;" class="k-textbox" id="bb" />
</div>
</div>
<div class="row" style="padding-top:10px;">
<div class="col-sm-2"></div>
<div class="col-sm-10">
<input type="submit" value="Submit" id="btnSubmit" class="btn btn-primary" />
</div>
</div>
</div>
Related
I have small issue with bootstrap grid system , I have a row that has grid setup with two sections with col-md-6 , Now problem is when i zoom my browser more than 100% my Close label and input is moving to next line. I want them to stay same place all the time zoom should not effect the position of the rows.I tried to use col-xs-1 but it does not work. How can i achieve that task using bootstrap ?
main.html
<div class="row">
<div class="container col-md-6">
<div class="form-group">
<label class="col-md-5">Actual Cycle Start:</label>
<div class="col-md-7">
<div class="row">
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-md-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="form-group col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-md-5">Challenges
Outstanding:</label>
<div class="col-md-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
main.css
.changeWdh{
width: 152px;
}
EDIT: try this:
<div class="container">
<div class="row">
<div class="col-6-md">
<div class="col-md-7">
<div class="row">
<div class="col-xs-1">
<label class="col-md-5">Actual Cycle Start:</label>
</div>
<div class="col-xs-5">
<input class="form-control" ng-model="riskAssessmentDTO.cycleStartDate"
k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
<div class="row">
<div class="col-xs-1">
<label class="control-label"> Close:</label>
</div>
<div class="col-xs-5 changeWdh">
<input class="form-control" ng-model="riskAssessmentDTO.cycleEndDate" k-format="'MM/dd/yyyy'" disabled />
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 fieldHeight">
<label for="challengeOutstand" class="col-xs-5">Challenges
Outstanding:</label>
<div class="col-xs-7">
<input type="text" class="form-control" id="challengeOutstand"
name="challengeOutstand" maxlength="256"
ng-model="riskAssessmentDTO.challengesOutstanding" disabled />
</div>
</div>
</div>
place your col-5 and col-1 into row div's or make them both into xs, not one md and one xs, and place them into a div container class "col-md-6"
How can I have all align horizontal the below code renders as shown in the screen 1 and but I'm trying to have as shown in screen 2
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Number</label>
</div>
<div class="col-xs-3">
<input type="text" id="number"></input>
</div>
<div class="col-xs-3">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="row">
<div class="col-xs-3">
<label for="inputEmail3" class="col-sm-4 control-label">Tag</label>
</div>
<div class="col-xs-3">
<input type="text" id="Name"></input>
</div>
<div class="col-xs-3">
<button class="btn btn-default" type="button">Go!</button>
</div>
</div>
</div>
Screen shot 1:
Screen shot 2:
Your HTML structure is incorrect; you're nesting columns and rows and then columns inside columns for no reason. Docs
See example.
(*The columns are XS as in your example which in this case will not render very well from a mobile screen, consider using SM)
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<form class="myForm">
<div class="form-group">
<label for="Number" class="col-xs-2 control-label">Number</label>
<div class="col-xs-4">
<input type="text" class="form-control" id="Number" />
</div>
</div>
<div class="form-group">
<label for="tag" class="col-xs-2 control-label">Tag</label>
<div class="col-xs-4">
<div class="input-group">
<input type="email" class="form-control" id="tag" /> <span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
</div>
</div>
</div>
</form>
</div>
</div>
i am trying to control my width's for my input but i am having some trouble. Here is my mark up
<section class="bg-lb pt40 pb40 btborder">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="bg-white ">
<div class="pt40 pb40">
<a class="btn btn-default hvr-fade">Login</a>
<span id="cricle"><b>OR</b></span>
<a class="btn btn-default hvr-fade">Register</a>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span></div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span></div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
<a class="btn btn-default hvr-fade"><b>LOGIN</b></a>
</form>
</div>
</div>
</div>
</div>
</section>
im just simply trying to reduce the width of the input and center the form,
live preview here
http://plnkr.co/edit/RN6tPNCynK2lEdTeWmFQ?p=preview
If you want to continue using the grid system you can change the way your col-'s are setup.
Change:
<div class="row">
<div class="col-sm-12">
<div class="bg-white">
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</form>
</div>
</div>
</div>
To:
<div class="row">
<div class="bg-white">
<form>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-person"></span>
</div>
<input type="text" id="" class="form-control" placeholder="Username">
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><span class="ion-android-lock"></span>
</div>
<input type="password" id="" class="form-control" placeholder="Password">
</div>
</div>
</div>
</form>
</div>
</div>
The main difference is that <div class="col-md-6 col-md-offset-3"> is now specifically wrapping the <div class="form-group">. Where the col-md-offset-3 is what will be centering your form.
Or to go a bit further, create a new <div class="row"> for each <div class="form-group"> instead of embedding all columns into one row.
The bootstrap way is to reduce the width of the column the form is in. With 3 columns you can center the form:
<div class="col-sm-3"></div>
<div class="col-sm-6">form comes here</div>
<div class="col-sm-3"></div>
http://plnkr.co/edit/DSroqJsfQBTuwBUgo3ps?p=preview
Just override bootstrap .css in a particular place. Try this for eg:
put it inside the css:
input.form-control{
max-width: 100px;
}
input.form-control will override every input with class set to : form-control
Or you can shrink the entire container class
.container{
max-width: 250px;
}
Test here : http://plnkr.co/edit/kR69nCvsDCp9AlQqZztY?p=preview
I am creating a form using Bootstrap and the text input widths are too long. I tried to set the width = 35% of class form-control in bootstrap.css and it looks ok, but when I resized the screen it overlapped the other <div>. As of now I changed it back to 100%. And it is too long and it overlap the other <div>.
Here is my code:
<div class="col-sm-10">
<div class="col-sm-12">
<div class="col-sm-6">
<h4>LOGIN</h4>
<div class="panel panel-default" style="border: solid 2px black">
<div class="panel-body" style="min-height: 456px">
<div class="row">
<div class="container">
<div class="col-sm-12">
<form role="form">
<div class="form-group">
<h4>REGISTER</h4>
<p>Please login to take advantage of promotions and benefits reserved to registered users.</p>
</div>
<div class="form-group" style="margin-top: 35px">
<h5>EMAIL ADDRESS* </h5>
<input type="text" class="form-control" />
</div>
<div class="form-group">
<h5>PASSWORD* </h5>
<input type="password" class="form-control" />
</div>
<div class="form-group">
<span><input type="checkbox" style="margin-top: 20px" /></span><span> Remember me next time</span>
</div>
<div class="form-group">
<span>
<button type="button" class="btn btn-default" onclick="location.href='register.html'" >REGISTER NOW</button>
</span>
<span>
Forgot your password?
</span>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<h5> </h5>
<div class="panel panel-default" style="border: solid 2px black">
<div class="panel-body" style="min-height: 456px">
<h5>NEW USER</h5>
<div class="register-notify">
<p>Register now and enjoy the benefits of My Account. Only registered users can:</p>
<p>- Access to your personal information through My Account</p>
<p>- Use the Wish List to save their favorite products</p>
<p>- Complete the checkout process more quickly</p>
</div>
<div style="margin-top: 150px">
<input type="button" value="REGISTER NOW" class="register-button" onclick="location.href='register.html'" />
</div>
</div>
</div>
</div>
</div>
Change the class of the div tag to col-sm-6. This should do the trick.
<div class="container">
<div class="col-sm-6"> <!--The div tag before the form-->
<form role="form">
Check out the demo here.
I am new to Bootstrap and Bootstrap 3.. I assume I should always use percentages to specify widths and never fixed values.. is that correct.
I need my row to not go to the whole screen, but only take up as much room as it needs based on the inner elements..I asssume I need to just set the width of the row.. or is there another way?
<div class="row" style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="col-xs-1">
<label style="width:100px;display:block">FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label style="width:100px;display:block;">Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</fieldset>
</div>
I imagine this is what you are going for. The col-... divs must be immediate children of the row div.
http://jsfiddle.net/742qj/
<div style="width:80%">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
Or perhaps
<div clas="row">
<div class="col-lg-2">...</div>
<div class="col-lg-10">
<fieldset>
<legend>DashBoard Details</legend>
<div class="row">
<div class="col-xs-2">
<label>FirstName</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<label>Age</label>
</div>
<div class="col-xs-2">
<input type="text" />
</div>
<div class="col-xs-1">
<input type="submit" />
</div>
</div>
</fieldset>
</div>
</div>