I have a foundation slider value that is also bound to a number input.
The number input needs to allow for any value to be in place but the slider can only increment in steps of 1000. The problem is if the number input has a specific number the slider overrides the input value leading to inaccurate results. The slider must be in setps of 1000 if the cost is approximate.
<input type="text" name="cost-box" id="cost-box" class="">
<div class="slider cost-slider" data-slider data-step="1000" data-start="30000" data-initial-start="{{ $someValue }}" data-end="900000">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1" aria-controls="cost-box"></span>
<span class="slider-fill" data-slider-fill></span>
Related
Is it possible to have 2 different inputs controlling a Foundation range slider? I need to add a field to set specific fractions (like so): https://codepen.io/jinch/pen/OaKpZX?editors=1000
<div class="row">
<div class="small-2 columns">Width:</div>
<div class="small-5 columns">
<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
<span class="slider-handle slideWidth" data-slider-handle role="slider" tabindex="1" aria-controls="customPort-2-width"></span>
<span class="slider-fill" data-slider-fill></span>
</div>
</div>
<div class="small-5 columns">
<input type="number" step="1" id="customPort-2-width" style="border: 1px solid #999999; display:inline-block; width:39%;">
<select class="fractions fractionWidth" name="WidthFraction" style="border: 1px solid #999999; display:inline-block; width:39%;">
<option value="0" selected="">0</option>
<option value="1/8">1/8</option>
<option value="1/4">1/4</option>
<option value="3/8">3/8</option>
<option value="1/2">1/2</option>
<option value="5/8">5/8</option>
<option value="3/4">3/4</option>
<option value="7/8">7/8</option>
</select>
<span class="small">in.</span>
</div>
TL;DR The good news is this can be done! The bad news is that you'll need to adjust your code a bit. I'm typing this out at ten minutes past midnight so you will more than likely need to refactor this 😂but I hope it's a starting point.
I'll go into the reasons for the implementation, but if you want to just get into it, I've created a Codepen https://codepen.io/jamie-endeavour/pen/zyxPaY?editors=1010
A Bit of Background
When I first found this question I looked at the Slider documentation and noticed a section about 'Reflow' - https://foundation.zurb.com/sites/docs/slider.html#reflow - after reading about this method I decided to look in the Foundation source code:
_reflow() {
this.setHandles();
}
Then, I looked into setHandles()...
setHandles() {
if(this.handles[1]) {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true, () => {
this._setHandlePos(this.$handle2, this.inputs.eq(1).val(), true);
});
} else {
this._setHandlePos(this.$handle, this.inputs.eq(0).val(), true);
}
}
Notice here that _setHandlePos() makes a reference to a value from a property called inputs.
When the Slider class is initialized the following are set:
this.inputs = this.$element.find('input');
this.$input = this.inputs.length ? this.inputs.eq(0) : $(`#${this.$handle.attr('aria-controls')}`);
In your example, you weren't supplying an input element. So as you can see the code is using the value of aria-controls to build up the selector of the 'input'. This is where your restriction lies as you won't be able to associate two input fields with the Slider this way.
The Solution
So, remember the ternary that was used in this.$input? If we add an <input> within your .slider element, then we can use this as a reference point for the Slider.
<div class="slider" data-slider data-initial-start="20" data-options="precision:3; decimal:3; start:8; end:36;" style="margin-top: 12px;">
<input type="hidden" id="slider-reference" value="8" />
...
Now that you have a reference that can be used between the two input fields. You can then update this reference field's value on the back of a change callback against each element, then Slider will read this and update accordingly.
The JS required for the number input is fairly straightforward as we are supplying the absolute number that Slider needs to calculate the width position.
The fraction input gets a bit funky because you need to return a fraction of the difference between your min and max value (28) rather than a fraction of your max value (36 in this case). This is why I've included additional calculations to ensure you get the correct position against the Slider element. This is also the part that I feel can be refactored with a fresh set of eyes 😬
Finally, once you have acquired the new values in each change handler you simply call the _reflow method and this will update the Slider plugin accordingly without you having to re-initialize the plugin or anything nasty like that!
Below are my code for 2 input fields in vuejs. The current validation rule is they both need to be numeric. I've read the official document here.
I need to add another rule, that max-amount must be bigger than min-amount. The trick is min-amount is user input, not pre-determined. How should I implement this customize validator?
<div class="min-section">
<label>Min</label>
<input type="text"
class="uk-input"
name="min-amount"
v-validate="'numeric'"
v-model="minAmount" />
</div>
<div class="max-section">
<label>Max</label>
<input type="text"
class="uk-input"
name="max-amount"
v-validate="'numeric'"
v-model="maxAmount"/>
</div>
You could bind min_value in the v-validate rules of the max-amount <input>:
<input name="min-amount" v-model="minAmount">
<input name="max-amount"
v-validate="'numeric|min_value:' + minAmount"
v-model="maxAmount">
demo
Also note if you don't have a specific reason to use a text input, you should consider using <input type="number"> (instead of <input type="text">) so that the user could only enter numeric values.
Does anyone know if it's possible using thymeleaf templates to iterate with a specific numerical value that does not come from the index or the size of an array?
For example:
for(i=0;i<4;i++).
So something similar to a for loop and yes I have looked at the thymeleaf docs.
Thanks in advance!!
Hopefully this helps. The form below will be used to take in a chemical name along with a few other details which are the other fields. I would like to repeat the form fields a specific number of times which is determined by the user. So if the user is asked "how many chemicals would you like to add to your list?" and the answer is 3 I would like to have the form fields repeat 3 times.
<form method="post" th:object="${reagent}">
<div>
<label th:for="chemName">Compound/Reagent</label>
<input th:field="*{chemName}" />
<span th:errors="*{chemName}"></span>
</div>
<div>
<label th:for="mw">Molecular Weight(g/mol)</label>
<input th:field="*{mw}"/>
<span th:errors="*{mw}"></span>
</div>
<div>
<label th:for="density">Density(g/L)</label>
<input th:field="*{density}"/>
<span th:errors="*{density}"></span>
</div>
<div>
<label th:for="hazard">Hazards</label>
<textarea th:field="*{hazard}"></textarea><br/><br/>
<span th:errors="*{hazard}"></span>
</div>
<br/>
<input type="submit" value="Add Chemical"/>
</form>
I'm having an issue finding a radio button. Here is a snippet of the html:
<form action="/" id="frm-info" method="post"><input id="ClickedButton" name="ClickedButton" type="hidden" value="" /><input name="__RequestVerificationToken" type="hidden" value="KTQF3bkKPP0OirvtL1EYsW-Q77zq-8H9YAPqeoBB9ewpNSYoc0dOEout26qrtMmX6xBx0_roxqWRwCXAlwZRTyW9ZBTBjwNgifWqws6hyOFIRmc6O-7P6jZXbZNYJ5Pazt9Hmg2" /> <div class="row borGreyPad mlmrcolor bb0">
<div class="col-sm-12 coverImage">
<div class="col-md-7 col-lg-6 fr xs-fl">
<div class="frm-content axaborderBlue mt10">
<div class="pl25 pt15 pr15 pb10">
<p class="large-heading">Enter some basic information to get started</p>
<div class="row ">
<div class="row pl15">
<div class="col-sm-4 r xs-l mb5 f14">Application Taken: *</div>
<div class="col-sm-8 mb5">
<div class="groupBox">
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="1" type="radio" value="ApplicationInPerson" /><span class="dib mr10 ">In Person</span>
</span>
<span class="dib f14 ">
<input id="ApplicationTaken" name="ApplicationTaken" tabindex="2" type="radio" value="ApplicationByPhone" /><span class="dib mr10 ">By Phone</span>
</span>
</div>
I want to select the radio button with name "ApplicationTaken" and value "ApplicationInPerson"
I've tried several different ways including:
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
choose("#{myName}", :option => "#{myValue}")
end
and
When I click on the radio with name
"([^"]*)" and value "([^"]*)"$/ do |myName, myValue|
find(:xpath, "//input[#value='#{ myValue }']", match: :first).set(true)
end
I keep seeing the following error:
"Unable to find radio button "ApplicationTaken" with value "ApplicationInPerson".
I've also tried by ID, no luck. I CAN select a button on this page and fill in text fields, I just can't select radio buttons or drop downs. Thanks
Since you're using capybara try:
choose('Visible Text')
See:
https://gist.github.com/zhengjia/428105
For starters, you have two radio buttons with the same id. This is bad - you should not have duplicate ids on a page. Attempting to find an element by ID when there are duplicates is very unpredictable.
What's most likely happening is that it's finding the first element with a matching ID, and then checking the value attribute. When that doesnt match, it says the element could not be found, because it does not continue onto the next matching ID (because of the way id selectors work internally)
I see you're also using xpath to find the element. You generally should be using CSS instead of xpath for finding your elements.
So leaving the ID out, and using CSS instead, find('input[name=ApplicationTaken][value= ApplicationInPerson]') should get you the element you're looking for.
I've noticed strange behavior of the Twitter Bootstrap 3: size of the input box depends on the size of its label when they are grouped with form-group:
<form class="form-inline">
<div class="form-group">
<label>A</label>
<input type="text" class="form-control" placeholder="First Name">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name">
</div>
</form>
Here is demo: http://jsfiddle.net/a3vAP/4/
Is this feature or bug? What would be the fix? I need input boxes of the same size.
The longer label is causing the input to be longer since they're both contained in the same form-group which uses display:inline-block so it's automatically sizing to the width of the label.
According the Bootstrap docs..
"Inputs, selects, and textareas are 100% wide by default in Bootstrap.
To use the inline form, you'll have to set a width on the form
controls used within."
So, you'd need to add some simple CSS to control the width..
.form-inline .form-group input {
width:140px;
}
Demo: http://bootply.com/87747