2
I need something like this:
<input type="image" src="~/Images/meu-icone.png" style="max-height: 15px;" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<ul class="dropdown-menu">
<li><a href="#">5</a></li>
</ul>
</input>
this even works, but gets broken, because a input can’t have a ul inside. The idea is to click on the image and open the list below to select some option.
7
In fact, bootstrap does not require you to use only one element button to activate the dropdown. You can see this by looking at the CSS fonts in Twitter Boostrap, then you’ll see which classes .dropdown is not subordinated to any specific element precisely because it may not always be a button that will activate the dropdown menu.
That said, here’s the full code of what you want:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
img#dropdownMenu1 {
/* na verdade essa largura varia de acordo com o maiio link.
Defini isso apenas por estética. :)
*/
width: 172px;
}
</style>
</head>
<body>
<div class="row">
<div class="col-md-12">
<div class="dropdown">
<!-- Imagem como botão -->
<img src="http://s4.postimg.org/5i8je2bml/avatar.png" id="dropdownMenu1" class="btn btn-default dropdown-toggle"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="true">
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
</div> <!-- end col -->
</div> <!-- end row -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>I’ll test and I’ll approve the answer if it works.
@Luiznegrini There is already a test right here in Stackoverflow, just press the blue button called "Execute code snippet". Good luck!
Browser other questions tagged html html5 twitter-bootstrap
You are not signed in. Login or sign up in order to post.
Really, it doesn’t exist. Put the
marginand thepaddingofulworthwhile0in the CSS. Alsolist-style:none.– Diego Souza
Does the image really need to be inside a UL? Or is it expected that by clicking on the image open a dropdown menu below? Your question is not well formulated, as its code contradicts the title of the question.
– felipsmartins
@felipsmartins this ai! When clicking on the image I want to open a combobox.
– Luiz Negrini