I used this snap of code to create a dropdown menu that includes textboxes: https://stackoverflow.com/a/27547021
Now, i would like to move the position of this dropdown menu to align with a certain piece of tekst. Ideally, I would like it to be at the right side of the 'Tekstpiece'. I tried to adjust the CSS, as can be seen here: https://www.w3schools.com/code/tryit.asp?filename=GDUL1WPE82S0
However, the contents of the dropdown box do not move along with the box itsself. Furthermore, hardcoding the position is likely not the best option.
Any thoughts on how this can be pulled off?
Change your html to this:
<!DOCTYPE html>
<html>
<h3>Tekstpiece</h3>
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
<div id="checkboxes">
<label for="one">
<input type="checkbox" id="one" />First checkbox</label>
<label for="two">
<input type="checkbox" id="two" />Second checkbox</label>
<label for="three">
<input type="checkbox" id="three" />Third checkbox</label>
</div>
</div>
</div>
</form>
</html>
Assuming that you want the dropdown checkboxes want to be "lined up" with the select box.
Related
I am displaying different locations to the front end.
When each location is checked, the User is asked to add the Quantity of stock they want to add in that specific location.
Now I am not sure how to achieve this in angular. Can someone please guide or help me?
<div class="form-group">
<h4>Markets to stock and fulfill product</h4>
<div *ngFor="let location of (allLocations | async)" class="form-check">
<input class="form-check-input" type="checkbox" name="myCheckbox" value="{{location}}" id="checkboxCity_">
<label class="form-check-label">
{{location}}
</label>
<div class="row">
<div id="stockInput_" style="display: none;">
<label>Enter Quantity of Stock in this Market (In Units)</label>
<div class="col-md-6">
<input placeholder="Stock (In Units)" class="form-control" name="mkt[]" id="stock_">
</div>
</div>
</div>
</div>
</div>
I created it previously in core Javascript and this was what I was creating.
{"Houston":"30","New York":"10","Los Angeles":null}
So is it possible to achieve it in Angular too?
#input{
display: inline-block;
}
<div>
<div>
<input type="radio">
<label>Item 1</label>
</div>
<div class="inputClass">
<div id="input">Some text</div>
<div id="input"><input type="text"></div>
</div>
<div>
<input type="radio">
<label>Item 2</label>
</div>
</div>
In the above HTML snippet, is there any way I can restrict tabbing to the input inside .inputClass?
Please note that in the actual code I have no way of knowing if .inputClass will hold an input box or not. It could be a button, dropdowns etc or any other tabbable element. So I can't apply tabindex=-1 to the element(s).
Also, please note I don't want a jQuery solution.
I'm using opencart cms to manage my online shop. Recently I decided to add some filters to refine the search of my products. I did everything according to this tutorial: link to tutorial
So I have added two filters: size and color. To each of the filters I added three options: red, white, black and S, M, L.
Everything seems to be working except one. In the front end of the site I can only see the name of the filters: "size", "color" and the button "refine search". However I cannot see the selections. This is the image what I see in the frontend: link to the screenshot
However if I look at the source code of the site, I see that server returns the options. This is how the code looks like:
<div class="panel panel-default">
<div class="panel-heading">Refine Search</div>
<div class="list-group">
<a class="list-group-item">Size</a>
<div class="list-group-item">
<div id="filter-group7">
<label class="checkbox">
<input name="filter[]" type="checkbox" value="24" />
L (1)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="23" />
M (0)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="22" />
S (0)</label>
</div>
</div>
<a class="list-group-item">Color</a>
<div class="list-group-item">
<div id="filter-group6">
<label class="checkbox">
<input name="filter[]" type="checkbox" value="21" />
White (3)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="20" />
Black (3)</label>
<label class="checkbox">
<input name="filter[]" type="checkbox" value="19" />
Red (2)</label>
</div>
</div>
</div>
Maybe someone will know where is the problem? I use a standart Induca theme, but I dont think that its the reason of the problem.
I had same problem and I found answer!
You should go to layouts options, find there "category" template and add (+) there "filter" to left column panel.
Description there: http://www.pavothemes.com/blog/tutorials/137-how-to-use-opencart-filter.html
I have been searching for an answer all day but can't seem to find anything that would help my specific problem so here goes.
In a question form, I want to show hidden divs based on radio button selections, using the jQuery click() function. But after a second click() event is triggered, the div that was shown in the previous selection is forgotten, and returned to hidden status.
Here is an example code:
jQuery(document).ready(function(){
jQuery('input[type="radio"]').click(function(){
if(jQuery(this).attr("value")=="answer1"){
jQuery(".hide").hide();
jQuery(".answer1").show();
jQuery(".answer1and2").show();
}
if(jQuery(this).attr("value")=="answer2"){
jQuery(".hide").hide();
jQuery(".answer2").show();
jQuery(".answer1and2").show();
}
if(jQuery(this).attr("value")=="answer3"){
jQuery(".hide").hide();
jQuery(".answer1and2").show();
jQuery(".answer3").show();
}
});
});
.hide { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<h1>Question 1</h1>
<input type="radio" name="question1" value="answer1">
Answer 1
<input type="radio" name="question1" value="answer2">
Answer 2
<div class="answer1 hide">
<p>Answer 1 is Apple</p>
</div>
<div class="answer2 hide">
<p>Answer 2 is Mango</p>
</div>
<div class="answer1and2 hide">
<h1>Question 2</h1>
<input type="radio" name="question2" value="answer3">
Any answer
<input type="radio" name="question2" value="answer3">
Any answer
</div>
<div class="answer3 hide">
<p>Did you choose Apple or Mango?</p>
</div>
How can I retain just one of the answers that was shown after the first selection?
JSFiddle code here
If you don't want shown divs to be hidden again, then just remove "hide" class from items you get "shown"
Here is JSFiddle
And here is one example row of how to do that:
jQuery(".answer1").show().removeClass('hide');
Just remove every
jQuery(".hide").hide();
(now with fiddle)
I'm using some bootstrap related js that enables the use of checkboxes through html like:
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxA" checked="checked">
<i class="icon-unchecked checked"></i>
Item one checked
</label>
</div>
<div class="checkbox">
<label class="checkbox-custom">
<input type="checkbox" name="checkboxB" id="2">
<i class="icon-unchecked"></i>
Item two unchecked
</label>
</div>
Normally I could bind onto the input, but the script that handles this only changes the i checked css class. How do I do something on a change on the adding/removing of .checked on i?
Late to this but you would have to set a flag in the ViewModel and then based on the click switch your class with css binding.
<i class="checked" data-bind='css: { "nameOfYourCSS" : conditions_here } '></i>
Here's the example. I've set the css to the p tag instead because apparently you can't style checkboxes and that's exactly the reason why you might be using Bootstrap.
http://jsfiddle.net/jX6m2/3/