Display two div's side by side inside <li></li> element - html

How can I get the two div's inside the list element (part of an ordered list) to display side by side?
The div's in question are with class="dd-handle"and class="btn-group".
I'm using Bootstrap v3.3.4 and Nestable2.js
I've tried the following. In this case, the btn-group displays below the first div.
<li class="dd-item" data-id="id">
<div class="dd-handle">Section name</div>
<div class="btn-group">
<a data-toggle="dropdown" class="dropdown-toggle" role="button">
<span class="icon icon-dots-three-horizontal"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
<span></span>
Rename
</a>
</li>
<li>
<a href="#myOtherModal" data-toggle="modal">
<span></span>
Add New
</a>
</li>
</ul>
</div>
</li>
In this case, the layout and functionality of the Nestable2.js library are completely off.
<li class="dd-item" style="display:flex; flex-direction:row; justify-content: space-around;" data-id="id">
<div class="dd-handle" style="display:flex; flex-direction:column;">Section name</div>
<div class="btn-group" style="display:flex; flex-direction:column;">
<a data-toggle="dropdown" class="dropdown-toggle" role="button">
<span class="icon icon-dots-three-horizontal"></span>
</a>
<ul class="dropdown-menu">
<li>
<a href="#myModal" id="myModel" data-toggle="modal" data-reportId="id" data-reportName="name">
<span></span>
Rename
</a>
</li>
<li>
<a href="#myOtherModal" data-toggle="modal">
<span></span>
Add New
</a>
</li>
</ul>
</div>
</li>

Try adding style="display: inline" or display: inline-block;, as blocks have a linebreak built into them by default, and this removes that break.

Related

How to change the direction of drop down child menu for Arabic RTL through custom CSS?

We have a custom eCommerce website and below is the code for the categories list which is a drop-down menu.
<div id="nav-header" class="nav-header navbar-default">
<div class="container ">
<div class="row">
<nav class="ms-mb-0" role="navigation">
<div class="col-sm-3 col-md-3">
<!--navheader sidebar categories on home page-->
<div class=" hover-dropdown dropdown vertical-megamenu navheader-sidebar-category ">
<div class="ms-br-zero dropdown-toggle btn-primary" type="button"
id="dropdownMenu1" data-toggle="dropdown">
<div id="menu-icon">
{{'SHOP BY CATEGORIES'|msTranslate}}
<i class="fa fa-bars pull-right ms-pt-xs"></i>
</div>
</div>
<ul
class="list-group nav-ul-color dropdown-menu ms-br-zero ms-br-none ms-pt-0 ms-pb-0 ms-mt-0 ms-w-full ms-z-index20 ms-pos-absolute"
role="menu" aria-labelledby="dropdownMenu1" aria-expanded="true"
data-ng-init="show={}">
<li class="list-group-item ms-br-zero level1" role="presentation "
data-ng-repeat="category in navigation.header.links">
<a href="{{category.url}}" class="ms-p-0 ms-ws-normal"
title="{{category.title|msTranslate}}">
{{category.title}}
<span data-ng-if="category.children.length ">
<i class="fa fa-angle-right pull-right">
</i>
</span>
</a>
<ul ng-if="category.children.length" class="list-unstyled level2 vertical"
ng-style="{'column-count':{{getcount(category)}}}">
<div class=" ms-p-xs dropdownMenu-lvl2">
<div class="dropdownMenu-lvl3 ms-pr-xs ms-lh-25 ms-mb-s "
ng-repeat="subcategory in category.children">
<a href="{{subcategory.url}}"
title="{{subcategory.title|msTranslate}}">
{{subcategory.title}}
<i ng-if="subcategory.children.length"
class="fa fa-caret-left">
</i>
</a>
<ul class="list-unstyled level3"
ng-if="subcategory.children.length">
<li ng-repeat="subcategory2 in subcategory.children"
class="subcategory2 ">
<a href="{{subcategory2.url}}"
title="{{subcategory2.title}}"
class="level3-links ">
{{subcategory2.title}}
</a>
</li>
</ul>
</div>
</div>
</ul>
</li>
<li class="list-group-item ms-br-zero level1" role="presentation ">
<a href="/allcategories" class="ms-p-0 ms-ws-normal"
title="{{'SEE ALL CATEGORIES'|msTranslate}}">
{{'SEE ALL CATEGORIES'|msTranslate}}
</a>
</li>
</ul>
</div>
</div>
If the language is English, subcategories show on the right side which is perfect as below:
But if the language is Arabic, subcategories show on the right side which is wrong because it is overflowing from the screen:
For Arabic, the menu should show on the left side of the screen.
I tried the following in the custom CSS but still the menu in Arabic doesn't show on the left side:
body .dropdownMenu1.dropdownMenu-lvl2,
body .dropdownMenu-lvl2.dropdownMenu-lvl3 {left:-250px !important;}
How to correct the code so that the menus in Arabic show on the left side.

Adding an image for each element of a dropdown list in bootstrap

I created a dropdown menu in Bootstrap in HTML. All I want to do is adding an image for each one of the elements of the dropdown list.
But when I try to execute it nothing happens. The dropdown list is ok but the images dont appear. Can someone help to add the images in a dropdown menu? Thanks!
<div class="dropdown">
Lingua &nbsp &nbsp
<button class=" btn btn-default " type="button" data-toggle="dropdown">Italiano
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
<img src="images/flag.png" width="35" height="30">1</a>
</li>
<li>
<a href="#">
<img src="images/account.png" width="35" height="30">2</a>
</li>
</ul>
&nbsp &nbsp Paese &nbsp &nbsp</tab>
<button class="btn btn-default dropdown-toggle " type="button" data-toggle="dropdown">Italia
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>1
</li>
</ul>
</div>
Here is my result:
I'm sorry for the paint but I have to remove that button.
Yoc Can Use This Code In Your Css File
ul {
list-style-image: url('Some.gif');
}

Why is the ng-repeat directive failing to populate list items on a bootstrap dropdown?

Trying to do something very simple here:
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul ng-repeat="name in Ids" class="dropdown-menu">
<li>
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
I can't see why this isn't working: if I attempt to simply render an unordered list then the data is displayed correctly. But as soon as I try to include it in bootstrap's dropdown menu, the button is displayed but not expanded when clicked.
Why are you doing ng-repeat on the ul element, it should be li element, otherwise you're creating multiple lists.
<div class="container">
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Select Player
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li ng-repeat="name in Ids">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
</div>
</div>
Your code says to repeat the <ul> element, but don't you want to repeat the <li> elements? This should work:
<ul class="dropdown-menu">
<li ng-repeat"name in IDs">
<a href="#/{{name.Player_Id}}">
{{name.Player_First_Name}} {{name.Player_Last_Name}}
</a>
</li>
</ul>
If you still have problems, I'd suggest you confirm your module is using the ui.bootstrap components. There are working examples of the dropdowns doing exactly what you want here on the documentation page.

bootstrap dropdown submenu left align

I need to display the submenu to left align as right align making my layout messy. I'm using bootstrap.
<div class="btn-group">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Bootstrap has the option to make drop downs positioned out to the right. You can see an example of this on the bootstrap navbar section.
If you add the class navbar-right to your btn-group you should find that the dropdown changes drop direction.
<div class="btn-group navbar-right">
<div class="dropdown">
<a href="#" data-toggle="dropdown" class="btn">
<i class="icon-folder-close"></i> <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Outbox</li>
<li>Trash</li>
</ul>
</div>
</div>
Here is a JSFiddle

create a dropdown button in a selectable item in a list

I am using jQuery Ui to make list items selectable on my web app.
Inside each item from this list I have a dropdown button.
When I'm adding the selectable option to the list, the dropdown options doesn't open since the item (the button's parent) is being selected, and the button is not clickable anymore, as if the selectable option "hides" the clickability of the button.
How can i fix it?
My code looks like this:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown " >
<a class="dropdown-toggle " id="dLabel" role="button" data-toggle= "dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu" >
<li > ng-href="#" >blabla1</a></li>
<li > ng-href="#" >blabla2</a></li>
<li > ng-href="#" >blabla3</a></li>
</ul>
</div>
</li>
First you code is missing a few parts. See comments below.
I took what you had and cleaned it up:
<ul ui-selectable>
<li data-ng-repeat="item in items | filter:filterText">
<div type="button" class="dropdown "> <a class="dropdown-toggle " id="dLabel" role="button" data-toggle="dropdown" data-target="#" ng-href="/page.html">aaa
</a>
<ul class=" dropdown-menu " role="menu">
<!-- You were missing the <a in front of each ng-href -->
<li> <a ng-href="#">blabla1</a>
</li>
<li> <a ng-href="#">blabla2</a>
</li>
<li> <a ng-href="#">blabla3</a>
</li>
</ul>
</div>
</li>
<!-- You were missing a closing ul -->
</ul>
and you can view it working here on js fiddle
I added the following to resources and it worked ok for me:
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js
http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css