I have a table where at the end of every row, I have a dropdown menu. The dropdown has 6 list items where 2 of the list items are showing but the remaining 4 items seems to be hiding. It appears to be entering the back of the next row.
<div class="dropdown pull-right">
<a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" role="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu from-right">
<li><a class="dropdown-item">Dropdown menu item 1</a></li>
<li><a class="dropdown-item">Dropdown menu item 2</a></li>
<li><a class="dropdown-item">Dropdown menu item 3</a></li>
<li><a class="dropdown-item">Dropdown menu item 4</a></li>
<li><a class="dropdown-item">Dropdown menu item 5</a></li>
<li><a class="dropdown-item">Dropdown menu item 6</a></li>
</ul>
</div>
Related
I'm trying to add a table in Vue. How can I create dropdown list inside each table row just like in an example below?
I have some dificulties with making a list position: 'absolute'.
Is there a component that can do this?
it can simply be solve by boostrap, add boostrap codes like this
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
</ul>
</div>
according to your image it is simple a dropdown
I am having problems with links in navbar's using Bootcamp in XPages. I have an Internet Site document for develop.test.com. The Home URL on the page is Web/develop.nsf. I have the launch option of the DB set to the xPage xpHomePage.xsp. When I go to develop.test.com my Bootstrap site with menu displays perfectly. My problem is that the links in the navbar are inconsistent. Sometimes I have the DB name included, sometimes not?
The link Abmelden (near the bottom of the code) converts to http://develop.test.com/web/develop.nsf?logout which would be correct. The dropdown "Anwesenheiten/offen nach Name converts to http://develop.test.com/Web/xpAnwesendOffenNachName ==> somehow the develop.nsf is missing? I just cannot work out why.
I could of course just hardcode the NSF into the link - just doesn't seem right to me :o)
Thanking you for any help given.
=========== here is the code
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
<xp:div id="header" disableTheme="true">
<!-- This is the banner -->
<nav class="navbar-header navbar-inverse navbar-fixed-top" role="navigation" id="header">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="xpHomePage.xsp">
<xp:text escape="true" id="computedField1">
<xp:this.value><![CDATA[#{javascript:#DbTitle()}]]></xp:this.value>
</xp:text>
</a>
<!-- this is the hamburger menu that gets shown when the view is small enough -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Navigation umstellen</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- create a div so the header is collapsed when tiny -->
<div class="collapse navbar-collapse" id="header-menu">
<!-- and now the actual menu -->
<ul class="nav navbar-nav navbar-right navbar-inverse">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
Anwesenheiten
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>
offen nach Name
</li>
<li>
offen nach Standort
</li>
<li role="separator" class="divider"></li>
<li>
freigegeben nach Name
</li>
<li>
freigegeben nach Standort
</li>
<li>
freigegeben nach Monat
</li>
</ul>
</li>
<li>
<a href="?logout">
<span class="glyphicon glyphicon-log-out"></span>
<xp:text>
<xp:this.value><![CDATA[#{javascript:" Abmelden"}]]></xp:this.value>
</xp:text>
</a>
</li>
</ul>
</div>
</div>
</nav>
</xp:div>
</xp:view>
Try computing the whole href. It may be doing different things on different pages within the application, depending on context.
I have a simple nav bar with logo on left and the word Menu on right that act as a dropdown. For small screens I need it to change the menu wording to a burger icon. So far I can get it to change to an icon but the list still contains the word menu and thats still a dropdown. How do I make it so the list only contains the items on the dropdown and not the dropdown itself?
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="logo pull-left animated wow fadeInLeft"><a class="navbar-brand" href="index.html"><img src="LOGO" alt="" title=""></a></div>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Menu<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
</ul>
</li>
</ul>
I have a problem with the dropdown menu in Twitter Bootstrap 3.3.6
After clicking on the button .dropdown I visualize correctly the .dropdown-menu content, then if I click again on .dropdown or outside .dropdown-menu to close the .dropdown button becomes hidden.
After clicking on .dropdown:
<ul class="nav nav-pills">
<li role="presentation" class="dropdown open">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">...</ul>
</li>
</ul>
Afert closing the .dropdown-menu:
<ul class="nav nav-pills">
<li role="presentation" class="dropdown" style="display: none;">
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">...</ul>
</li>
</ul>
How can I solve it?
I am using this Bootstrap 3's example menu page for my site:
http://getbootstrap.com/examples/jumbotron/
When you shrink the page the menu at the top collapses into a single drop down list.
On my page I have two menues at the top left and right however when I shrink my page I don't get two drop down menues.
I would like it so that when I shrink the page I get two collapsed menues. Is this possible?
Try this: http://bootply.com/79216 i add to button (different) target align the second menu to the right with navbar-right and add some css to reset the float and display of the navbars.
html
<nav class="navbar navbar-inverse" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="active">Link</li>
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
</ul>
</div>
<div class="collapse navbar-collapse navbar-ex2-collapse">
<ul class="nav navbar-nav navbar-right">
<li>Link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
css
.navbar-collapse:before, .navbar-collapse:after{display:inline; content:"";}