So here's my issue, I'm trying to include a facility where by in a search field if you check a checkbox it needs to remove any items which have data-isletagreed == 3 against them.
#if (prop.isLetAgreed == 0)
{
<span class="LetAgreed">
<p>FOR SALE</p>
</span>
}
#if (prop.isLetAgreed == 3)
{
<span class="LetAgreed" style="left:20px;">
<p>NOW SOLD SSTC</p>
</span>
}
#if (prop.isLetAgreed == 2)
{
<span class="LetAgreed">
<p>NOW SOLD</p>
</span>
}
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<i class="fa fa-eye fa-3x"></i>
</div>
</div>
<img src="#prop.photo" class="img-responsive" alt="">
</a>
<div class="portfolio-caption">
<h4>#Html.Raw(propertyNameNew)</h4>
<div class="property-features">
<span><i class="fa fa-gbp"></i> #prop.price </span>
<span><i class="fa fa-bed"></i> #prop.maxtenants</span>
</div>
</div>
</div>
}
}
}
This is my current search form, what should I add to make the search button take into account the prop.isLetAgreed == 3 and if a checkbox is checked.
<div class="row search-input-group">
<div class="col-md-6">
<div class="input-group">
<span style="min-width:150px" class="input-group-addon">Bedrooms</span>
<div class="dropdown searchRoomWebApi">
<button class="btn btn-default dropdown-toggle search-dropdownWebApi" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="txt">select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu search-dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">select</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">1</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">2</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">3</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">4</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">5</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">6</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6">
<div class="input-group">
<span style="min-width:150px" class="input-group-addon">Maximum Price</span>
<div class="dropdown searchPriceWebApi">
<button class="btn btn-default dropdown-toggle search-dropdownWebApi" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<span class="txt">select</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu search-dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">select</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£100000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£200000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£300000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£400000</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">£500000</a></li>
</ul>
</div>
</div>
</div>
<div class="col-md-6 col-md-offset-3">
<a id="btnSearchPropertyWebApi" style="width:100%" href="#" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span> <span class="txt">Search</span>
</a>
</div>
</div>
Related
I am trying to create a mockup of a website using bootstrap nav dropdowns. I am still new to this and I have read through posts about this and tried various edits, but my dropdown is still not activating when I click it. Any suggestions or pointers would be very appreciated. Thanks!
Link to my jsfiddle: https://jsfiddle.net/allisoncodes/sdywsaf4/10/
HTML:
<div class="dropdown">
<button class="btn btn-default">
<a href="#home">
<icon class="fa fa-home"></icon>
</a>
</button>
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Community
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Recent Activity</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Forum</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member List</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" href="#" data-toggle="tab">Member Groups</a></li>
</ul>
<button class="btn btn-default">
Pet Help</button>
<button class="btn btn-default">Pets For Sale</button>
<button class="btn btn-default">Pets Services</button>
<div class="content">
</div>
</div>
jQuery:
$('[data-toggle=tab]').hover(function (e) {
$(this).click();
});
It turns out that my code was correct, I had just forgotten to include the jQuery CDN. Thanks for the help!
I'm desperate. I've followed all the advices on the others post about this problem:
I've tried to use ng-cloak or class="ng-cloak" , to add this rule to css
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
But nothing to do , the directive doesn't work.
Can someone help me? Is there an alternative to ng-cloak?
I'm developing a very big portal with liferay , the page needs a lot of time to be loader , so it is fundamental for me to use something like ng-cloak!!
Thanks
This is a page for example:
I'm using Liferay with AngularJS
<div class="navbar ng-cloak" style="display:hidden;" ng-style="loaded" ng-controller="NavBarController">
<div class="navbar-inner ng-cloak" ng-show="navbarScope.menuEpermessiRetrieved" >
<div class="container ng-cloak" style="width: auto;" ng-show="navbarScope.showNavbar" ng-cloak>
<!-- navbar per acquisitore -->
<ul class="nav ng-cloak" role="navigation" id="navigatorAcquisitore" ng-if="navbarscope.isAcquisitore">
<%-- <li role="presentation" ng-hide="${isAcquisizione}" ><a role="menuitem" tooltip="{{navbarScope.acquisizione.description}}" tabindex="-1" href="${goToAcquisizioneURL}" >{{navbarScope.acquisizione.title}} </a> </li> --%>
<li class="active ng-cloak" role="presentation" ng-if="navbarscope.isAcquisitore" ><a role="menuitem" tabindex="-1" href="${goToAcquisizioneURL}" class="ng-cloak">{{navbarScope.acquisizione.title}} </a></li>
</ul>
<a class="brand ng-cloak" id="toolTipHome" ng-if="!navbarScope.isAcquisitore" href="${goToHomeURL}">
<i class="ng-cloak glyphicon glyphicon-home" tooltip="{{navbarScope.brand.description}}" data-toggle="tooltip" data-placement="bottom" title="{{navbarScope.brand.description}}"></i>
</a>
<!-- navbar standard -->
<ul class="nav ng-cloak" role="navigation" ng-if="!navbarScope.isAcquisitore">
<ul class="nav ng-cloak" id="menuAttivita" ng-if="navbarScope.menuAttivita">
<li class="ng-cloak" role="presentation" ng-hide="${isAttivita}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.menuAttivita.description}}" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}} </a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAttivita}"><a c role="menuitem" tooltip="{{navbarScope.menuAttivita.description}}" class="ng-cloak" tabindex="-1" href="${goToAttivitaURL}">{{navbarScope.menuAttivita.title}}</a></li>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isAttivita}"> --%>
<!-- {{navbarScope.menuAttivita.title}} <b class="caret"></b> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.menuAttivita.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<!-- area di lavoro -->
<li role="presentation" class="ng-cloak" ng-hide="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.areaDiLavoro.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" >{{navbarScope.areaDiLavoro.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isAreaDiLavoro}"><a class="ng-cloak" role="menuitem" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="${goToAreaDiLavoroURL}" ng-click="hideMenu()" >{{navbarScope.areaDiLavoro.title}}</a></li>
<!-- area archivio -->
<li role="presentation" class="ng-cloak" ng-hide="${isDocumenti}"><a role="menuitem" tooltip="{{navbarScope.areaArchivio.description}}" tabindex="-1" href="${goToDocumentiURL}" class="ng-cloak" >{{navbarScope.areaArchivio.title}}</a></li>
<li class="active ng-cloak" role="presentation" ng-show="${isDocumenti}"><a role="menuitem" class="ng-cloak" tooltip="{{navbarScope.brand.description}}" tabindex="-1" href="#" >{{navbarScope.areaArchivio.title}}</a></li>
</ul>
<!-- menu fascicolo standard -->
<ul id="navigatorStandard" class="nav ng-cloak" ng-if="navbarScope.mostraFascicoliStandard" >
<li class="dropdown ng-cloak" ng-if="!${isFascicoloStandardCreate} && !${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret ng-cloak"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation " class="ng-cloak" ng-if="navbarScope.fsCreateAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloStandardCreate} || ${isFascicoloStandardSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliStandard.description}} " >
{{navbarScope.fascicoliStandard.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && !${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFStandardCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsCreateAllowed && ${isFascicoloStandardCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="showCreaFascicoloStandard()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fsSearchAllowed && !${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" href="${goToFStandardSearchURL}" class="ng-cloak" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fsSearchAllowed && ${isFascicoloStandardSearch}">
<a role="menuitem" tabindex="-1" class="ng-cloak" ng-click="backToRicerca()" > Ricerca </a>
</li>
</ul>
</li>
</ul>
<!-- menu fascicoli del personale-->
<ul class="nav ng-cloak" id="navigatorPersonale" ng-if="navbarScope.mostraFascicoli">
<li class="dropdown ng-cloak" ng-if="!${isFascicoloPersonaleCreate} && !${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" ng-if="navbarScope.fpCreateAllowed" class="ng-cloak">
<a role="menuitem" tabindex="-1" class="ng-cloak" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed">
<a class="ng-cloak" role="menuitem" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
</ul>
</li>
<li class="dropdown active ng-cloak" ng-if="${isFascicoloPersonaleCreate} || ${isFascicoloPersonaleSearch}" >
<a href="#" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" tooltip="{{navbarScope.fascicoliPersonale.description}} " >
{{navbarScope.fascicoliPersonale.title}} <b class="caret"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop3">
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && !${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleCreateURL}" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpCreateAllowed && ${isFascicoloPersonaleCreate}">
<a role="menuitem" class="ng-cloak" tabindex="-1" ng-click="goToCrea()" > Crea </a>
</li>
<li role="presentation" class="ng-cloak" ng-if="navbarScope.fpSearchAllowed && !${isFascicoloPersonaleSearch}">
<a role="menuitem" class="ng-cloak" tabindex="-1" href="${goToFPersonaleSearchURL}" > Ricerca </a>
</li>
<li class="ng-cloak" role="presentation" ng-if="navbarScope.fpSearchAllowed && ${isFascicoloPersonaleSearch}">
<a class="ng-cloak" role="menuitem" tabindex="-1" ng-click="goToCerca()" > Ricerca </a>
</li>
</ul>
</li>
<%-- <li role="presentation" ng-hide="${isFascicoloPersonale}" ><a role="menuitem" tooltip="{{navbarScope.fascicoliPersonale.description}}" tabindex="-1" href="${goToFascicoloPersonaleURL}" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a></li> --%>
<%-- <li id="fat-menu" class="dropdown active" ng-show="${isFascicoloPersonale}"> --%>
<!-- <a href="#" id="drop3" role="button" class="dropdown-toggle" data-toggle="dropdown" ng-cloak>{{navbarScope.fascicoliPersonale.title}} <b class="caret" ></b></a> -->
<!-- <ul class="dropdown-menu" role="menu" aria-labelledby="drop3"> -->
<!-- <li role="presentation" ng-repeat="action in navbarScope.fascicoliPersonale.actions" ><a role="menuitem" tabindex="-1" href="" ng-click="exec(action.action)" ng-cloak>{{action.name}}</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
<ul class="nav pull-right ng-cloak" id="listaUffici">
<li id="fat-listaUffici-menu" class="dropdown ng-cloak" >
<a href="#" id="drop6" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ufficioSelected.nomeUnitaOrganizzativa}} " >{{navbarScope.ufficioSelected.displayName}}
<b class="caret ng-cloak" ng-show="navbarScope.listaUffici.length>1"></b></a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop6" ng-show="navbarScope.listaUffici" >
<li role="presentation" class="ng-cloak" ng-repeat="u in navbarScope.listaUffici" class="ng-cloak"><a role="menuitem" tabindex="-1" href="" ng-click="navbarScope.cambiaUfficio(u)" title="{{u.nomeUnitaOrganizzativa}}" >{{u.displayName}}</a>
</li>
</ul>
</li>
<li id="fat-listaRuoli-menu" class="dropdown ng-cloak" >
<a href="#" id="drop7" role="button" class="dropdown-toggle ng-cloak" data-toggle="dropdown" title="{{navbarScope.ruoloSelected.codice}}" >{{navbarScope.ruoloSelected.codice}}
<b class="caret ng-cloak" ng-show="navbarScope.ufficioSelected.ruoli.length>1"></b>
</a>
<ul class="dropdown-menu ng-cloak" role="menu" aria-labelledby="drop7" >
<li role="presentation" ng-repeat="r in navbarScope.ufficioSelected.ruoli" class="ng-cloak" >
<a role="menuitem" class="ng-cloak" tabindex="-1" href="" ng-click="navbarScope.cambiaRuolo(r)" title="{{r.codice}}" >{{r.codice}}</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
There is some reason you need the "style" attribute? This style overrides the class css code and if is present it will always be "display:hidden".
As a quick&dirty option you can use ng-if to show/hide html code. Remove all ng-cloack and the style attribute and use:
<div ng-if="loadEnded"> content </div>
I used it in a portlet with liferay 6.2/angular 1.4 and it works.
The goal of this page is to show different options based on the drop down selection. The toggle is currently working as desired without the if statement in place. How can I adjust my if statement to do the correct comparison?
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<link href="~/Content/SearchInventory.css" rel="stylesheet" />
<script>
$(function () {
$(".dropdown-menu li a").click(function () {
var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
if(selection =='Projectors') {
$('#projectorSearch').toggle();
}
});
});
</script>
<h2>Search Inventory</h2>
<div class="col-md-12">
<div class="row">
<div class="col-md-3">
<div class="btn-group">
<button class="btn btn-primary dropdown-toggle btn-lg" type="button" id="dropDownSelectItemType" data-toggle="dropdown" aria-expanded="true">
Select an Item Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labeledby="dropDownSelectItemType">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Projectors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desktop Printers</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Network Printers</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Tablets</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Televisions</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Polycom Phones</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cameras</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Monitors</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Leased Printers</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Cell Phones</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Chair(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Keyboard(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Mouse(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Footrest(ergo)</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Licensed Software</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Desk Phones</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="projectorSearch" id="projectorSearch">
<label>onomonpeia</label>
</div>
</div>
You don't need to go arround to find the clicked text because you already have access to HTMLAnchorElement element referenced as this
Use
var selection = $(this).text();
Instead of
var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
The full example:
$(function () {
$(".dropdown-menu li a").click(function () {
var selection = $(this).text();
if(selection =='Projectors') {
$('#projectorSearch').toggle();
}
});
Here is a Working Sample
you did well, but missed one thing.
var selection = $(this).parents(".btn-group").find('.selection').text($(this).text());
this line will change text of .selection. but doesn't return $(this).text()
so you have to compare $(this).text() with string, not selection.
or just redefine the selection again, like these 2 lines.
$(this).parents(".btn-group").find('.selection').text($(this).text());
var selection = $(this).text()
I am making a simple dropdown menu using Bootstrap 3 to sort my list of users as follows:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name<span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
</ul>
</div>
However, the glyphicon is not aligned on the same line. How can I make it be on the same line as "First Name"?
What version of bootstrap are you using?
New version 3.3.1 works just fine, here is working fiddle
http://jsfiddle.net/52VtD/9050/
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="sortUsers" data-toggle="dropdown">
Sort by
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="sortUsers">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">First Name <span class="glyphicon glyphicon-sort-by-alphabet"></span></a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Last Name</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Nickname</a></li>
</ul>
</div>
Many thanks for your investigations. Since it appears that the JavaScript and HTML are not the problems, I decided to check my css file and found that I was overriding the default dropdown class specs. I have since adjusted it, and now it works as expected. Thanks again for all those who helped, I will upvote. :)
I have this code:
<div class="navbar">
<div class="navbar-inner">
<div class="container" style="width: auto;">
<ul class="nav">
<li>Startseite</li>
<li class="dropdown">
<a id="drop1" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
<li class="dropdown">
<a id="drop2" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Produkte<b class="caret"> </b></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="drop2">
<li role="presentation"><a role="menuitem" tabindex="-1" href="http://google.com">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#anotherAction">Another action</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
it shoud show up like this:
but it is showing up like this in my code(i click on produkte):
this is my header in html:
<link href="{{STATIC_URL}}css/bootstrap.css" rel="stylesheet">
<script src="{{STATIC_URL}}js/jquery191.js"></script>
<script src="{{STATIC_URL}}js/bootstrap.min.js"></script>
why is this? can someone please help me?
thanks a lot
you have used float:left for li you need to remove it from you custom css file.