This question already has an answer here:
Adding images with option tag [duplicate]
(1 answer)
Closed 6 years ago.
I try to create a search box with a dropdown inside the search text field and i want add a different image for every option
For now this is my result:
http://www.bootply.com/TqXN4y8Se5
The image are not visible, in dropdown are not possible add image?
Thanks for any help!
the html option tag does support text only
see other pst Adding images with option tag
altough you could use bootstraps dropdown component.
http://getbootstrap.com/components/#dropdowns
altough it requires custom javascript to listen to changes and react accordingly.
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
You can use a background image but it's not available cross-browser. Or you can use jquery like http://jqueryui.com/selectmenu/#custom_render
Related
I'm inserting Dropdowns into a dynamic form. The problem is when i insert more than one Dropdown.
When i click on any Dropdown button, the toggle list only shows above the first Dropdown button, not above the Dropdown button i clicked.
So say i have 3 Dropdown buttons inserted into the form. If i click Dropdown 2 or 3; the list of contents show above Dropdown 1.
This is the code i'm inserting into the form.
let vendor = `<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu test" id="vendor['+nextindex+']" name="vendor['+nextindex+']" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>`
I was able to find the solution.
Bootstrap 4 Dropdown - Disable auto placement caused by popper.js
It was an Issue with popper.js.
At first I was using regular html but the dropdown button wasn't working so I changed to jsfiddle to test it out. I saw that the dropwdown still didn't work.
Here's the jsfiddle: https://jsfiddle.net/ugpqxpn6/2/
<div>
<!-- Single button -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
I don't understand why it wouldn't work. I took a look at some similar questions and saw that maybe not including jquery was my problem so I added it but it still seems to malfunction. Can anybody help?
Here is a working fiddle with bootstrap.min.js and jquery.min
https://jsfiddle.net/nrgxh5rr/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
Hit F12 on your keyboard to see the developer console, you have a Javascript error:
Error: Bootstrap's JavaScript requires jQuery
Make sure you're including jQuery before bootstrap's js files.
I have a drop down field on my form. When I select a value from the drop down it immediately resets the focus to the top of the form.
To be clearer I have an image at the top of the screen and several input fields. The user would have to scroll down to the actual drop down field in order to select it. Once they select the value the page scrolls back to the top.
How can I keep the same position on the form once a user selects a value from the drop down?
My drop down is setup as:
<div class="form-group">
<div class="dropdown">
<button class="btn btn-default form-control dropdown-toggle" type="button" id="ddState" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
State
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="ulState" aria-labelledby="ddState">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</div>
</div>
My javascript is setup as:
$("#ulState li").on("click", function () {
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
$("#ulState").focus();
});
In your page directive <%# Page... add this
MaintainScrollPositionOnPostback="true"
if this doesn't work for you have a look at this article here or here
Hope this will work for you
The solution is is to replace the href attribute with the data-target attribute.
// This will correct the behavior and keep the page focused.
<li><a data-target="#" data-value="something else here">Something else here</a></li>
// This will cause the page to jump
<li>Separated link</li>
I have a React component with the following render method:
render: function() {
console.log("In render method");
return (
<div>
<div className="dropdown">
<button onClick={this.displayRest} className="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span className="caret"></span>
</button>
<ul className="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" className="divider"></li>
<li>Separated link</li>
</ul>
</div>
</div>
);
}
The component appears like this:
So the dropdown button is displayed, but it is not responsive. If I click on it, the dropdown does not show.
Also, the statement console.log("In render method"); has no effect, as nothing is printed to the console.
Why is this component only partially rendered?
It's weird that the log statement isn't showing up. Are you sure you checked the correct console window in the browser? Also do you have jQuery included inside your project?
It's pretty annoying at times to work with vanilla react and bootstrap. Check outreact-bootstrap - it makes handling both a little bit easier.
I have several icons in the header that is used from a font and wrapped with
<li style="margin-top: 15px">
<span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>
I want to use it to trigger bootstrap dropdown however in its documentation, it uses button and div and, I couldn't figure out how to trigger it when clicked on the font.
Should I try using jquery and try to trigger the dropdown to open on click on #messages?
You do not have to use <button>'s and <div>'s - the important thing is to have a data-toggle="dropdown" on the triggering element :
<ul class="dropdown">
<!-- your markup -->
<li style="margin-top: 15px" data-toggle="dropdown">
<span class="myIcons" id="messages" style="font-size:5px">m</span>
</li>
<!--// your markup -->
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</ul>
demo -> http://jsfiddle.net/7ujpzs58/