Offcanvas + LESS - Githubissues

stefan-b commented 11 years ago

I ran into problems with the offcanvas display when using compiled LESS (either using less.js or less.php). The offcanvas bar did not show any content and kept the screen blocked after sliding back, so it had to be refreshed to continue.

I fixed it (for me) by modifying the offcanvas.less. With this modification it works now:

.uk-offcanvas-bar { position: fixed; top: 0; bottom: 0; /* modified, before = left:0 and no z-index */ left: -100%; z-index: @offcanvas-z-index + 1;

/* didn't work: -webkit-transform: translateX(-100%); transform: translateX(-100%); z-index: @offcanvas-z-index + 1; */ width: @offcanvas-bar-width; max-width: 100%; background: @offcanvas-bar-background; overflow-y: auto; -webkit-overflow-scrolling: touch;

/* didn't work: -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; .hook-offcanvas-bar; / / substitute, taken from the original .css file / -webkit-transition: left 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out; transition: left 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out, right 0.3s ease-in-out; / end of modification */ }

aheinze commented 11 years ago

can you confirm this with the latest code base (14-08-2013)?

stefan-b commented 11 years ago

Yes, I downloaded it today an still have got the same problem with the new file. Before testing I've cleared all caches (browser and lessphp). When changing back to my modified file it works again. Tested browsers are current versions of firefox, chrome, safari and IE.

stefan-b commented 11 years ago

Accidentally closed and now reopened.

aheinze commented 11 years ago

strange, could you please provide an example via e.g. jsfiddle? (http://jsfiddle.net)

stefan-b commented 11 years ago

I didn’t manage to install a functional example at jsfiddle because I couldn’t attach the needed .js and .less files.

But here is a simple html example which would be easy to run.

jquery.js is 1.10.2
uikit.js is 1.0.2
less.js is 1.3.3.

<!DOCTYPE html>

<body>
    <header>
        <nav class="uk-navbar">
            <a data-uk-offcanvas="" class="uk-navbar-toggle uk-hidden-large" href="#my-id"></a>
            <ul class="uk-navbar-nav">
                <li><a href="#">x</a></li>
                <li><a href="#">y</a></li>
                <li><a href="#">z</a></li>
            </ul>
        </nav>
    </header>

    <!-- Off-canvas sidebar -->
    <div id="my-id" class="uk-offcanvas">
        <nav class="uk-offcanvas-bar">
            <ul class="uk-nav uk-nav-offcanvas" data-uk-nav>
                <li><a href="#">x</a></li>
                <li><a href="#">y</a></li>
                <li><a href="#">z</a></li>
           </ul>
        </nav>
     </div>   

    <main>
       <hgroup>
            <h1>Lorem ipsum</h1>
            <h2>Lorem ipsum dolor sit amet</h2>
        </hgroup>

        <article>
            <h3>Lorem ipsum</h3>
                <p>Lorem ipsum dolor sit amet.
        </article>
    </main> 

    <aside>
    </aside>

    <footer>
    </footer>

<script src="js/jquery.min.js"></script>
    <script src="js/uikit.min.js"></script>
</body>

saschadube commented 11 years ago

Closed till you provide a jsfiddle? (http://jsfiddle.net).

uikit / uikit

Offcanvas + LESS #50