I have used "-webkit-overflow-scrolling: touch" to have smooth swipe across the screen for mobile (IOS Device).My page have 5 list items and need to swipe smoothly.After added class "-webkit-overflow-scrolling: touch" Can see a horizontal scroll bar which goes away after I complete my swipe or remove hand from device.
I have tried using overflow-y hidden but this doesn't help
How to disable this horizontal scroll bar?
<div class="nav-tablist">
<ul class="nav-listitems" id="tab-controls" role="tablist">
<li class="nav-item active" >
Home
</li>
<li class="nav-item" >
<a href="" class="navtab-link " id="aboutus" aria-controls="tabs_aboutus" role="tab" tabindex="-1" aria-selected="false">aboutus
</a>
</li>
<li class="nav-item" >
help
</li>
<li class="nav-item" >
<a href="" class="navtab-link " id="contact" aria-controls="tabs_contact" role="tab" tabindex="-1" aria-selected="false"> Stores
</a>
</li>
<li class="nav-line" aria-hidden="true" style="width: 48px; left: 0px;"></li></ul>
</div>
Here is my code ....
Related
I want the navbar always to be of a certain height, but when applying certain padding, when expanding the menu the whole navbar expands, and the initial not expanded navbar 'loses' part of its height, and also you see that padding to the sides. It's a bit tricky for me to explain but you'll hopefully see what I mean in this example:
#navbarMain {
background-image: linear-gradient(#6ebebe, #28648c 80%);
padding: 1rem;
}
.navbar-nav {
background-color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<nav id="navbarMain" class="navbar navbar-expand-lg navbar-dark fixed-top shadow">
<a class="navbar-brand" href="/"> <i class="fas fa-book text-light"></i> Navbar Brand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Toys</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Store</a>
</li>
</ul>
</div>
</nav>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
As you can see, when expanded the gradient is being applied to the whole expanded navbar (brand + li) , and I need that gradient to be applied only an always to the initial 'non expanded navbar' (brand section). Is it a way to keep the 'not expanded navbar’ applied properties sort of independent from the expanded menu?
Thanks in advance.
You may use a media query to solve this problem
check this link may solve your issue
My navbar on the phone opens, but it does not close.
<div class="carousel-inner">
<nav class="navbar navbar-expand-lg navbar-light bg-primary nawigacja">
<div class="container">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar10">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="navbar10">
<ul class="navbar-nav nav-fill w-100">
<li class="nav-item">
<a class="nav-link" href="#">First tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button1">2nd Tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button2">3rd Tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button3">4th tab</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#button4">5th Tab</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">6th Tab</a>
</li>
</ul>
</div>
</div>
in the elements I see that before clicking the code looks like this:
<div class="navbar-collapse collapse" id="navbar10">
and literally for a few seconds the code changes into:
navbar-collapse collapsing
next in 1 sec:
navbar-collapse collapse show
after another click it changes to
navbar-collapse collapsing
and after 1 sec again:
navbar-collapse collapse show
Navbar does not close at all after opening.
//edit:
I will add that on codeply it works.
I managed to fix it.
For others who are struggling with the same problem, I will tell you that I had to remove the following from the section:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
Example of problem is here:
http://liveweave.com/fRs3PL
Basically, I have a modal being triggered from a dropdown, and for some reason the modal hides behind the grey shadow and then disappears altogether a moment later.
What is going on here?!
You need to take the revel modal (<div class="reveal">) and all of its contents and place it so that it is a child of only the <body> element. You don't want it to be contained inside of other elements.
<body>
<div class="row">
<div class="small-12 medium-3 columns">
<ul class="dropdown menu" data-dropdown-menu="" role="menubar" data-dropdownmenu="3z4e20-dropdownmenu" aria-selected="false" aria-expanded="false" data-is-click="false">
<li role="menuitem" class="has-submenu is-dropdown-submenu-parent is-down-arrow" aria-haspopup="true" aria-selected="false" aria-expanded="false" aria-label="Actions" data-is-click="false">
Actions
<ul class="menu submenu is-dropdown-submenu first-sub vertical" data-submenu="" aria-hidden="true" role="menu">
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item"><a data-open="change-password-modal-0" aria-controls="change-password-modal-0" id="8p079l-reveal" aria-haspopup="true" tabindex="0">Change Password</a>
</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Disable</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Delete</li>
<li role="menuitem" class="is-submenu-item is-dropdown-submenu-item">Transfer</li>
</ul>
</li>
</ul>
</div>
</div>
<div class="reveal" id="change-password-modal-0" data-reveal="rcsjob-reveal" data-reset-on-close="true" aria-labelledby="8p079l-reveal" role="dialog" aria-hidden="true" data-yeti-box="change-password-modal-0" data-resize="change-password-modal-0">
<h1>Change Password</h1>
<p class="lead">You are changing the password for:</p>
<label>Password: <input type="text"></label>
<button class="close-button" data-close="" aria-label="Close reveal" type="button">
<span aria-hidden="true">×</span>
</button>
</div>
</body>
I have two sortable lists next to each other.
See this example:
http://jsfiddle.net/2Fbt6/
If you drag "Item 6" to the right, it gets added to the second last position instead to the last.
If you drag "Item 6" to the right, to the left, and again to the right, it's correct.
Code:
HTML:
<div class="categories">
<ul class="items">
<li id="item1" class="item ui-state-default">Item 1</li>
<li id="item2" class="item ui-state-default">Item 2</li>
<li id="item3" class="item ui-state-default">Item 3</li>
<li id="item4" class="item ui-state-default">Item 4</li>
<li id="item5" class="item ui-state-default">Item 5</li>
<li id="item6" class="item ui-state-default">Item 6</li>
</ul>
<ul class="items" style="background: #efefef;">
<li id="item5" class="item ui-state-default">Item 1</li>
<li id="item6" class="item ui-state-default">Item 2</li>
<li id="item7" class="item ui-state-default">Item 3</li>
</ul>
</div>
CSS:
.items { width: 100px; float: left; height: 500px;list-style-type: none;}
.placeholder { height: 18px; background-color: #ffd;}
JS:
$( ".items" ).sortable({
connectWith: ".items",
placeholder: 'placeholder'
});
$( ".categories" ).sortable({
connectWith: ".categories"
});
I'd be pleased if anybody could think of a workaround for this issue.
In my case, the left list may be very long, and it's annoying, if a user has to scroll up all the way, to drag the element to the last position of the right list.
EDIT:
Seems like this is a bug in jQuery-ui that will be addressed in version 1.11:
http://bugs.jqueryui.com/ticket/9314
Seems like this is a bug in jQuery-ui that will be addressed in version 1.11: http://bugs.jqueryui.com/ticket/9314
I am going to implement twitter bootstrap's carousel in order to display five items at once. My system uses the template engine smarty.
I am already familiar with smarty basics. The following code would display all my items:
<ul class="thumbnails">
{foreach $items as $item}
<li class="span2">
<div class="caption">
<h5>{$item.title}</h5>
</div>
<div class="thumbnail">
<img src="{$item.image}" alt="">
</div>
</li>
{/foreach}
</ul>
Unfortunately twitter bootstrap's carousel needs all the items separated into blocks, like that:
<ul class="thumbnails">
<div class="item active">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
<div class="item">
<ul class="thumbnails">
<li class="span2 offset1">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
<li class="span2">...</li>
</ul>
</div>
...
</ul>
How do I achieve this by using smarty's foreach loop:
Putting 5 items into one div.item the next 5 items into the next div.item and so on
The first div.item should get the class 'active'
The first item in every div.item should get the class '.offset1'
Smarty defines some magic variables which allow you to see how many times the loop has gone through (see the documentation for {foreach} for all the details).
In your case you want to check:
{$item#first} to open the first, active div.item
{$item#iteration is div by 5} to close and open the next div.item, and give its first li the offset1 class
{$item#last} to close off the last div.item whether or not it's divisible by 5