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>
Related
I'm using datepicker but finding a problem, when trying to select the year or month with the select list the first time showing goes of on top and bottom with no scrolling available, after closing it and open it like 3 times it works as the example from the official page, I've been trying to find out if there is a problem with position or something but can't seem to figure it out, in the google inspector I see that every time I open it and close it, gets different height and top values.
My code for the input is this:
<div class="input-field col s6">
<input asp-for="DateOfBirth" type="text" class="validate datepicker" value="#DateTime.Now.ToString("dd/MM/yyyy")">
<label for="DateOfBirth">* Fecha de <span id="texto-nacimiento">Nacimiento</span></label>
<span asp-validation-for="DateOfBirth" class="helper-text red-text"></span>
</div>
I have a select that looks as follows:
<select id="select-full"
title="Make selection"
class="form-control form-custom input-sm"
name="Select"
ng-model="form.select"
ng-options="select.displayName as select.text for select in selects | orderBy:'text'">
<option value="">Any</option>
</select>
Some of the text populated by ng-options is very long, and so I plan to have the ones that would cause overflow to have trailing ellipses.
But I wanted to know if, additionally, there is a way to make it so that mousing over one of the options within the select to have a tooltip display the full entry? So that the user could inspect the full entry before making a choice. Whether it is in the HTML or angular controller doesn't matter.
If there isn't a way, that is a fine answer, but doing some searching hadn't yielded an answer as to whether exactly what I want to do here is doable.
Thanks!
You can use uib-tooltip as :
<span tooltip-append-to-body="true" uib-tooltip="{{select.displayName}}" tooltip-placement="right">{{select.displayName}}</span>
Here tooltip-append-to-body="true" will move your tooltip to parent scope so that it is not chopped off in selections div.
Learn more about it on Uib Angular
I have a Bootstrap select menu for a "state" form field. On larger devices, I have labels for each dropdown but on smaller devices, they are hidden. So in order for the smaller devices to know what the menu is for, I have the word "state" as the first dropdown option.
<div class="form-group">
<label class="col-sm-3 control-label" for="textinput">*State</label>
<div class="col-xs-5 col-lg-3">
<select id="state" class="form-control" name="state">
<option value="State">State</option>
<option value="AA">AA</option>...
Is there a better way to include the word "state" without it being an option value? Either way, how can I have it show for smaller devices, but remain hidden for larger devices (where the label will show)?
Thanks
You could use a media query to define the screensize:
#media (min-width: 768px) {
}
Then target whatever you didn't want to show within the CSS?
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.
I have a HTML page that uses CSS' #media to display a form based on width.
On a small screen, the select option will be displayed and on large screen, the radio button will be displayed.
I have a problem on the large, if the user had selected the radio button option, the server will get the select option, not the radio button.
How can I disable the select option on the large screen?
<div class="visible-phone">
<select class="input-block-level" name="paymentType" >
<c:forEach items="${sessionScope.paymentMethodList}" var="item" varStatus="index">
<option value="${item.id}"><c:out value="${item.pymntName}"/></option>
</c:forEach>
</select>
</div>
<div class="hidden-phone">
<c:forEach items="${sessionScope.paymentMethodList}" var="item" varStatus="index">
<label class="radio"><input type="radio" name="paymentType" value="${item.id}">
<c:out value="${item.pymntName}"/> </label>
</c:forEach>
</div>
Please refer below URL for information related to how to detect the device using JQuery:
jQuery mobile user agent detection
You need to show/hide the visible-phone/hidden-phone sections based on the device.