I'm developing a web site where users can search for customers. Part of the search allows them to filter by country, state or city. In order to balance flexibility for those on big devices and a neat UI for those on small devices, I've added four input controls, one each for country, state and region, all to be shown on big devices, and one combined control for location to be shown in small devices.
This is all using the standard stuff that comes when you start a new MVC project in Visual Studio 2013. The HTML looks like this...
<div class="form-inline form-group" id="filterGroup">
<span style="white-space: nowrap"><label for="namefilter">Name:</label> <input id="namefilter" type="text" class="form-control k-input k-textbox" /></span>
<span style="white-space: nowrap"><label for="locationfilter" class="visible-xs">Location:</label> <input id="locationfilter" type="text" class="form-control k-input k-textbox visible-xs" /></span>
<span style="white-space: nowrap"><label for="countryfilter" class="hidden-xs">Country:</label> <input id="countryfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><label for="regionfilter" class="hidden-xs">State:</label> <input id="regionfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><label for="cityfilter" class="hidden-xs">City:</label> <input id="cityfilter" type="text" class="form-control k-input k-textbox hidden-xs" /></span>
<span style="white-space: nowrap"><button id="filterBtn" class="btn btn-primary btn-sm">Filter</button> <button id="clearBtn" class="btn btn-primary btn-sm">Clear</button></span>
</div>
Now when you view this on a big device, it looks fine...
(Note that the HTML appears inside the toolbar section of a KendoUI grid, but that's not relevant to the problem, as the issue is exactly the same if I place it directly in the body of the document)
However, if you view it on a small device (or just make the browser window narrow), it looks poor...
The location textbox is on a separate line from the label, which it shouldn't be, as they are both wrapped in a span with white-space set to nowrap, there is a large margin above the location textbox, and the two buttons are pushed down onto yet another line. All of this should fit on one line, but instead looks ugly and takes up far too much space.
Any ideas what I did wrong? I want the name and location controls on one line, preferably with the buttons as well.
If you want proper responsive layout using BootStrap3, you should use the 12-grid system.
In your form, use the <div class="row"> and <div class="col-md-2"> (or whatever size suits you) in order to properly format it.
More specific to forms, you have an example of a properly formatted one here http://getbootstrap.com/css/#forms-horizontal
More info here: http://getbootstrap.com/css/#grid
Related
I have created one application by using ASP.Net. Here my problem is Date input field in aligning correctly in Firefox but in Chrome it is displaying bigger than all other text boxes.
Here is the code for Date Field,
<div class="input-group date form_date dob" data-date="" data-date-format="dd-mm-yyyy" data-link-field="dtp_input2" style="width:176%">
<input class="form-control" tabindex="5" size="12" #*required="required"*# data-date-format="dd-mm-yyyy" type="text" id="txtDOB" data-bind="date:DOB,value:DOB" #*readonly*#>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span></div>
<input type="[enter image description here][1]hidden" id="dtp_input2" data-bind="value:DOB" /><br /
I have attached the screen shots of both browsers output. Can any one help me on this.
In face, there is no way but to keep that. Each browser could render HTML elements in different manners. So you have two options:
1- Use a date plugin. It will make your app look like the same in any browsers.
2- Set the height of all boxes to the largest rendered version.
I'm quite new here. In this simple bootstrap site, I have an input field with a label in front of it. It looks fine in my browser with default value 1.00, and it's responsive when I resize my browser. However that input filed becomes very small when I accessed the site through some other people's computers. The default value also disappeared. Is there anything wrong with how I defined this field? Many thanks in advance!
<div class="col-lg-4 col-lg-offset-4">
<div class="input-group">
<span class="text-center input-group-addon" id="sizing-addon2">Amount</span>
<input class="form-control" type="text" id="amount" aria-describedby="sizing-addon1" value="1.00">
</div>
</div>
I created a website called diditdrop.com. Within the website there is a form where the user enters a number and then submits the number. On the desktop version of the site, the form works great. On the mobile version, the form is not responsive (i.e. i tap on the screen and nothing focuses or pops up. Additionally, the button underneath it doesn't work either).
I'm not sure what to do. I've been stuck on it for a few hours now. I've pasted a snippet of my code below, however, it doesn't look too strange. If someone could take a look at my site, and then recommend a better way of implementing, I would sincerely appreciate it.
<form class = "form-inline" action="https://formspree.io/x#gmail.com" method="POST">
<div class= "form-group">
<span>
<input type="tel" id = "form1" placeholder="digits here" tabindex="1" class="boxed form-control" name="number"/><br>
</span>
<span>
<input type="submit" id = "buttonmove" class="btn boxed" value="get dat new new"name="number" />
</span>
</div>
</form>
Add the following code it will work:
add the style="float:left" to the image like below
<div id="pictureface" class="col-lg-6">
<img style="float:left" class="img-responsive" src="http://static.stereogum.com/uploads/2016/09/CtUYD4uWYAIB1MH-1475280486.jpg">
</div>
I have a basic Bootstrap input group with an input and button. Everything looks fine when the browser is a "normal" width. However when I extend it to a 2nd monitor there is a space that appears between the input control and the button. Looked around, but I have been unable to find a solution that will keep these together in a way similar to how the btn-group works.
Here's my code:
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="input-group">
<input id="SearchText" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
Thanks in advance!
Update:
After messing with this a little more, it appears it has something to do with the column attributes. If I make the outer div col-md-1 instead, it won't create the space. However this makes the input too small for what I need it for. Also, I'm guessing that if I extended the browser far enough the space would reappear.
Found a solution that appears to work so I thought I'd share it in case others have a similar issue.
After looking at this more, I discovered that the separation of the input from the button was happening whenever the input control reached its maximum width. In order to maintain the desired proportion dictated by the column attribute tags it created a space between the input and the button (why it doesn't just add blank space after the button, I don't know). There are two ways I found to accomplish what I was wanting:
The first is to directly adjust the maximum width of the input control. This allows the input control to expand and fill the extra space. This can be done in a number of places (css stylesheet, jquery/javascript, or in the tag itself in the html). I went ahead and included it in the stylesheet.
The second way is to include a col-lg-* attribute that is smaller than the col-md-* attribute. This reduces the proportion of the size of the input control in relation to the screen and reduces the likelihood it will reach it's maximum width (it also keeps your input control from expanding nearly as much). (Note: if you use this method I would suggest adjusting the minimum width of your input controls to keep a more consistent size).
In the end I ended up using both methods to keep my input controls about the same size and ensure that someone would have to use a ridiculously large monitor to separate the input and button.
CSS:
input.form-control {
max-width: 400px;
min-width: 200px;
}
HTML:
<div class="row">
<div class="col-md-2 col-md-offset-1 col-lg-1">
<div class="input-group">
<input id="SearchText" class="form-control" type="text">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
Hope this helps someone
I use Bootstrap 3 and i have a multiple datepicker (from - to). It work well on a compute however i have problem for mobile phone compatibility. My input group overflows the screen and do not resize all the group.
In case of small device, i would like to have the the group on 2 rows:
- the first with the addon From + its datepicker
- the second with the addon To + its datepicker
how could i do ?
my html:
<form class="form-horizontal">
<div class="form-group">
<div class="input-daterange" style="padding-left: 15px; padding-right: 15px" id="datepicker" >
<div class="input-group">
<div class="input-group-addon">From</div>
<input type="date" class="form-control" name="beginDate" id="beginDate"/>
<div class="input-group-addon" for="endDate">To</div>
<input type="date" class="form-control" name="endDate" id="endDate"/>
</div>
</div>
</div>
</form>
EDIT : I know it have to be done in css with #media, but how to get to the line only after the first datetimepicker ?
Bootstrap doesn't support multiple input fields within a single input group, regardless of browser:
Basic example
Place one add-on or button on either side of an input. You may also place one on both sides of an input.
We do not support multiple add-ons on a single side.
We do not support multiple form-controls in a single input group.
This would have to be done in the css.
So if you look at your bootstrap.css and scroll down to any #media 746px(I think its that many pixels it is for mobile) you should see examples of how they handle when the screen gets re sized. Mobile is just a screen size that is really small on a computer browser.