I cant select a dropdown in the dropdown box which has images in them in dropdown how to solve this isue jsfiddle
<div class="form-group">
<label class="col-md-4 control-label">Do you belong to the part of organisation ?</label>
<div class="col-md-4 selectContainer">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="http://lorempixel.com/75/50/abstract/">
Select
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Select a group </li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">women entrepreneurship branch
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">Tamilnadu Corporation for Development of Women
</li>
<li>
<img src="http://lorempixel.com/75/50/abstract/">Mompreneur Circle
</li>
</ul>
</div>
</div>
</div>
Related
I'm pretty sure I have the routing setup correctly within my application because when I type the correct path it takes me to and displays the correct information. Where I am having issues is the router link. I believe it has something to do with the HTML? When I click on each link nothing happens. Anyways I will post the HTML to see if someone can point out something I may be doing wrong. I've also got the github repository link here: https://github.com/jadenadams329/JIT1
<div class="app-bar-navbar vertical-appbar">
<nav class="navbar navbar-expand-lg navbar-dark bg-primary app-bar-section pr-0 d-flex justify-content-start">
<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" (blur)="displaySideNav = false">
<i class="icon-menu-bold"></i>
</button>
<span class="vertical-line-seperator left"> </span>
<div class="navbar-brand d-flex align-items-center">
<img src="assets/images/logo/secondary-logo-site.svg" class="logo-img">
<!-- <i class="icon-bd-logo-bold"></i> -->
<span class="brand-name">JIT Management Console</span>
</div>
<div class="navbar-right-content justify-content-end d-flex">
<div class="navbar-right-toggle d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown-appbar d-flex">
<span class="vertical-line-seperator left"> </span>
<a class="nav-link navbar-toggler" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
<i class="icon-more-bold text-white rotate-90"></i>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
<li role="separator" class="dropdown-divider"></li>
<li class="nav-item">
Sign Out
</li>
</ul>
</li>
</ul>
</div>
<div class="custom-dropdown d-flex">
<ul class="navbar-nav">
<li class="nav-item dropdown-appbar d-flex">
<span class="vertical-line-seperator left"> </span>
<a class="nav-link dropdown-toggle" id="navbarDropdownMenuLink" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Admin
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabe2">
<li>
Sign Out
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<section class="vertical-sidebar collapse navbar-collapse justify-content-end" id="navbarSidebarContent-main"
[ngClass]="{'show':displaySideNav}">
<nav class="nav">
<ul class="sidebar-links">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
</nav>
</section>
</div>
<div>
<router-outlet></router-outlet>
</div>
What I expect to happen is when I click on the links that it shows the correct view so I do not have to type in the path each time.
You have blur event in button element. Currently It's removing the section element whenever you are focused out of button. remove that blur event from button and place click event on ui element and set the displaySidenav to false.
<button class="navbar-toggler1 m-0 focusable" (click)="displaySideNav =!displaySideNav;" >
<i class="icon-menu-bold"></i>
</button>
<ul class="sidebar-links" (click)="displaySideNav = false">
<li>
<a routerLink="/home">Home</a>
</li>
<li>
<a routerLink="/manage-sessions">Manage Sessions</a>
</li>
<li>
<a routerLink="/export-scancodes">Export ScanCodes</a>
</li>
<li>
<a routerLink="/imu-data">IMU Data</a>
</li>
<li>
<a routerLink="/global-order-days">Global Order Days</a>
</li>
<li>
<a routerLink="/order-exception-report">Order Exception Report</a>
</li>
</ul>
I have a navbar that features a search bar and then the hamburger menu next to each other. Im having trouble keeping these elements centered. when I switch between different mobile screen sizes the element position changes
here is the html:
<div class="col-xs-12" id="mobile-search">
<div class="search-area">
<ul class="search-bar" id="mobile-go">
<li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
<li class="search-wrapper no-wrap">
<div class="no-wrap search-box" id="mobile-center">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</div>
</div>
</div>
I want the ul elements to always be centered but adding the col centered class did nothing. What else should I be trying?
edit: Full code for header file:
<ac:pagelayout id="HeaderPage">
<div class="LayoutTopTop">
<div class="row">
<div class="col-sm-12 hidden-xs">
<ac:widgetarea id="HeaderBar"><ac:widget id="HTML3742" type="HTML"><div class="top-bar">
<ac:if setting="Show Phone Number in Header">
<div class="top-bar-info"><strong>##STOREPHONE##</strong></div>
</ac:if>
<ac:if setting="Show Email Address in Header">
<div class="top-bar-info"><strong> <a class="inherit no-ul color-inherit" href="mailto:##STOREEMAIL##">##STOREEMAIL##</a></strong></div>
</ac:if>
</div></ac:widget>
</ac:widgetarea>
</div>
</div>
<div class="row top-header">
<div class="col-sm-7 contentCentered hidden-xs ">
<ac:widgetarea id="UtilNavArea"><ac:widget id="HTML3744" type="HTML">
<a href="/">
<img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech ">
</a>
</ac:widget>
</ac:widgetarea>
</div>
<div class="col-sm-4 col-sm-push-1 hidden-xs ">
<ul class="header-nav nav navbar-nav ">
<ac:if setting="Show Search as Dropdown">
<li><a href="#" data-toggle="dropdown">
<i class="icon-search"></i>
<span class="visible-xs visible-lg">Search</span>
</a>
<ul class="dropdown-menu">
<li>
<div class="panel-body no-wrap search-box" id="nav-search">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</li>
</ac:if>
<li>
<ac:if setting="Show Customer Login as Dropdown">
<a href="#" data-toggle="dropdown">
<i class="icon-user"></i>
<span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
</a>
<ul class="dropdown-menu">
$$CUSTOMERLOGIN3739$$
</ul>
<ac:else>
<a href="/store/myaccount.aspx">
<i class="icon-user"></i>
<span class="visible-xs visible-lg">##IF[LoggedIn]## My Account ##ELSE## Login ##ENDIF##</span>
</a>
</ac:else>
</ac:if>
</li>
<li class="no-wrap">
<ac:if setting="Show Shopping Cart as Dropdown">
<a href="#" data-toggle="dropdown">
<div class="in-block"><i class="icon-shopping-cart"></i></div>
<span class="visible-xs visible-lg">Shopping Cart</span>
##IF[CartIsEmpty]## ##ELSE##
<span class="badge">##CARTITEMSCOUNT##</span>
##ENDIF##
</a>
<ul class="dropdown-menu">
<li>
##IF[CartIsEmpty]##
<p class="m-20">Your cart is empty!</p>
##ENDIF##
$$SMALLSHOPPINGCART3740$$
</li>
</ul>
<ac:else>
<a href="/store/shopcart.aspx" rel="nofollow">
<div class="in-block"><i class="icon-shopping-cart"></i></div>
<span class="visible-xs visible-lg">Shopping Cart</span>
##IF[CartIsEmpty]## ##ELSE##
<span class="badge">##CARTITEMSCOUNT##</span>
##ENDIF##
</a>
</ac:else>
</ac:if>
</li>
</ul></div> <!-- just added-->
</div>
<ac:widgetarea id="TopHeaderWidgets"><ac:widget id="MENUBAR3738" type="MenuBar" linkgroupid="1">
<ac:visibilityarea id="dvControl">
$$ADMINHELP$$<div id="little">
<header class="top"></header>
<div id="nav">
<div>
<img src="/images/Header-images/Hitech-logo.png" class="main-logo img-responsive" alt="HiTech " id="top-logo">
</div>
<nav class="navbar navbar-inverse navbar-static-top marginBottom-0" role="navigation" data-spy="affix" data-offset-top="60">
<div class="navbar-header">
<div class="col-xs-12" id="mobile-search">
<div class="search-area">
<ul class="search-bar" id="mobile-go">
<li> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</li>
<li class="search-wrapper no-wrap">
<div class="no-wrap search-box" id="mobile-center">
##SEARCHBOX[autocomplete=true]##
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-1">
</div>
<!-- /.navbar-collapse -->
</nav>
</div>
</div><!--end of mobile-->
Try to wrap your ul elements or whatever content you want to centre inside div with container class.
<div class="container">
Put Content Here
</div>
I'm creating the menu of a page in bootstrap 3.
This is my panel I have cretaed.
Here is my code of a panel I created:
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel mepanelo">
<div class="row ">
<div class="col-md-4 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="figurini.php">Figurini</a>
</li>
<li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a>
</li>
<li><a class="btn" role="button" href="accessori.php">Accessori</a>
</li>
<li><a class="btn" role="button" href="strumenti.php">Strumenti</a>
</li>
</ul>
</div>
<div class="col-md-4 big_list">
<ul class="list1 ">
<li><a class="btn" role="button" href="fantasy.php">Fantasy</a>
</li>
<li><a class="btn" role="button" href="aerei.php">Aerei</a>
</li>
<li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a>
</li>
<li><a class="btn" role="button" href="edizioni.php">Edizioni</a>
</li>
</ul>
</div>
<div class="col-md-4 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li><a class="btn" role="button" href="navi.php">Navi</a>
</li>
<li><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
</div>
This panel and the lists inside it are responsive but the problem is that when the page is in the size of a tablet here is how the lists appear:
I don't want all that blank gray space there but I want all the elements to appear in 2 lists for tablet and not in one list. I proved something like hidden-sm but this hides the things. Is there a way to put all the eleemts which are in three lists just in 2 lists for tablet? Thanks!
use <div class="col-md-4 col-sm-4 big_list"> instead of <div class="col-md-4 big_list">
Change the class from col-md to col-sm
<div class="col-md-4 big_list">
to
<div class="col-sm-4 big_list">
You need to hide 3rd list only on tablet (small devices) and adjust elements of that list in other 2 lists and show that elements only on small devices. Read comments in code. And for bootstrap hidden and visible classes Check this.
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<div class="panel mepanelo">
<div class="row ">
<div class="col-md-4 col-sm-6 big_list">
<ul class="list1">
<li><a class="btn" role="button" href="figurini.php">Figurini</a>
</li>
<li><a class="btn" role="button" href="mezzi.php">Mezzi Militari</a>
</li>
<li><a class="btn" role="button" href="accessori.php">Accessori</a>
</li>
<li><a class="btn" role="button" href="strumenti.php">Strumenti</a>
</li>
<!-- follwing elements are hidden on all devices except small (tablets) -->
<li class="hidden-xs hidden-md hidden-lg">
<a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li class="hidden-xs hidden-md hidden-lg">
<a class="btn" role="button" href="navi.php">Navi</a>
</li>
</ul>
</div>
<div class="col-md-4 col-sm-6 big_list">
<ul class="list1 ">
<li><a class="btn" role="button" href="fantasy.php">Fantasy</a>
</li>
<li><a class="btn" role="button" href="aerei.php">Aerei</a>
</li>
<li><a class="btn" role="button" href="ambientazioni.php">Ambientazioni</a>
</li>
<li><a class="btn" role="button" href="edizioni.php">Edizioni</a>
</li>
<!-- follwing elements are hidden on all devices except small (tablets) -->
<li class="hidden-xs hidden-md hidden-lg"><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li class="hidden-xs hidden-md hidden-lg" ><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
<div class="col-md-4 hidden-sm big_list"> <!-- hidden on small devices -->
<ul class="list1">
<li><a class="btn" role="button" href="busti.php">Busti</a>
</li>
<li><a class="btn" role="button" href="navi.php">Navi</a>
</li>
<li><a class="btn" role="button" href="colori.php">Colori</a>
</li>
<li><a class="btn" role="button" href="occasioni.php">Occasioni</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-1"></div>
</div>
I think the only problem is you are not including the bootstrap engine. Please see to it that you have properly linked your bootstrap files. Once that is done, this code should work fine.
<div class="col-sm-4 big_list">
I have this issue when the viewport switches to a mobile version
using bootstrap v3
when the navbar switches to the mobile version of itself , the 2nd and the 3rd element come on the same line , because they have a dropdown class under them.
as shown in the picture. img1 img2
if the drowpdown class isnt put then the elements show themselves properly
any help here?
<div class="navbar-header ">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-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="index.html">
<img class="img-responsive" src="images/logo/logo.png" alt="Deccan Airsports Logo">
</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li class="scroll">
Home
</li>
<li class="scroll dropdown">
Hot Air Balloon <span class="caret hidden-sm hidden-xs"> </span>
<div class="dropdown-content hidden-sm hidden-xs">
Book A Ride
Membership
FAQs
</div>
</li>
<li class="scroll dropdown">
Services<span class="caret hidden-sm hidden-xs"></span>
<div class="dropdown-content hidden-sm hidden-xs">
Gliders
Sky-Diving
Drones
Hang-Gliders
</div>
</li>
<li class="scroll">Contact</li>
<li><a class="scroll" href="about.html">About</a></li>
<li><a class="scroll" href="faq.html">FAQs</a></li>
<li class="scroll dropdown">Events<span class="caret "></span>
<div class="dropdown-content hidden-sm hidden-xs">
News & Press
Branding
Advertisement
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</header>
The issue might be with your "dropdown" class - make sure it doesn't have display:inline.
I've set everything I need 100% to to 100% height but the sidebar still refuses to got to the bottom of the page when using Bootstrap 3.0. I've used the -9999px trick but that knocks out the dropdown I have in the navigation above it so I can't use that fix.
What I've tried instead is:
<div class="row-fluid fill">
<nav class="col-lg-2 fill">
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-piggy-bank navicon" aria-hidden="true"></span> Animal Care</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-user navicon" aria-hidden="true"></span> Customers</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-gift navicon" aria-hidden="true"></span> Donations</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-calendar navicon" aria-hidden="true"></span> Events</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-screenshot navicon" aria-hidden="true"></span> Marketing</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-briefcase navicon" aria-hidden="true"></span> Staff Mangement</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-globe navicon" aria-hidden="true"></span> Web Maintenance</a><br />
<a class="btn btn-link" href="#"><span class="glyphicon glyphicon-shopping-cart navicon" aria-hidden="true"></span> Products & Stock</a><br />
</nav>
<div class="col-lg-10 content fill">
<h1>Dashboard</h1>
<ul class="breadcrumb">
<li class="active">Home</li>
</ul>
<div class="row-fluid">
<div class="col-lg-4 zookeeper excount">
10
</div>
<div class="col-lg-4 birdofprey excount">
10
</div>
<div class="col-lg-4 otherex excount">
1
</div>
</div>
<div class="row-fluid">
<div class="col-lg-4 exlabel">
Zoo Keeper Experiences
</div>
<div class="col-lg-4 exlabel">
Bird of Prey Experiences
</div>
<div class="col-lg-4 exlabel">
Other Events
</div>
</div>
<div class="row-fluid">
<div class="col-lg-12 dashtoday">
<h2>Today - 17th March 2015</h2>
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist" id="dashTabs">
<li role="presentation" class="active">To-Do</li>
<li role="presentation">Keeper Log</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="todo">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="active todoitem">
To-Do Item Outstanding
</li>
</ul>
</div>
<div role="tabpanel" class="tab-pane fade" id="keeperlog">
<ul class="nav nav-pills nav-stacked dashtodo">
<li class="active todoitem">
To-Do Item Outstanding
</li>
<li class="disabled">
To-Do Item Complete
</li>
<li class="disabled">
To-Do Item Complete
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS I've added to Boostrap for the height is:
html, body {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
The culprit was a form tag that has been inserted automatically by ASP.Net to render the controls. The simple fix was to change the CSS to:
html, body, form {
height: 100%;
}
.fill {
min-height: 100%;
height: 100%;
}
The height now works as expected