Reducing the size of the browser #41

harikt · 2014-10-03T07:28:26Z

Hi,

First thanks for the awesome pikabu. Playing with it I noticed possibly a bug

When reducing the browser size the height is having a bit of issues.

How to Reproduce

Open the file.
Reduce the size of the browser.
Check if the last sentence Am I am visible is visible.

In chrome (37.0.2062.94 ), on first reducing the sentence is visible. When changing again to full size the scrollbar disappears.

In Mozilla 32 reducing don't show the scroll bar itself.

It could not detect when I increase the font size also. See code below.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="author" content="Mobify">
    <meta name="description" content="A responsive, mobile first accordion UI module from Mobify">
    <meta name="keywords" content="mobify,mobile,modules,ui,responsive,carousel,scooch,slider">
    <title>Mobify Modules</title>

    <link rel="stylesheet" href="http://cdn.mobify.com/modules/pikabu/0.2.2/pikabu.css">
    <link rel="stylesheet" href="http://cdn.mobify.com/modules/pikabu/0.2.2/pikabu-theme.css">

    <link rel="shortcut icon" href="/static/img/favicon.ico">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>
<div class="m-pikabu-viewport">
    <!-- the left sidebar -->
    <div class="m-pikabu-sidebar m-pikabu-left">
        <!-- left sidebar content -->
        Left
    </div>
    <!-- the main page content -->
    <div class="m-pikabu-container">
        <!-- Overlay is needed to have a big click area to close the sidebars -->
        <div class="m-pikabu-overlay"></div>
        <header>
            <a class="m-pikabu-nav-toggle" data-role="left">Left Menu</a>
            <h1>Pikabu</h1>
            <a class="m-pikabu-nav-toggle" data-role="right">Right Menu</a>
        </header>
        <section>
            <!-- Body content goes in here -->
            <h2><strong>Pikabu</strong> is a speedy, flexible framework for off-canvas flyout panels.</h2>

            <h3>Why use <strong>Pikabu</strong>?</h3>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>


            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>


            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p><em>Compatibility</em> &mdash; This thing works on everything. We progressively enhance the experience for devices that support it.</p>

            <p><em>Simple markup</em> &mdash; Few containers and classes means implementation is a breeze.</p>

            <p><em>Native scrolling</em> &mdash; Just like mom used to make. Momentum scrolling in sidebars and smart fallbacks for browsers that don&rsquo;t support it.</p>

            <p><em>Customization</em> &mdash; No theme, just barebones HTML and CSS. Pikabu is super customizable to your needs.</p>

            <p>Am I am visible</p>
        </section>
    </div>
    <!-- the right sidebar -->
    <div class="m-pikabu-sidebar m-pikabu-right">
        <!-- right sidebar content -->
        Right
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="http://cdn.mobify.com/modules/pikabu/0.2.1/pikabu.min.js"></script>
<script>
    $(function() {
        pikabu = new Pikabu();
    });
</script>
</body>
</html>

See attached image from firefox.

Thank you.

The text was updated successfully, but these errors were encountered:

kpeatt · 2014-10-10T18:23:47Z

@harikt Thanks for the issue! I'll take a look at this and see if I can tell what's going on and get back to you.

harikt · 2014-10-12T05:33:32Z

Thank you :)

kpeatt added question pikabu-1.0 labels Oct 3, 2014

harikt closed this as completed Mar 1, 2017

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Reducing the size of the browser #41

Reducing the size of the browser #41

harikt commented Oct 3, 2014

kpeatt commented Oct 10, 2014

harikt commented Oct 12, 2014

Reducing the size of the browser #41

Reducing the size of the browser #41

Comments

harikt commented Oct 3, 2014

How to Reproduce

kpeatt commented Oct 10, 2014

harikt commented Oct 12, 2014