OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Css + iPhone overflow content of the child div is not showing outside of the parent if parent has overflow:auto property

  • Thread starter Thread starter Yogesh
  • Start date Start date
Y

Yogesh

Guest
In iPhone overflow content of the child div is not showing outside of the parent div if given property overflow:auto to parent for scrolling content.

The close Icon does not show the iPhone device, If the change overflow:auto to visible scroll is gone but the icon showing on the front end, I think overflow:auto is creating an issue in iPhone devices. HTML + CSS Code sample has been added.

Screenshots have been added for reference.

enter image description here enter image description here

Code:
<div class="sections nav-sections">
    <div class="section-items nav-sections-items mage-tabs-disabled" role="tablist">
        <div class="section-item-content nav-sections-item-content" id="store.menu" data-role="content" role="tabpanel" aria-hidden="false">
            <nav class="navigation" data-action="navigation">
                <ul id="ui-id-1" role="menu" tabindex="0" class="ui-menu ui-widget ui-widget-content">
                    <li class="desktop-hidden mobile-close-container ui-menu-divider ui-widget-content">
                        <button class="mobile-close"></button>
                    </li>
                    <li class="level0 nav-1 category-item first level-top parent ui-menu-item">
                        <a href="javascript:void();" class="level-top ui-menu-item-wrapper" aria-haspopup="true" id="ui-id-2" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span><span>Shop</span></a>
                    </li>
                    <li class="level0 nav-2 category-item level-top parent ui-menu-item">
                        <a href="javascript:void();" class="level-top ui-menu-item-wrapper" aria-haspopup="true" id="ui-id-214" tabindex="-1" role="menuitem">
                            <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span><span>Pharmacy</span>
                        </a>
                    </li>
                    <li class="level0 parent ambrands-menu-item ui-menu-item" data-ambrands-js="brands-menu-link">
                        <a href="#/brands/" class="level-top ambrands-link ui-menu-item-wrapper" id="ui-id-285" tabindex="-1" role="menuitem">
                            <span class="ambrands-label ambrands-menu-label">Brands</span>
                        </a>
                    </li>
                    <li class="level0 nav-3 level-top ui-menu-item">
                        <a href="#/value-picks" class="level-top ui-menu-item-wrapper" id="ui-id-287" tabindex="-1" role="menuitem"><span>Value Picks</span></a>
                    </li>
                    <li class="level0 nav-4 level-top ui-menu-item">
                        <a href="#/deals" class="level-top ui-menu-item-wrapper" id="ui-id-288" tabindex="-1" role="menuitem"><span>Deals</span></a>
                    </li>
                    <li class="level0 nav-5 level-top ui-menu-item">
                        <a href="#/faq" class="level-top ui-menu-item-wrapper" id="ui-id-289" tabindex="-1" role="menuitem"><span>FAQ</span></a>
                    </li>
                    <li class="level0 nav-6 last level-top parent ui-menu-item">
                        <a href="javascript:void();" class="level-top ui-menu-item-wrapper" aria-haspopup="true" id="ui-id-290" tabindex="-1" role="menuitem">
                            <span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span><span>Free Shipping On Orders $49+</span>
                        </a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

Css code

Code:
.nav-sections {
            -webkit-overflow-scrolling: touch;
            -webkit-transition: left 0.3s;
            -moz-transition: left 0.3s;
            -ms-transition: left 0.3s;
            transition: left 0.3s;
            height: 100%;
            left: 0;
            overflow: auto;
            position: fixed;
            top: 0;
            width: calc(100% - 54px);
            background: #F9F7F7;
        }
    }
<p>In iPhone overflow content of the child div is not showing outside of the parent div if given property <code>overflow:auto</code> to parent for scrolling content.</p>
<p>The close Icon does not show the iPhone device, If the change <code>overflow:auto</code> to <code>visible</code> scroll is gone but the icon showing on the front end, I think <code>overflow:auto</code> is creating an issue in iPhone devices. HTML + CSS Code sample has been added.</p>
<p>Screenshots have been added for reference.</p>
<p><a href="https://i.sstatic.net/MZfG3JpB.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/MZfG3JpB.png" alt="enter image description here" /></a>
<a href="https://i.sstatic.net/41uyXFLj.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/41uyXFLj.png" alt="enter image description here" /></a></p>
<pre><code><div class="sections nav-sections">
<div class="section-items nav-sections-items mage-tabs-disabled" role="tablist">
<div class="section-item-content nav-sections-item-content" id="store.menu" data-role="content" role="tabpanel" aria-hidden="false">
<nav class="navigation" data-action="navigation">
<ul id="ui-id-1" role="menu" tabindex="0" class="ui-menu ui-widget ui-widget-content">
<li class="desktop-hidden mobile-close-container ui-menu-divider ui-widget-content">
<button class="mobile-close"></button>
</li>
<li class="level0 nav-1 category-item first level-top parent ui-menu-item">
<a href="javascript:void();" class="level-top ui-menu-item-wrapper" aria-haspopup="true" id="ui-id-2" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span><span>Shop</span></a>
</li>
<li class="level0 nav-2 category-item level-top parent ui-menu-item">
<a href="javascript:void();" class="level-top ui-menu-item-wrapper" aria-haspopup="true" id="ui-id-214" tabindex="-1" role="menuitem">
<span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span><span>Pharmacy</span>
</a>
</li>
<li class="level0 parent ambrands-menu-item ui-menu-item" data-ambrands-js="brands-menu-link">
<a href="#/brands/" class="level-top ambrands-link ui-menu-item-wrapper" id="ui-id-285" tabindex="-1" role="menuitem">
<span class="ambrands-label ambrands-menu-label">Brands</span>
</a>
</li>
<li class="level0 nav-3 level-top ui-menu-item">
<a href="#/value-picks" class="level-top ui-menu-item-wrapper" id="ui-id-287" tabindex="-1" role="menuitem"><span>Value Picks</span></a>
</li>
<li class="level0 nav-4 level-top ui-menu-item">
<a href="#/deals" class="level-top ui-menu-item-wrapper" id="ui-id-288" tabindex="-1" role="menuitem"><span>Deals</span></a>
</li>
<li class="level0 nav-5 level-top ui-menu-item">
<a href="#/faq" class="level-top ui-menu-item-wrapper" id="ui-id-289" tabindex="-1" role="menuitem"><span>FAQ</span></a>
</li>
<li class="level0 nav-6 last level-top parent ui-menu-item">
<a href="javascript:void();" class="level-top ui-menu-item-wrapper" aria-haspopup="true" id="ui-id-290" tabindex="-1" role="menuitem">
<span class="ui-menu-icon ui-icon ui-icon-caret-1-e"></span><span>Free Shipping On Orders $49+</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</code></pre>
<p>Css code</p>
<pre><code>.nav-sections {
-webkit-overflow-scrolling: touch;
-webkit-transition: left 0.3s;
-moz-transition: left 0.3s;
-ms-transition: left 0.3s;
transition: left 0.3s;
height: 100%;
left: 0;
overflow: auto;
position: fixed;
top: 0;
width: calc(100% - 54px);
background: #F9F7F7;
}
}
</code></pre>
Continue reading...
 
Top