Is there a way to limit the max height of a Selectize field? The field itself, not the dropdown. The field does not restrict a maximum number of selections, so I can't use the maxItems option, nor can I use the maxOptions option because that applies to the dropdown.
(function($select) {
for (let i = 100; i < 202; ++i) {
$select.append('<option value="' + i + '" selected>Test ' + i + '</option>');
$select.append('<option value="' + (2 * i) + '">Test ' + (2 * i) + '</option>');
}
$select.selectize();
})($("#selectize"));
#container {
max-width: 400px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/css/selectize.bootstrap3.min.css" rel="stylesheet" />
<div id="container" style="">
<form>
<select id="selectize" name="selectize" class="form-control" multiple></select>
<button type="submit" class="btn btn-success">Submit</button>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.13.3/js/standalone/selectize.min.js"></script>
Wrapping the select field in a container with CSS max-height and overflow-y set to "auto", and then setting the Selectize option dropdownParent to "body" seems to solve the problem.
Example: https://codepen.io/reformed05/pen/PoOYeye
Related
I had Automated Data entry in a web page using VBA but there is a field which is hidden its only pop up if you select date more than 1 month old. While i am entering the date using VBA to it its not showing hidden field but when i am manually entering the same date its showing the hidden field where i need to mentioned the some reason.
My VBA Code
IE.document.getelementbyid("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = Sheet5.Range("B13").Value
Web Page Code
<td>Invoice Date</td>
<td><input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="lostClr(this);if(this.value!=''){return
checkDt(this,'invdt');}" onchange="check_idate()" onkeypress="return
false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility:
hidden;">Delay Reason :</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<span id="ctl00_ContentPlaceHolder1_lblreason" style="color: red; visibility:
hidden;">*Min 15 chars</span>
<input name="ctl00$ContentPlaceHolder1$btndelay_attach" type="button"
id="ctl00_ContentPlaceHolder1_btndelay_attach" class="button_1" style="border-style: none;
width: 350px; visibility: hidden;" value="Attach/Upload CGM's Approval"
onclick="return openDelay_approval()">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach"
id="ctl00_ContentPlaceHolder1_hdndelay_attach">
<input type="hidden" name="ctl00$ContentPlaceHolder1$hdndelay_attach_id"
id="ctl00_ContentPlaceHolder1_hdndelay_attach_id">
Before Selection of Date:
After Selection of Date:
Is the showing hidden field function in the onblur event of the first input? If so, you can use fireEvent to fire the onblur event. You could refer to my sample below.
Sample VBA code:
Sub LOADIE()
Set ieA = CreateObject("InternetExplorer.Application")
ieA.Visible = True
ieA.navigate "https://www.example.html"
Do Until ieA.readyState = 4
DoEvents
Loop
Set doc = ieA.Document
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").Value = 11
doc.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").fireEvent ("onblur")
End Sub
Sample HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<div>Invoice Date</div>
<input name="ctl00$ContentPlaceHolder1$txtInvoicedt" type="text"
id="ctl00_ContentPlaceHolder1_txtInvoicedt" autocomplete="off"
onblur="check_date()" onkeypress="return false;" style="width:100px;">
<span id="ctl00_ContentPlaceHolder1_lbldelay_reason" style="visibility: hidden;">Delay Reason:</span>
<input name="ctl00$ContentPlaceHolder1$txtdelay_reason" type="text"
id="ctl00_ContentPlaceHolder1_txtdelay_reason" style="visibility: hidden;">
<script>
function check_date() {
var a = document.getElementById("ctl00_ContentPlaceHolder1_txtInvoicedt").value;
if (a >= 10) {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "visible";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "visible";
}
else {
document.getElementById("ctl00_ContentPlaceHolder1_lbldelay_reason").style.visibility = "hidden";
document.getElementById("ctl00_ContentPlaceHolder1_txtdelay_reason").style.visibility = "hidden";
}
}
</script>
</body>
</html>
I need to make my button click to reveal the textarea so the user can choose between uploading either an image or a text message. I can see the hidden/visible element kicking in when I run the page but it doesn't remain in the new state. It immediately reverts back to whatever it was originally set as.
I'm guessing that I'm not escaping the script properly. Any thoughts?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Site Media</title>
</head>
<header id="headtitle">
</header>
<body>
<div id="PostContainer"><br>
<textarea id="textmessage" rows="7" cols="40" maxlength="280" placeholder="Enter message here..." width="100%" style="visibility: hidden"></textarea><br>
<form class="UploadButtonContainer">
<button id="textbutton" type="submit" name="submit" onclick="revealinput()" style="display: none;"></button>
<label for="textbutton" style="cursor: pointer;" ><img src="Images/AYE PING.png" width="30%" alt="Choose Text Post" >
</label>
</form>
<script>
function revealinput() {
var x = document.getElementById("textmessage");
if (x.style.visibility === "hidden") {
x.style.visibility = "visible";
} else {
x.style.visibility = "hidden";
}
}
</script>
</div>
</body>
</html>
The script didn't like the button being inside a tag. I changed it to a tag and it works now.
I want to calculate the sum of two variables on twig in real time?
is this doable with twig or should I try with Javascript?
I have tried with twig using the code below but it doesnt work in reel time I should complete the form then return to the page(my form on 3 pages)
<div >
<label for="nbStudentClassA" >Number of studentA</label>
<div >
{{ form_widget(form.nbStudentA}}
</div>
</div>
<div >
<label for="nbStudentClassB" >Number of student B</label>
<div>
{{ form_widget(form.nbStudentB}}
</div>
</div>
<div
<label >Sum </label>
<div >
{% set sum = form.vars.value.nbStudentA + form.vars.value.nbStudentB %}
{{ sum }}
</div>
</div>
Server side script will not work in real time, you will need something like jQuery to accomplish this before you refresh the page. You can calculate using jQuery with ease. There are also javascript math plugins you can add that make doing math easier in JS based scripts.
$(document).ready(function() {
$(".calculate").click(function() {
var x = $('input[id="nbStudentClassA"]').val();
var y = $('input[id="nbStudentClassB"]').val();
var mult = x + y;
var add = (+x) + (+y);
var sub = (+x) - (+y);
var div = x / y;
$('.result').html("Multiply: " + mult + "<br /> Addition: " + add + "<br />Subtration: " + sub + "<br />Division : " + div);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>Enter two numbers to calculate as an example: Addition, subtraction, multipication and division</label>
<div>
<label for="nbStudentClassA" >Number of student A</label>
<input id="nbStudentClassA" type="text" name="nbStudentClassA" />
</div>
<div>
<label for="nbStudentClassB" >Number of student B</label>
<input id="nbStudentClassB" type="text" name="nbStudentClassB" />
</div>
<div class="result"></div>
<button type="button" class="calculate">Calculate</button>
First, the code:
$(document).ready(function() {
$('#member_pattern').hide();
$('.add-member').click(function() {
var clone = $('#member_pattern').clone(), cont = $('.members-cont');
$(cont).append(clone);
$(cont).find('#member_pattern').show(200, function() {
$(this).attr('id', '');
componentHandler.upgradeAllRegistered();
});
});
});
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.blue-indigo.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<div class="members-cont">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="first_name_<?php echo $member->id; ?>" value="<?php echo $member['first_name']; ?>"/>
<label class="mdl-textfield__label" for="first_name_<?php echo $member->id; ?>">Имя</label>
</div>
</div>
<button class="add-member add-member-top mdl-button mdl-js-button mdl-button--fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
<div id="member_pattern" class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<input class="mdl-textfield__input" type="text" id="[name]_[id]" value=""/>
<label class="mdl-textfield__label" for="[name]_[id]">Имя</label>
</div>
Objective:
By pressing a button on the page dynamically insert another field [.mdl-textfield], you want to apply the "material design" on Google
All is good, but the methods
componentHandler.upgradeAllRegistered ();
or
componentHandler.upgradeDom ();
in any does not want to renew, re-emerged, the elements on the page.
I also was having problems cloning an element and getting it to work correctly. What I did was to remove the MDL specific classes from the div and change it to a generic class name that I could select on.
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
became
<div class="upgradeTextField">
Then in javascript, after cloning the element, I selected for those divs within the cloned element and added the MDL specific classes to them. After that, running componentHandler.upgradeDom() seemed to work.
var textFieldUpgrades = cloned.querySelectorAll('.upgradeTextField');
if(textFieldUpgrades) {
for(var i=0;i<textFieldUpgrades.length;++i) {
textFieldUpgrades[i].className = 'mdl-textfield mdl-js-textfield mdl-textfield--floating-label';
}
}
componentHandler.upgradeDom();
I haven't verified this, but it seems that when you clone an existing element within the dom that has been upgraded by MDL previously, it won't upgrade it when you add the cloned object to the DOM. So that's why I simply removed the MDL classes so it wouldn't be upgraded beforehand.
Alternatively, if you need it upgraded beforehand and still want to clone it. Then what you can do is to remove the attribute 'data-upgraded' and class 'is-upgraded' from your element after you clone it. Then when you run the componentHandler.upgradeDom() it should upgrade it. So, instead of just setting the class name as in the above snippet, you'd simply remove the upgrade info:
textFieldUpgrades[i].setAttribute('data-upgraded','');
textFieldUpgrades[i].className = textFieldUpgrades[i].className.replace(/is-upgraded/g,'');
This seemed to work for me.
Thanks for the answer, but it turned out to solve it more concise way
var index = $('.member-section').length;
var clone = $('.member-section-pattern').clone();
$(clone)
.removeClass('member-section-pattern')
.find(':not([data-upgraded=""])').attr('data-upgraded', '');
$('.members-cont').append(clone);
$(clone).show(200, function() {
componentHandler.upgradeAllRegistered();
});
I'm trying to add the html5 drag 'n drop upload file on my JSF web page so i had to add this script into it
<script type="text/html" id="template-uploads">
//<![CDATA[
<div data-bind="visible: showTotalProgress()">
<div>
<span data-bind="text: uploadSpeedFormatted()"></span>
<span data-bind="text: timeRemainingFormatted()" style="float: right;"></span>
</div>
<div class="uploadimage-totalprogress">
<div class="uploadimage-totalprogressbar" style="width: 0%;" data-bind="style: { width: totalProgress() + '%' }"></div>
</div>
</div>
<div data-bind="foreach: uploads">
<div class="uploadimage-upload" data-bind="css: { 'uploadimage-uploadcompleted': uploadCompleted() }">
<div class="uploadimage-fileinfo">
<strong data-bind="text: fileName"></strong>
<span data-bind="text: fileSizeFormated"></span>
<span class="uploadimage-progresspct" data-bind="visible: uploadProgress() < 100"><span data-bind="text: uploadSpeedFormatted()"></span></span>
</div>
<div class="uploadimage-progress">
<div class="uploadimage-progressbar" style="width: 0%;" data-bind="style: { width: uploadProgress() + '%' }"></div>
</div>
</div>
</div>
//]]>
</script>
if i take out the cdata tag which is around my script i get this error :
The value of attribute "data-bind" associated with an element type
"span" must not contain the '<' character.
The script you've posted is a text/html script which acts as a template in knockout. That id is required for knockout to reference the template.
As for the CDATA sections, unless you're using XML you can take them out.