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!
Related
My dropdown fields use a hidden dropdown field that updates a text input. The reason is because I use a field for 'state' and when a country other than the United States is selected, it turns into the text field that is being updated. There is also a presentation interactive dropdown menu that is separate from the native menu, that uses react to update the hidden dropdown, and the text field. This is all handled using one state through react.
The structure looks like this...
.hidden {
display: none;
}
<div class="wrapper">
<input type="hidden" name="state" autocomplete="shipping address-level1">
<div class="dropdown">
<i class="icon icon-drop-down" role="presentation"></i>
::before <!-- presentation of dropdown that sets the hidden dropdown -->
</div>
<select class="hidden">
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AS">American Samoa</option>
<!-- ... -->
</select>
</div>
Recently Chrome's autofill would not update the hidden select menu. Is this an issue with chrome? Has anyone else experienced this issue? Poking around I've found display: none and visibility: hidden cause the issue, but making the item visible will enable Chrome's autofill for the dropdown.
Any info would be greatly appreciated! Thanks!
I'm developing an android Augmented Reality app using wikitude Phonegap Plugin, and in some action, I need the user to complete a .
In this form, there are s and a . Inputs works nicely, however, after the use of the select, clicking in an input wont show keyboard after all.
I guess the problem is with Wikitude Ar, 'cause when I access the form html by its own, everything is OK. The bug happens when I access it inside the ArWorld or after using the ArWorld, even when I close it with wikitudePlugin.close().
Sorry for bad English, not main language. Hope someone have already experienced it.
Thanks in advance!
Edit: Here is what I've tried:
1 - Inserting the form inside a Jquery Panel
2 - using Jquery Load() to load a .html containing the form in a Jquery Panel
3 - closing the World with WikitudePlugin.close() and calling the form .html with window.open() and window.location.href = ;
Nothing Works.
When I call the form .html before opening a Ar World, it works
The HTML form is:
<body>
<h1>Cadastro de Fissura</h1>
<form action="">
<label for="fissuraObservacao">Observação</label>
<textarea name="fissuraObservacao" id="fissuraObservacao" cols="40" rows="3"></textarea>
<label for="fissuraFaceBloco">Face do Bloco</label>
<input type="text">
<select autofocus name="fissuraAlarme" id="fissuraAlarme">
<option value="1">Normal</option>
<option value="2">Alerta</option>
<option value="3">Urgente</option>
</select>
<input type="submit" value="Enviar">
<input type="reset" value="Limpar">
</form>
</body>
In javaScript, a button call a funcion with
document.location = 'architectsdk://action=openCadastroHtml';
which is used in
onURLInvoked: function onURLInvoke(url){
if (url.substring(22) == 'openCadastroHtml'){
app.wikitudePlugin.close();
//window.location.href = 'world/inspecao/cadastro.html';
window.open('world/inspecao/cadastro.html','_');
.
.
.
where cadastro.html is the HTML form
I am using a package for my Laravel application called Ticketit.
This utilises Summernote for text editing, however when I want to add links, pictures etc, the modal window that opens up for this provides no padding around the inputs.
I'm not great with CSS and I'm not sure why this is happening or what I can do to fix this.
You can view an example of what I am facing via the Ticketit demo site; http://ticketit.kordy.info/tickets/create. You can log in with admin#example.com and demo and it will take you to the ticket create page. On clicking to add a link you will see the below:
The modal body code looks like this:
<div class="modal-body">
<div class="form-group note-group-select-from-files">
<label>Select from files</label>
<input class="note-image-input form-control" type="file" name="files" accept="image/*" multiple="multiple">
</div>
<div class="form-group" style="overflow:auto;">
<label>Image URL</label>
<input class="note-image-url form-control col-md-12" type="text">
</div>
</div>
How can I provide some padding around the form labels and inputs so that they aren't touching the sides of the modal window?
Note, that the CSS for the Summernote inputs are provided via a CDN currently and so I can't edit the source for this directly - I am hoping there is a setting for Summernote I can change.
Otherwise I can just add some custom CSS in a seperate stylesheet.
You would need to change the padding on .modal-body:
.modal-body {
padding: 30px;
}
Applying that rule will give you this:
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.
We have started using Wijmo (based on the jQuery UI & jQuery UI Theme Roller) on one of our applications but have a problem with the dropdown and button in the Wijmo Form Decorator styling.
I have had a look at the Wijmo Docs but they haven't been helpful.
We have initiated the script and the style is applied however on all forms I cannot get the dropdown item to align correctly with other elements.
The initiation script is as follows:
<script id="scriptInit" type="text/javascript">
$(document).ready(function () {
$(":input[type='text'],:input[type='password'],textarea").wijtextbox();
$("select").wijdropdown();
$(":input[type='radio']").wijradio();
$(":input[type='radio']").wijcheckbox();
$("button").button();
});
</script>
As you will notice the .button() and .wijdropdown() functions are applying to each instance of the tag versus a class or an ID - we have the same problem with all 3 methods and have gone this way as this is what is desired through the entire application.
You can see a screenshot of the problem here:
I have been using Firebug to try and work out what the problem is and I suspect part of it is that Wijmo converts the select element into a div and applies JS to enable the select functionality.
I have been using both Firebug and Chrome developer tools to debug this, I notice that there is no margin being applied either above or below either element.
I have removed all other stylesheets that are not Wijmo or ThemeRoller but no change. We are using the "rocket" theme that comes with Wijmo.
Each time I try and manipulate the margin-top property on either it realigns all elements that are inline with the input search field directly above.
The HTML code for the form is:
<FORM id="serialSearch" name="serial_search" method="POST" action="index.php">
<label>Serial number: </label><input type="text" name="query" id="query" size="30" autocomplete="off" value="<? echo $serial_query; ?>" />
<br />
<select name="searchType">
<option value="standard">Standard</option>
<option value="fuzzy">Fuzzy</option>
</select>
<button>Search serial numbers</button>
<input type="hidden" name="serial_submit" id="serial_submit" value="search_serials" />
</FORM>
It is really important for us to get this aligning correctly and appreciate any suggestions, thanks in advance.
you need to wrap all the forms elements inside a div with let's say a class "input" and apply this style to the div elements:
div.input {
display: inline-block;
vertical-align: top;
}
here you can see a jsfiddle that shows how it looks like.
as a suggestion, next time create a jsfiddle more than a screenshot so it's easier for people and for you to test your code.