I am using UI Bootstrap 14.3 and I am trying to have an image within the NavBar to dropdown a menu when clicked.
I have implemented the below code however the menu pops up at the top of the page and is not aligned under the image.
Does anybody have any suggestions to fix and improve this below solution?
<span uib-dropdown on-toggle="toggled(open)">
<a href id="simple-dropdown" uib-dropdown-toggle style="padding-top: 0px; padding-bottom: 0px;">
<img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="position: relative;top: 10px;float: left; left: -5px;height:100%;">
</a>
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style="">
<li>
</span> Settings
</li>
</ul>
</span>
By removing the span and moving uib-dropdown to the li element. It aligned perfectly
<li uib-dropdown style="padding-left:0px;margin-left:0px;">
<a href id="simple-dropdown" uib-dropdown-toggle class="profile-image dropdown-toggle" style="padding-top: 10px; padding-bottom: 10px;">
<img src="http://placehold.it/30x30" class="img-rounded" alt="Rounded Image" style="heigth:30px;width:30px;margin-left:0px;padding-left:0px;">
</a>
<ul class="uib-dropdown-menu" aria-labelledby="simple-dropdown" style="">
<li>
</span> Settings
</li>
<li>
</span> Sponsored
</li>
<li>
</span> Admin Console
</li>
<li>
</span> Logout
</li>
</ul>
</li>
Related
I am able to toggle across the tabs on larger devices but on the smaller devices, it does not work. There are also no errors in the console. The tab is also wrapped in a div that has a z-index of -1. I need it to have a z-index of -1 so that when I scroll up it goes under another div. If I remove the z-index from the wrapper I am able to click the tabs.
I cannot add a higher z-index to the div I'd like these tab items to scroll under because a dropdown list from the navbar will be hidden behind it.
<ul class="nav nav-tabs innerTab" id="profileTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#personal" type="button"
role="tab" aria-controls="personal" aria-selected="true">Personal Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="account-tab" data-bs-toggle="tab" data-bs-target="#account" type="button"
role="tab" aria-controls="account" aria-selected="false">Account
Information</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="kyc-tab" data-bs-toggle="tab" data-bs-target="#kyc" type="button" role="tab"
aria-controls="kyc" aria-selected="false">
Documents</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="password-tab" data-bs-toggle="tab" data-bs-target="#password" type="button"
role="tab" aria-controls="password" aria-selected="false">Password change</button>
</li>
</ul>
<div class="tab-content" id="profileTabContent">
<div class="tab-pane show active" id="personal" role="tabpanel" aria-labelledby="personal-tab">
P
</div>
<div class="tab-pane" id="account" role="tabpanel" aria-labelledby="account-tab">
A
</div>
<div class="tab-pane" id="kyc" role="tabpanel" aria-labelledby="kyc-tab">K
</div>
<div class="tab-pane" id="password" role="tabpanel" aria-labelledby="password-tab">P
</div>
</div>
Did u tried wrap or change containers into "label", may be need add them display: block; and remove some padding/margin to keep your layout
I have using carousel in my AngularJS App. I want change id of carousel each iteration but it is not working Please tell what did wrong?
<div ng-repeat="data in details">
<div class="carousel" id="{{data._id}}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
<div class="carousel-inner">
<div class="item" ng-class="{active:!$index}" ng-repeat="photo in data.photos">
{{$index}}
<a target="_blank" ui-sref="PhotoUpload">
<img src="{{ photo }}" style=" width: 290px;
max-width: 100% ;
height: 250px;">
</a>
</div>
</div>
<a class="left carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" data-target="#{{data._id}}" ng-non-bindable data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
First carousel image slide are working but after that second carousel images are not working if i click prev and next button first carousel images changing. but second images
Please help me.
I usually handle dynamic id values like this:
[attr.id]="data._id"
and for data-target
[attr.data-target]="'#' + data._id"
There must be possibilities your IDs are same for all elements. Please append {{$index}} within ID.
Try below snippet
id="{{data._id}}_{{$index}}"
I am new to bootstrap and AngularJs. I am using bootstrap and Angular Js for my current application. When I use the bootstrap carousel directly inside the index page, the carousel's slide link are working absolutely perfect. But When I load the carousel markup through the second files using ng-view, the slide links does not work correctly. It only works one time and then just don't work the next time. Where I am going wrong. I am pasting the code below:
<div id="myCarousel" class="carousel slide myslider" data-ride="carousel" data-interval="2000">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/d.jpg" alt="d1" class="center-block">
</div>
<div class="item">
<img src="img/c2.jpg" alt="c2" class="center-block">
</div>
<div class="item">
<img src="img/b.jpg" alt="b3" class="center-block">
</div>
<div class="item">
<img src="img/a.jpg" alt="a4" class="center-block">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
I used angularJS along with bootstrap to display carousel. I fetched images using angular and now using ng-repeat I want to display them in a carousel. But i am facing a problem, all the images are lined one below the another. How can i resolve this issue??
My code to display carousel:
<div id="carousel-example-generic" class="carousel slide"
data-ride="carousel" align="center">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<div class="carousel-inner" role="listbox" ng-controller="bannerCtrl">
<div>
<div class="item" data-ng-repeat="banner in banners">
<img src="{{banner.bannerUrl}}" alt="{{banner.bannerAltText}}">
<div class="carousel-caption">{{banner.bannerAltText}}</div>
</div>
</div>
</div>
<a class="left carousel-control" href="#carousel-example-generic"
role="button" data-slide="prev"> <span
class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a> <a class="right carousel-control" href="#carousel-example-generic"
role="button" data-slide="next"> <span
class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
You can use offset x for your carousel images positioning.
or u can simply use angular-carousel
https://github.com/revolunet/angular-carousel
Can anyone help me figure out why my menu is not displaying on my mobile device.
The collapsible menu is displaying fine in the browser but on a mobile (or narrow browser window), no links are displayed when you click the 3 bars that should display the links.
I am using jhipster so my code is split between multiple files.
All menus are working fine bar the menu options that should appear on a mobile device.
Any help is greatly appreciated
My header.html is as follows
<header class="clearfix">
<i class="fa fa-bars"></i>
<!-- Logo -->
<div class="logo">
<a href="#/">
<span translate="global.title">Cloud Ranger</span>
</a>
</div>
<div class="menu-button" toggle-off-canvas data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</div>
<div class="top-nav">
<ul class="nav-right pull-right list-unstyled">
<li class="dropdown langs text-normal" ng-controller="LanguageController">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"><span translate="global.menu.language">Language</span>
</a>
<ul class="dropdown-menu with-arrow pull-right list-langs" role="menu">
<li data-ng-show="lang !== 'English' ">
English</li>
</ul>
</li>
</ul>
</div>
</header>
My navbar.html is as follows
<div id="nav-wrapper" >
<div ng-switch="isAuthenticated()">
<ul id="nav" role="navigation" ng-controller="NavbarController"
data-collapse-nav data-highlight-active data-slim-scroll>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/login"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.login">Login</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="false"><a
href="#/register"> <i class="fa fa-user"></i> <span
class="icon-bg bg-danger"></span> <span class="hidden-tablet"
translate="global.menu.account.register">Register</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="home"> <i class="fa fa-home"> <span
class="icon-bg bg-danger"></span></i> <span class="hidden-tablet"
translate="global.menu.home">Dashboard</span>
</a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="credential"><i class="fa fa-cloud"><span
class="icon-bg bg-orange"></span></i><span class="hidden-tablet"
translate="global.menu.entities.credential">Credential</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="schedule"><i class="fa fa-calendar"><span
class="icon-bg bg-warning"></span></i><span class="hidden-tablet"
translate="global.menu.entities.schedules">Schedules</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="userTask"><i class="fa fa-tasks"><span
class="icon-bg bg-info"></span></i><span class="hidden-tablet"
translate="global.menu.entities.userTask">Tasks</span></a></li>
<li ui-sref-active="active" ng-switch-when="true"><a
ui-sref="taskExecutionLog"><i class="fa fa-bar-chart-o"><span
class="icon-bg bg-primary"></span></i><span class="hidden-tablet"
translate="global.menu.admin.logs">Logs</span></a></li>
<li>
<a href="#/password"><i class="fa fa-user"><span class="icon-bg bg-danger"></span></i><span
translate="global.menu.account.settings">Account></span></a>
<ul>
<li ui-sref-active="active"><a ui-sref="password"><i class="fa fa-caret-right"></i><span translate="global.menu.account.password">Password</span></a></li>
<li ui-sref-active="active"><a ui-sref="settings"><i class="fa fa-caret-right"></i><span translate="global.menu.account.settings">Settings</span></a></li>
<li ui-sref-active="active"><i class="fa fa-caret-right"></i><span translate="global.menu.account.logout">Logout</span></li>
</ul>
</li>
</ul>
</div>
</div>
Hello Demo have you looked through your CSS file and checked that the collapsible menu is not been disabled for smaller screens through the means of the #media queries, for instance #media (min-width: xxpx) can be used to define different style rules for different media types/devices. Hope this helps.