Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Overflow-x hidden causing responsive nav menu positing issue

Tags:

Question Background:

I am using Jasny Bootstrap to implement a responsive offcanvas 'reveal' style menu.

The Issue:

When the menu is opened on a mobile device the scrolling element of the menu is not enabling.

I have wrapped the entire app (where my AngularJS view is injected) with a div style overflow-y:hidden as shown:

<body ng-app="app">
    <div style="overflow-x:hidden">
        <div ui-view style="height:100%">
            //View is injected here based on routing.
        </div>
    </div>
</body>

This overflow styling means i can now scroll the menu on a mobile device but i now have an issue where and When the menu is scrolled to the top there is a gap showing the menu underneath as shown here:

enter image description here

Once the page is scrolled down slightly the responsive navbar shows:

enter image description here

The Code:

The Following is as shown above, This is the main View div where the page is injected depending on its routing:

<body ng-app="app">
    <div style="overflow-x:hidden">
        <div ui-view style="height:100%">
            //View is injected here based on routing.
        </div>
    </div>
</body>

This is the Results view of the app which contains the navbar elements:

<div ng-controller="ResultsController" ng-show="hideSearch" style="height:100%">
    <div class="navmenu navmenu-default navmenu-fixed-left" id="updateMenu">
        <div class="text-center headerPad"><h3>Compzee <img src="Images/CompzeeLogoSmall.png" class="logoSize" /></h3></div>
        <div class="col-lg-12 pullInMenu">
            <form ng-submit="search()" novalidate="novalidate">
                <div class="form-group">
                    <label for="search">Search Term:</label>
                    <input type="text" class="form-control" ng-model="item" id="itemUpdate" required>
                </div>
                <div class="form-group">
                    <label for="search">Product Category:</label>
                    <select class="form-control" ng-model="catagory" required>
                        <option value="" disabled selected>Select A Product Category</option>
                        <option>All</option>
                        <option>Baby</option>
                        <option>Business, Office &amp; Industrial</option>
                        <option>Cameras &amp; Photography</option>
                        <option>Clothes &amp; Accessories</option>
                        <option>Comics, Books &amp; Magazines</option>
                        <option>Computers &amp; Tablets</option>
                        <option>Consoles</option>
                        <option>DVD's, Films &amp; TV</option>
                        <option>Garden &amp; Patio</option>
                        <option>Health &amp; Beauty</option>
                        <option>Holiday &amp; Travel</option>
                        <option>Home</option>
                        <option>Kitchen</option>
                        <option>Jewellery</option>
                        <option>Mobile Phones &amp; Accessories</option>
                        <option>Musical Instruments</option>
                        <option>Music</option>
                        <option>Pet Supplies</option>
                        <option>Shoes</option>
                        <option>Sporting Goods</option>
                        <option>Toys &amp; Games</option>
                        <option>Vehicle Parts &amp; Accessories</option>
                        <option>Video Games</option>
                        <option>Watches</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="search">Country:</label>
                    <select class="form-control" ng-model="selectedCountry" required>
                        <option value="" disabled selected>Select A Country</option>
                        <option>UK</option>
                        <option>US</option>
                        <option>FR</option>
                        <option>DE</option>
                    </select>
                </div>
                <div class="form-group">
                    <div class="text-center">
                        <img ng-src="{{countryImg}}" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="search">Marketplace</label>
                    <select class="form-control" ng-model="selectedMarketPlace" required>
                        <option value="" disabled selected>Select A Marketplace</option>
                        <option>Ebay & Amazon</option>
                        <option>Ebay</option>
                        <option>Amazon</option>
                    </select>
                </div>
                <div class="form-group">
                    <div class="text-center">
                        <img class="marketPlaces" ng-src="{{image}}" />
                        <img class="marketPlaces" ng-show=" showImg" ng-src="{{imageSecond}}" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="content">
                        <rzslider rz-slider-model="minRangeSlider.minValue" rz-slider-high="minRangeSlider.maxValue" rz-slider-options="minRangeSlider.options"></rzslider>
                    </div>
                </div>
                <div class="form-group">
                    <label for="search">Min Price</label>
                    <input type="text" class="form-control" ng-model="minTextVal" id="slider-margin-value-min" readonly>
                </div>
                <div class="form-group">
                    <label for="search">Max Price</label>
                    <input type="text" class="form-control" ng-model="maxTextVal" id="slider-margin-value-max" readonly>
                </div>
                <div class="form-group text-center">
                    <label for="search">Prices High To low</label>
                    <input id="highToLowBox" type="radio" ng-value="true" ng-model="priceOrder">
                </div>
                <div class="form-group text-center">
                    <label for="search">Prices Low To high</label>
                    <input id="lowToHighBox" type="radio" ng-value="false" ng-model="priceOrder">
                </div>

                <div class="form-group">
                    <button class="btn btn-success" ladda="searchingService.updating" type="submit" data-style="zoom-in" style="width:100%">
                        <span>Update</span>
                    </button>
                </div>
            </form>
        </div>
    </div>
    <div class="canvas" id="resultsView">
        <div class="navbar navbar-default navbar-fixed-top">
            <button id="menuBtn" type="button" ng-click="ScrollUp()" class="navbar-toggle" data-toggle="offcanvas" data-recalc="false" data-target=".navmenu" data-canvas=".canvas">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div id="containerId" class="container">
            <div class="topOffSet ">
                <div class="col-lg-12 text-center">
                    <div id="itemHolder">
                        <h4><b>{{searchingService.searchList.length}} Results found from your search criteria.</b></h4>
                        <div class="panel panel-default col-lg-12 text-center" ng-show="searchingService.noResults">
                            <div class="panel-body"><img src="Images/CompzeeLogoSmall.png" class="logoSize" /><p>We could not find any results to match your search criteria</p><p>Please review your search terms and try again.</p></div>
                        </div>
                        <div ng-repeat="item in searchingService.filteredItems" class="col-lg-4">
                            <div class="panel panel-default maxPanelHeight">
                                <div class="panel-heading textOverflow" id="panelHeading">
                                    <h3 class="panel-title text-center"><b>{{item.Title}}</b></h3>
                                </div>
                                <div class="panel-body">
                                    <a href={{item.url}} target="_blank"><img src={{item.Image}} class="picHeight img-rounded img-responsive center-block" /></a>
                                    <h4 class="text-center"><b>{{item.Price}}</b></h4>
                                    <h4 class="text-center"><a href={{item.url}} class="btn btn-success" target="_blank">See More</a></h4>
                                    <div class="text-center"><img class="originPic" src={{item.marketPlaceImg}} /></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-12 text-center">
                <uib-pagination total-items="items.length" ng-model="currentPage" max-size="maxSize" class="pagination-md" boundary-links="true" rotate="false">
                </uib-pagination>
            </div>
        </div>
    </div>
</div>
like image 692
user1352057 Avatar asked Aug 31 '16 20:08

user1352057

People also ask

What does overflow-X hidden do in CSS?

The overflow-x property specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.

Does overflow hidden prevent scrolling?

To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This hides all content beyond the element's border.

Why is overflow hidden?

overflow: hidden With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.

Does overflow hidden work on mobile?

Viewed in a desktop browser, the black menu bar properly extends only to edge of the window, since the body has overflow-x:hidden . In any mobile browser, whether Android or iOS, the black menu bar displays its full width, which brings whitespace on the right of the page.

1 Answers

If you have z-index issue:

  1. add z-index: 1000; to the .navmenu class.
  2. if still doesn't show it at top, add z-index: 1; to the .canvas class.
  3. if still doesn't work, it means you are using z-index inside other classes (sub or parent tags of .canvas or .navmenu class). for solving it you need to remove them. for searching it you just search z-index inside your entire project to find which one causing problem and then try number 1 and 2 again. Please be aware of inline styles. don't search just inside your css file. (I don't know what is your IDE but if you are using Eclipse just press CTRL+H and type z-index to search your entire project)
  4. if you did 1,2 and 3 and still doesn't work, it means you cached and need to clear your cache.

If you have Height Issue:

Put Height:100%; where you wrote overflow-x:hidden. Height 100% means 100% of parent height. When you put height:100% inside a node which it's parent has 200px height. it means node height will be 200px and not more.

like image 122
ICE Avatar answered Oct 20 '22 15:10

ICE
Sign in to Comment

Related questions

Swift 3: atomic_compare_exchange_strong
CakePHP unit test not recognizing fixtures
Strange behaviour of default template-argument in a template-template-parameter
How can you add floating tooltips in react native?
Unquoted tokens in argument mode involving variable references and subexpressions: why are they sometimes split into multiple arguments?
How to display Math equations in React Native View
Generate a 10-digit TOTP password with a certain key
Why is the Tkinter render quality much worse on windows?
Deducing class template arguments with a constructor that uses a member type alias
Bokeh server callback initiated from Flask application
Name cannot begin with the '$' character, hexadecimal value 0x24
Firebase Auth across multiple projects with different Providers

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!