I have a sweetalert2 like this:
When I want to pick something it looks like that:
My code inside the sweetalert2 is:
<div className={'col-12 course-item-modal'}>
<div className="row">
<div className="form-group col-12">
<div className="row">
<label htmlFor="form_4_course">Kurs</label>
<select id="form_4_course" name="form[4][course]" className="selectize form-control">
<option value=""></option>
<option value="60"> GTS</option>
<option value="62">Sprechstunde</option>
<option value="59">BesF 1c</option>
<option value="58">BesF 3c</option>
<option value="53" selected="selected">D 1a</option>
<option value="56">D 1b</option>
<option value="57">W T/X 1a</option>
</select>
</div>
</div>
<div className="form-group col-12">
<div className="row">
<label className="" htmlFor="form_4_rooms">Räume</label>
<select id="form_4_rooms" name="form[4][rooms][]" className="selectize form-control"
multiple="multiple">
<option value="1">Info I</option>
<option value="2">Info I</option>
</select>
</div>
</div>
</div>
</div>
I use selectize.js in this react.js application.
I played around with z-index of the sweetalert2 .swal2-actions and the .
Also I increased the z-index of the selectize containers. I tried everything possible with z-index - I guess. Nothing works at all.
Can someone help?
The solution is:
.swal2-content {
z-index: 2 !important;
}
The z-index for swal2-header, swal2-body, swal2-actions and swal2-footer are 1.
So setting the swal2-content class to z-index: 1 !important; solves the problem.
Related
Here In the modal pop up when i enter the Order number as 1307 it need to display the all the items of that order number
Here I am attaching the screenshot of my Items list that need to be displayed in my drop down when i enter the order number
Here in dropdown i need to see items(laptops, Note books,Samsung Note 3) When i give this order number
Here is my html code
<div class="modal-body">
<form class="form-horizontal" id="adhoc-form" method="GET">
{% csrf_token %}
<fieldset>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Date</label>
<div class="controls">
<input name="date_manual" type="date">
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Process</label>
<div class="controls">
<select name="p_process">
<option value="">----------</option>
{% for process in production_process %}
<option value="{{process.id}}">{{process.name}}</option>
{% endfor %}
</select>
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Sales order</label>
<div class="controls">
<input name="order_number" type="text">
</div>
</div>
<div class="control-group">
<label class="control-label pull-left" for="capacity">Items</label>
<div class="controls">
<select name="item_part">
<option value="">-----</option>
</select>
</div>
</div>
</fieldset>
<div id="form-buttons-container" class="form-actions" style="padding-left: 0px;">
<div class="controls">
<input type="submit" class="btn btn-primary btn-medium" value="Submit">
</div>
</div>
</form>
</div>
In the above code i need to display those 3 items of this order in label - Items
Please help me out to write view and script
is there a chance to search with evoSearch with 3 items? I would like the search results page to show the result only if the page meets all 3 conditions? TVs added to the document will be checkboxes with the possibility of multiple selection
Below is a screen that should help
https://imgur.com/a/1uKN2N0#t9hgC5x
Search page code
<form action="[~24~]" id="praca" method="get">
<div>
<label for="language">Language:</label>
<select type="text" name="language" id="language" class="form">
<option selected="" value="english">english</option>
<option value="spanish">spanish</option>
<option value="german">german</option>
<option value="polish">polish</option>
</select>
</div>
<div>
<label for="localisation">Localisation:</label>
<select type="text" name="localisation" id="localisation" class="form">
<option selected="" value="italy">Italy</option>
<option value="Greece">Greece</option>
<option value="Spain">Spain</option>
<option value="Portugese">Portugese</option>
</select>
</div>
<div>
<label for="category">Category:</label>
<select type="text" name="category" id="category" class="form">
<option selected="" value="it-service">IT service</option>
<option value="helpdesk">Helpdesk</option>
<option value="callcenter">Call center</option>
<option value="support">Support</option>
</select>
</div>
<button type="submit">Search</button>
</form>
Search results page
[!evoSearch?
&display=`10`
&filters=`AND(
content:c.template:notin:27,28;
content:c.id:notin:23,88;
)`
&tvPrefix=``
&tvList=`language,localisation,category`
&renderTV=`language,localisation,category`
&ownerTPL=`#CODE:[+dl.wrap+]`
&tpl=`evoSearch`
&statTpl=`<p>Showing results [+stat_from+] - [+stat_to+] of [+stat_total+] for "[+stat_request+]"</p>`
&noResult=`<p>Nothing was found for "[+stat_request+]"</p>`
!]
It can also be AjaxSearch, I have code like below, but unfortunately it searches for one criteria.
Adding advSearch = 'allwords' causes it to find nothing
[!AjaxSearch?
&clearDefault=`1`
&showResults=`0`
&landingPage=`12`
&showMoreResults=`1`
&moreResultsPage=`12`
&output=`0`
&whereSearch=`tv`
&withTvs=`category,language,localisation`
&tvPhx=`category,language,localisation`
&tplInput=`#FILE:assets/snippets/ajaxSearch/templates/inputTemplates/input3.tpl.html`
!]
input3.tpl.html code
[+as.showInputForm:is=`1`:then=`
<form id="[+as.formId+]" action="[+as.formAction+]" method="post">
<fieldset>
<div>
<label for="language">Language:</label>
<select name="search[]" id="ajaxSearch_select" class="form">
<option value="english">english</option>
<option value="spanish">spanish</option>
<option value="german">german</option>
<option value="polish">polish</option>
</select>
</div>
<div>
<label for="localisation">Localisation:</label>
<select name="search[]" id="ajaxSearch_select2" class="form">
<option selected="" value="italy">Italy</option>
<option value="Greece">Greece</option>
<option value="Spain">Spain</option>
<option value="Portugese">Portugese</option>
</select>
</div>
<div>
<label for="category">Category:</label>
<select name="search[]" id="ajaxSearch_select3" class="form">
<option selected="" value="it-service">IT service</option>
<option value="helpdesk">Helpdesk</option>
<option value="callcenter">Call center</option>
<option value="support">Support</option>
</select>
</div>
[+as.showAsId:is=`1`:then=`<input type="hidden" name="[+as.asName+]" value="[+as.asId+]" />`+]
<input type="hidden" name="advsearch" value="[+as.advSearch+]" />
<label>
<input id="[+as.submitId+]" type="submit" name="sub" value="[+as.submitText+]" />
</label>
</fieldset>
</form>
[+as.showIntro:is=`1`:then=`
<p class="ajaxSearch_intro" id="ajaxSearch_intro">[+as.introMessage+]</p>
`+]
`+]
I am trying to insert the attribute "selected" into the first option (volvo) with Jekyll without writing anything in the form.
I guess I should do it with capture but don't get how it works for passing attributes.
cars.html
<html>
<body>
...
<form action="/action_page.php">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<br><br>
<input type="submit" value="Submit">
</form>
...
</body>
</html>
When i am changing my option value of select it's ng-model value is not being changed.
Is this happening because of value is being changed by Jquery?
Because i read a line about angularjs from w3school that The ng-change event is only triggered if there is a actual change in the input value, and not if the change was made from a JavaScript.
And i want to clarify that option value is being changed by j query.
Please suggest me proper solution or tell me error in the code.
Here is my html
<div class="row" ng-app="myapp" ng-controller="mycontroller" id="mainController">
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<div class="form-group">
<p>Rooms
<% no_of_rooms %>
</p>
<select ng-init="no_of_rooms='1'" autocomplete="off" ng-model="no_of_rooms" class="form-control" id="no_of_rooms" style='display:none' name="no_of_room" style="height: 39px !important;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12" ng-repeat="i in getNumber(no_of_rooms) track by $index">
<div class="form-group">
<p>Adult (12+ YRS)</p>
<select autocomplete="off" class="form-control" style='display:none' name="no_of_adults[]" style="height: 39px !important;">
<option value="0">0</option>
<option value="1" Selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
</select>
</div>
</div>
</div>
Here is my script.
var app = angular.module('myapp', [], function($interpolateProvider) {
$interpolateProvider.startSymbol('<%');
$interpolateProvider.endSymbol('%>');
});
app.controller('mycontroller', function($scope , $filter) {
$scope.getNumber = function(num) {
return new Array(parseInt(num));
}
});
have this optgroup select it is possible to use a javascript for this and if yes can show me an example how can do that i have look around but i do not find something?
Choose a city:
<select name="city">
<optgroup label="color_1">
<option value="Blue">Blue</option>
<option value="Red">Red</option>
<option value="Green">Green</option>
</optgroup>
<optgroup label="Colors 2">
<option value="Yellow">Yellow</option>
<option value="Grey">Grey</option>
<option value="White">White</option>
</optgroup>
</select>
But i want use group for div class for example
<div class="categories">
<span class="optgroup" id="color_1">
<div class="category">Colors 1</div>
<label class="color_1">Blue</label>
<label class="color_1">Red</label>
<label class="color_1">Green</label>
</span>
<span class="optgroup" id="color_2">
<div class="category">Colors 2</label >
<label class="color_2">Yellow</label>
<label class="color_2">Grey</label>
<label class="color_2">White</label>
</span>
</div>