Semantic-ui: Bug - sidebar changes body padding automatically

Created on 20 Jul 2016 · 6Comments · Source: Semantic-Org/Semantic-UI

This is related to 4301. Please provide a quick workaround at least.

Here is a reproducible test case (for chrome at least). Please provide a workaround at least.

<html><head>
  <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
  <link rel="stylesheet" type="text/css" 
        href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style>body{ padding: 2% 5em 0 5em;   }</style>
</head><body>

    <div class="ui attached icon message">      
      <div class="content"><div class="header">Text here</div></div>
      <i class="content link right aligned ui icon" 
         title="Show subs list"
         id="list_btn" 
         style="font-size:1.4em"></i>           
    </div>  
    <div class="ui attached segment pushable" id="main_area">
      <div class="ui left vertical thin sidebar menu"
           id="subs_menu" > 
        <div class="ui middle aligned divided selection list" >
            <div class="item">
                <img class="ui avatar image" 
                     src="http://semantic-ui.com/images/avatar/small/daniel.jpg">
                <div class="content"><a class="header">Daniel Louise</a></div>
            </div>
        </div>
      </div>
      <div class="pusher" style="padding-top:1em;padding-bottom:1em;">Other stuff here</div>
    </div>          
<script>
$(function(){

    $('#list_btn').click( function(){       
        $('div#subs_menu').first()
          .sidebar('setting', 'transition', 'overlay')
          .sidebar({
            context: $( 'div#main_area' )
          }).sidebar('toggle');         
    });

});

</script>
</body></html>

You can also see console output for some errors (see 4301)

Should Post to Forum - See Readme Usage Question

Source

siddo420

All 6 comments

Can you make a fiddle?, would be easier.
Also would be nice if you can add for the issue number a #.

lholznagel on 20 Jul 2016

I dont know how to do that. But, I have already made it extremely simple.

Copy and paste the code in an html file and
open that file in a browser (Chrome) and
click on the menu icon

you'll see the issue yourself. You can open console log to see errors.

siddo420 on 21 Jul 2016

I've now modified the code in first comment (in this issue) and now it uses files directly from CDN, so no need to download etc and link files anymore.

siddo420 on 21 Jul 2016

JS fiddle: https://jsfiddle.net/9amow2f2/2/

siddo420 on 21 Jul 2016

GitHub issues is for minimum reproducible test cases that represent specific bugs. Please use our forums or chat to solicit help then consider re-opening with a more granular issue.