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.
Related
I am using Select2, with Bootstrap v5.1.x.
The reason of using Select2 is to have the search functionality in html select.
I want to be able to achieve something like Bottom Drawer in the mobile responsive view. That is, when a select (with select2 implemented) is opened in a Web View App, it opens like the Bottom Drawer with the Select2 search at the top of the bottom drawer and the options list below it. There are 200+ options to select from.
This is needed in html, css, js only.
I was earlier using normal html select which in mobile view opened in a modal (example - view in mobile). But the moment I add the Select2 it opens like normal html select opens in web view.
<label for="ctr_mobile" class="gxcpl-subtitle-2">ISD Code and Mobile</label>
<div class="input-group mb-3">
<cms:hide>
<cms:input name="ctr_isd" id="ctr_isd" type="bound" />
</cms:hide>
<select class="js-example-basic-single form-select" name="f_ctr_isd" id="f_ctr_isd" style="width: 50%">
<option value="-" selected disabled>Country</option>
<cms:pages masterpage="app/support-files/import-country.php" order="asc" orderby="country_name">
<option value="<cms:show k_page_id />" data-id="<cms:show country_isd />">
<span class="flag-icon <cms:show country_flag/>"></span> <cms:show country_name /> (+<cms:show country_isd />)
</option>
</cms:pages>
</select>
<cms:hide>
<cms:input name="ctr_mobile" id="ctr_mobile" type="bound" />
</cms:hide>
<input name="f_ctr_mobile" id="f_ctr_mobile" type="tel" class="form-control" placeholder="" />
</div>
The JS for Select2 is:
<script src="<cms:show k_site_link />assets/js/select2.js"></script>
<cms:if k_template_name=="app/index.php">
<script type="text/javascript">
$(document).ready(function() {
$('.js-example-basic-single').select2();
$('select#f_ctr_isd').select2().addClass('form-select');
});
</script>
</cms:if>
I will be really thankful for any guidance possible.
Regards and Thanks in advance!
I am trying to make a html page in my angularjs application. I have a input box and one dropdown side by. My Input box has size and i want to make the dropdown expansion with same size as my input box.
My Html Code,
<body ng-controller="Controller">
<h1>Plunkr Example</h1>
<fieldset style="border:1px solid black;">
<legend>Data</legend>
<span style="float:right">Check4: <input type="input" id="input"
ng-repeat="x in string | filter : 'check'"
ng-model="x._text"/>
<select id="dropdown">
<option value="1">True</option>
<option value="2">False</option>
<option value="3">Edit</option>
</select>
</span>
</fieldset>
</body>
And Controller code,
$scope.string = [
{"_attributes":{"name":"comments"},"_text":"comments"},
{"_attributes":{"name":"check"},"_text":'Some Content Here'},
{"_attributes":{"name":"value"},"_text":123}
]
I also made a plunkr to demonstrate where the current layout is like this, with some gap between inputbox and dropdown. I tried to remove space by padding:0 and margin:0 but no success.
And what is want is,
And on click on dropdown the options should come beneath the input box with same size, like below
Also if user select True/false , the input box should become readonly. It should be editable only if the Edit option is selected.
Please suggest , how this can be achieved. Many thanks in advance.
You can use something like following to select option:
<select id="dropdown" ng-model="selectedOption">
<option ng-repeat="option in options" value="{{option.isEditable}}">{{option.value}}</option>
</select>
And use this value as ng-disabled as follow:
<input type="input" id="input"
ng-repeat="x in string | filter : 'check'"
ng-disabled="{{selectedOption}}"
ng-model="x._text"/>
Hope this helps!
If a item is selected it is not possible to see the full list by cliking the arrow as shown in the diagram.
<div>
<input type="text" id="client" list="allclients" placeholder="Start typing..." value="" />
<datalist id="allclients">
<select>
<option value="Jack">Jack</option>
<option value="John">John</option>
</select>
</datalist>
</div>
If the user select one he cannot see the full list unless input is cleared again. Is there a way to get rid of this limitaion.
This is the expected behavior and what I asked is not possible. The list supposed to get filter by the user input text.
Possible solutions for this issue can be solved using one of these
http://pebbleroad.github.io/combo-select/
http://jqueryui.com/autocomplete/#combobox
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>
<input type="checkbox" ID="RecquireFacebookInvitesCB" />Require
<select>
{section name=foo start=5 loop=50 step=1}
<option value="{$smarty.section.foo.index}">{$smarty.section.foo.index}</option>
{/section}
</select>
this many Facebook invites before entering sweepstakes
I have the above html (with smarty-php formatting tags) that produces two form elements and some text as displayed in my screen shot. I'd like to make this display as:
[CHECKBOX] Require [SELECTION LIST] Facebook invites before entering sweepstakes
I have my own ideas on how to implement this but I'm wondering what the best approach would be. Thanks!
Try changing your code to this:
<input type="checkbox" ID="RecquireFacebookInvitesCB" /><label for="RecquireFacebookInvitesCB">Require</label>
<select>
{section name=foo start=5 loop=50 step=1}
<option value="{$smarty.section.foo.index}">{$smarty.section.foo.index}</option>
{/section}
</select>
this many Facebook invites before entering sweepstakes