I am trying to integrate twitter-typeahead with bootstrap3.
I want to use a typeahead inside a navbar.
The problem appears only when navbar is collapsed and only in mobile devices (issue at least in iPhone safari and BB10 browser), and it is the following:
The typeahead dropdown appears under the rest of the navbar content:
BlackBerry10 browser
Safari on iPhone
I tried tweaking z-index and position:
.twitter-typeahead .tt-dropdown-menu {
position: absolute !important;
z-index:9999 !important;
}
I have replicated the issue here:
http://jsfiddle.net/zZpQg/3/
Why is this happening only in mobile small devices?
How can I get the typeahead dropdown to appear on top of the rest of the links?
KindRegards
I also added
.tt-query {
backgroud-color: #fff !important;
}
for the input type.
Related
Codepen: https://codepen.io/Bobby__K/pen/eYZXQKo
I made a navbar with the encompassing nav given position: fixed.
.main-nav {
position: fixed;
z-index: 10;
left: 0;
top: 0;
padding: 0 5%;
height: 100px;
background-color: white;
width: 100%;
}
When I run this on Chrome, Firefox, and Firefox mobile, it works as intended; i.e. the navbar doesn't move and stays at the top. However, when I run it on Google Chrome mobile and scroll down, the navbar goes up a bit and then the fixed positioning seems to kick in. The problem here is that this cuts off a good 10% of my navbar.
Since this only happens when I preview Google Chrome's mobile view, I was wondering if this was just a visual bug shown in developer tools, instead of something that would happen once the website's live.
Notes:
I've made it responsive using the input method and with CSS :checked. As such, I usually keep the checkbox to the side with overflow-x hidden. I've tested the project while having the checkbox on the screen, but the same problem happens, so that wasn't the problem.
I've also tested this on Opera mobile view and Brave mobile view and the scrolling issue happens there too; so maybe this is something to do with how my code reacts to the Chrome Engine?
I've narrowed it down to a weird interaction with my #media screen and query. Whenever I make a change, it fixes the problem. However, once I close developer tools and reopen it, the scrolling issue reappears.
do you happen to have a codepen or something with the full html and css (and js if applicable). I'm wondering if there's a conflicting style outside of .main-nav that's causing this.
I'm making a new website where I want my navbar fixed top when scrolling. It works, but on mobile there is white space on top or bottom when we scroll. The problem is than I have a nav coming from left side on mobile. This nav doesn't moove when I scroll, no the top navbar go under the left navbar and its really ugly.
Here is my website if you don't understand https://www.hytalefrance.net
I've tried something like this:
overscroll-behavior: none;
But It change nothing
body {
height: 100%;
overflow: auto;
}
Do nothing to
It's a classic bootstrap 4 navbar, but I don't use fixed-top class to make it fixed, it's a custom class similar to fixed-top
.sticky.is-sticky {
position: fixed;
left: 0;
right: 0;
top: 0;
z-index: 1000;
}
I would like the whitespace on mobile disappears.
Some screenshot taken on my mobile (iPhone 6)
I'm actually scrolling down:
When nav is open:
When I scroll with nav open:
I guess you're taking about inertial scroll behavior caused by over scrolling a webpage in iPhone. There is no ideal fix for this problem.
There're few partial solutions that may / maynot work in your case
- How to disable inertial scrolling on body for iOS browsers?
- ipad safari: disable scrolling, and bounce effect?
Though, It is not recommended to prevent it. Doing so will intercept natural scroll smoothness in browser.
I'd suggest you to set your body's background color to the exact bg color of your nav bar to make it less obvious
I fixed the problem by removing my js function. On desktop navbar will not be fixed, on mobile the navbar is now directly fixed, and it works
I am facing an issue with bootstrap 3 modal in iOS. Is there any working solution to prevent background scroll in iPhone, However it's working perfect on android but in iPhone whenever I open a modal and try to scroll background scroll works with a modal scroll as well.
I have tried all the possible solutions position: fixed not working. overflow: hidden is already applied. Thanks
This is the default style on the modal.
.modal-open {
overflow: hidden; }
I have a navbar build with Twitter Bootstrap 3.1.1. When on an iPhone or iPad the dropdown menu hides behind the slider image. It has a position absolute and a z-index of 1000.
When on a desktop it goes well, it goes over de slider images.
If you go to http://sitegeregeld.nl/. You see that the dropdown menu disappears behind the slider on the homepage on an iPad and iPhone. I don't see a sollution.
What goes wrong?
I was having the same problem(only hiding behind content on ipad), and this solved it:
.navbar {
position: static;
}
.navbar .nav > li {
z-index: 1001;
}
I'm using a bootstrap/wordpress framework that has it's own css style sheet that sets the navbar to position: relative.
found answer here: z-index issue with twitter bootstrap dropdown menu
I am currently developping a website using twitter Bootstrap as a base. I develop using Chrome and there is no problems on it but when viewing the same page with Firefox, the menu and the content position themselves weirdly, as if there is no space.
You can take a look there:
http://www.penthousemontreal.com/
http://penthousemontreal.com/collections/moderne/
What could be causing the trouble?
update
Your are using a top: -100px; (relative position) on the .brand class (the image in your nav bar). The image will still take space in FF / IE on it's original position. Cause the float:left; of this images your content floats on the right side of this 'empty space'. A solution can be found here: CSS using negative relative positioning issue. Replace top with margin-top:
.brand {
margin-left: 20px !important;
margin-top: -100px;
position: relative;
}
Maybe your bootstrap files are changed / corrupt. You import bootstrap/css/bootstrap.css (and bootstrap-responsive.css) from wp-content/themes/MMS/style.css which seems to be version Bootstrap v2.3.2.
When i load your site with //netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css the problem is fixed. See: