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.
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 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
Im having trouble with creating my form which is placed in a tab-pane. It seems that my labels and input
elements are crossing each others bounderies when labels are to long or the window made smaller
My code can be seen here .. please notice that labels and inputs dont stay aligned when window size changes. It seems like making rows and columns inside tab-pane is not working the same way as when they are created outside that class.
http://www.bootply.com/I3Iwdr4UVj
It's as if the input element does not know the boundry of the label ..
Are there other ways to nicely create the form inside my tab-pane ? ..
First of all, try to give a className with wider width, .col-sm-2 is too narrow for a label:
<div class="form-group">
<label class="control-label col-sm-5" for="pwd">Password:</label>
<div class="col-sm-7">
<input type="password" placeholder="Enter password" id="pwd" class="form-control">
</div>
</div>
I would suggest you always try to get the sum of 12 when you use Bootstrap classes.
I have a select form that has a list of currencies as options when my screen is at full size the select input works fine but the second I resize it to anything smalller I can only change my select option once. After that the clicks will not register and the mouse will not focus on the select unless I go back to a full sized screen. I also can't seem to reproduce the problem, I am using angular js
<div class="col-xs-6">
<select required="required" ng-model="currency" name="type" default-option="Select Currency" class="form-control m-b">
<option>Yuan</option>
<option>JPY</option>
<option>USD</option>
</select>
</div>
I want to make a HTML form for a webpage that is re-size-able ranging form full HD to smartphones. I want the distance form the label to the input to be the same distance such that if the form was to be placed in a div that for instance is 600px and the label and input field as line totals to 300px (including padding,margin, etc) that the fields order in 2 columns. If the div than after re-size would become 900px the form would spread over 3 columns.
The fields should then be ordered in the following manner:
with 2 columns:
F1 F4
F2 F5
F3 F6
with 3 columns:
F1 F3 F5
F2 F4 F6
Now since i am relatively new to HTML and CSS i personally would do this with a lot of div's but that seems a little bit redundant or just as really bad coding. I tried to do this with a <span style="width:300px;"> but the span wont be 300 px nor will it include the input field.
my current form:
<div class='main_text' style='width:55%;padding-left:10%;padding-right:10%;'>
<label>Name:</label>
<input id="name" type="text" value='Name'/><br />
Age:
<input id="age" type="text" value='21'/><br />
Insterests:
<input id="interests" type="text" value='Socer'/><br />
Targets:
<input id="targets" type="text" value='stop smoking for at least 2 years'/><br/>
Other:
<input id="other" type="text" value='I have 3 cats'/><br />
</div>
So the question in short is:
Is there a more efficient way to group-up a label with an input field so that they become block-like?
P.S. Im using XHTML 1.0 transitional
I suggest taking a look at existing frameworks like Bootstrap or Foundation that will provide you with a good base to start writing a responsive design.
For the record, a span is an inline element hence you cannot define a width on it. Declare it as display: inline-block; and you'll notice the width property is now respected.
It's common to see radio buttons and checkboxes element tuples wrapped from the label, like this:
<label> <input /> text </label>
However you will find more and better examples on bootstrap.
First of all: use the <label>´s "for"-attribute to link the label to the input-field:
<label for="name">Name:</label>
<input id="name" type="text" value='Name'/><br />
And then, no: if you want to "group them together", in a box with borders for example, the best is to use div. That´s my opinion.
EDIT:
I´m not that good at reading the whole question before I answer.
I agree that you should take a look at a responsive framework if you want to make things easier for you when you create web pages that should look great on mobile as well as desktop.
Twitter bootstrap is one: http://twitter.github.io/bootstrap/
Foundation is another: http://foundation.zurb.com/
Find one you like and try it out. Personally, I like Bootstrap the most.