When I view my project on a desktop all the dropdowns are aligned and flush which looks really nice, when I minimize the browser to view on a mobile this is what it looks like,
As you can see all the dropdowns are difference sizes, I'm not sure how this happened? I'm aware it takes into considering the content you have in each i.e how long each word is but is there a safe way within bootstrap I can achieve a fixed width for all dropdowns wether its being viewed on a mobile/tablet or desktop? this is my current markup for the above picture
<div class="row col-lg-12">
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">Country</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedCountry, Model.UserDetails.ListCountries, "Please Select Country", new { #class = "form-control", onchange = "javascript:this.form.submit();" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">State</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedState, Model.UserDetails.ListStates, new { #class = "form-control", onchange = "javascript:this.form.submit();" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
<div class="row col-lg-12">
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">City</label>
<div class="col-lg-8 input-group">
#Html.DropDownListFor(m => m.UserDetails.SelectedCity, Model.UserDetails.ListCities, new { #class = "form-control" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
<div class="col-lg-5">
<div class="form-group">
<label class="col-lg-4 control-label">Postcode</label>
<div class="col-lg-8 input-group">
#Html.TextBoxFor(m => m.UserDetails.Postcode, new { #class = "form-control", Placeholder = "Your Postcode", maxlength = "12" })
</div>
</div>
</div>
<div class="col-lg-1"></div>
</div>
Should work since according to the Bootstrap example, any control with the .form-control class should have width:100% by default.
I noticed an issue with your class assignments for the rows though. It should look like so:
<div class="row">
...
</div>
and NOT:
<div class="row col-lg-12">
...
</div>
Let me know if that helps!
Related
I have form, it been created within a register-box and want to widen the width to allow other controls like input text be created. Is there a way i can do this on bootstrap? please advised me below to my logic. I am struggling to achieve this and have not found relevant examples on the documentation on bootstrap, kindly please assist to improve this logic better. My register box is within a center and want to find a way to widen its width.
<center>
<div class="register-box ">
<div class="register-logo">
</div>
<div class="card">
<div class="card-body register-card-body">
<center>
<img src="~/Images/eNtsa.png" />
</center>
<center>
<p><b>Training Course Registration:Motion MasterClass</b></p>
<hr />
<p>Course date: 25-27 February 2020</p>
<hr />
<p>
Note:Please note your registration is submit approval as seats for this course is limited. Once your registration is confirmed, you will receive a quote for subject to your confirmation
followed by an invoice.
</p>
</center>
<hr />
#using (Html.BeginForm("editRegForm", "Home", FormMethod.Post, new { #role = "form" }))
{
#Html.AntiForgeryToken()
<div class="row">
<label for="Title"> Title: </label>
<div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
<div class="input-group pull-left">
#Html.TextBoxFor(m => m.Title, new { #class = "form-control", type = "text", id = "title", autofocus = "autofocus", placeholder = "Title", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="row">
<label for="Name">Name:</label>
<div class="input-group col-md-6 col-md-offset-8 col-sm-10 col-xs-10">
<div class="input-group pull-left">
#Html.TextBoxFor(m => m.FirstName, new { #class = "form-control", type = "text", id = "firstname", autofocus = "autofocus", placeholder = "First Name", required = "required" })
<div class="input-group-append">
<div class="input-group-text">
</div>
</div>
</div>
</div>
</div>
<hr/>
<div class="row">
<div class="col-md-2">
<label for="LastName">LastName:</label>
</div>
<div class="col-md-10">
#Html.TextBoxFor(m => m.LastName, new { #class = "form-control", type = "text", id = "lastname", autofocus = "autofocus", placeholder = "Last Name", required = "required" })
</div>
</div>
}
</div>
</div>
</div>
</center>
redefine the classes
.login-box and .register-box
Update the width:
width: 450px;
I have a drop down.
<div class="row">
<div class="col-md-4 col-sm-12">
<div class="col-md-5">
#Html.Label("Project", htmlAttributes: new { #class = "Label_small_bold" })
</div>
<div class="col-md-7">
#Html.DropDownListFor(model => model.InspectionReport.ProjectID, new SelectList(ViewBag.ListProjects, "ID", "ProjectNo"), "-Select-", new { #class = "form-control input-sm pull-right text-box single-line" })
</div>
</div>
...
It's good but when I get an item with long text then it goes out of the window to the right.
Why?
I have following grid structure
<div class="row">
<div id="A" class="col-md-3">
<div class="alert alert-info">A</div>
</div>
<div id="B" class="col-md-6">
<div class="alert alert-danger">B</div>
</div>
<div id="C" class="col-md-3">
<div class="alert alert-info">C</div>
</div>
</div>
I want to show B first when mobile (But when big device other than mobile then it should show as above) and also WHEN mobile all A,B,Cwill be in equal width. I have tried as following
<div class="col-md-3 col-md-push-6">
<div class="alert alert-info">A</div>
</div>
<div class="col-md-6 col-md-pull-3">
<div class="alert alert-danger">B</div>
</div>
<div class="col-md-3">
<div class="alert alert-info">C</div>
</div>
Also tried in many combination nothing working
WHEN big screen like desktop
When mobile
Try this one :
<div class="col-sm-6 col-sm-push-3">
<div class="alert alert-danger">B</div>
</div>
<div class="col-sm-3 col-sm-pull-6">
<div class="alert alert-info">A</div>
</div>
<div class="col-sm-3">
<div class="alert alert-info">C</div>
</div>
Or DEMO here.
I used javascript to implement this functionality. I am first finding bootstrap environment and according to it i am arranging divs.
var current='';
function findBootstrapEnvironment() {
var envs = ['xs', 'sm', 'md', 'lg'];
var $el = $('<div>');
$el.appendTo($('body'));
for (var i = envs.length - 1; i >= 0; i--) {
var env = envs[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
}
if(findBootstrapEnvironment()=="sm"&&findBootstrapEnvironment()!=current){
current=findBootstrapEnvironment();
var a=$('.row').children()[0];
var b=$('.row').children()[2];
$('.row').children()[0].remove();
$('.row').children()[1].remove();
$('.row').append(a);
$('.row').append(b);
console.log(current);
}
$( window ).resize(function() {
if((findBootstrapEnvironment()=="sm"||findBootstrapEnvironment()=="md")&&findBootstrapEnvironment()!=current){
current=findBootstrapEnvironment();
var a=$('.row').children()[0];
var b=$('.row').children()[2];
$('.row').children()[0].remove();
$('.row').children()[1].remove();
$('.row').append(a);
$('.row').append(b);
console.log(current);
}
});
Demo : https://jsfiddle.net/oog0gdph/
<div class="col-xs-12 col-sm-6 col-sm-push-4 " >B</div>
<div class="col-xs-12 col-sm-pull-6 col-sm-3" >A</div>
<div class="col-xs-12 col-sm-3">C</div>
I'm trying to push my form-control to the left beside of my paragraph. Which won't work it always put below of the paragraph.
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class = "panel-body">
<p class = "thicker">STUDENT ID</p>
<div class = "col-xs-3">
<input class = "form-control" name = "search">
</div>
</div>
</div>
<div>
<div>
Add col-xs-3 to your p tag and change the order of the elements inside the panel-body from
<div class = "panel-body">
<p class = "thicker">STUDENT ID</p>
<div class = "col-xs-3">
<input class = "form-control" name = "search">
</div>
</div>
to
<div class = "panel-body">
<div class = "col-xs-3">
<input class = "form-control" name = "search">
</div>
<p class = "thicker col-xs-3">STUDENT ID</p>
</div>
UPDATE Using bootstrap built in functionality
Bootstrap has already a functionality for what you are trying to do see http://getbootstrap.com/css/#forms-horizontal . Using the built in functionality might make things easier for you in the future when the window is being re-sized, etc. Here is what the code will look like
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<div class = "panel-body">
<form class="form-horizontal">
<div class="form-group">
<label for="studentID" class="col-xs-3 control-label">Student ID</label>
<div class="col-xs-3">
<input type="text" class="form-control" name="search" placeholder="Search">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
For some this will be quite easy, I have the following web page which is exactly what I'm looking for, which aligns in the middle of the page
But when I minimize this down to see how it renders when on a mobile screen it looks like this
How on earth is someone going to write an email address in that? can someone tell me what I'm doing wrong, this is my HTML
<div class="row">
<div class="container">
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { #class = "form-inline" }))
{
<div class="row">
<div class="col-xs-12 text-center">
<p class="text-center">
<strong>Enter your email and get special information:</strong>
</p>
</div>
</div>
<div class="row">
<div class="col-xs-3"></div>
<div class="col-xs-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /.col-xs-12 -->
<div class="col-xs-3"></div>
</div><!-- /.row -->
}
</div>
Use more than just the XS (extra-small screens) grid when specifying columns
Don't waste space on blank columns on XS screens.
Try something like:
<div class="row">
<div class="hidden-xs col-sm-3"></div>
<div class="col-xs-12 col-sm-6">
<div class="input-group input-group">
#Html.TextBoxFor(m => m.EmailAddress, new { #class = "form-control", placeholder = "Email address" })
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Submit</button>
</div><!-- /btn-group -->
</div><!-- /input-group -->
</div><!-- /col -->
<div class="hidden-xs col-sm-3"></div>
</div><!-- /.row -->
Bumped the input-group up to a full row on XS screens
Only started making the input-group narrower on SM (small) screens