SharePoint 2013 hiding ribbon stops scrolling

Question

Recently I have been working on SharePoint 2013 master page. It's a fixed width design. The requirement is that, only the users who have edit permission can see the ribbon can see the top sharepoint top ribbon bar. Otherwise all the users who has only view or contribute permission cannot see the ribbon bar. I used SPSecurityTrimmedControl to wrap the ms-designer-ribbon div , so that only the users who have edit permission can see the designer ribbon bar.

Problem is that, after publishing the master page the scroll bar is gone. I added overflow:auto; on the body and it shows the scroll bar. But again another problems appears. When I login with a user who has edit permission , it shows two scroll on the right.

<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" Permissions="EditListItems">-->
        <div id="ms-designer-ribbon">
            <!--SID:02 {Ribbon}-->
            <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background: rgb(0, 114, 198); color: white; width: 100%; padding: 8px; height: 64px; overflow: hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
        </div>
    <!--ME:</SharePoint:SPSecurityTrimmedControl>-->

Problem is , after publishing the master page the scroll bar is gone. I added overflow:auto; on the body and it shows the scroll bar. But again another problems appears. When I login with a user who has edit permission , it shows two scroll on the right.

How can I solve this issue , any help would be appreciated.

Thanks in advance :)

Answer 1

Try this

<div id="ms-designer-ribbon" style="display:none">
    <!--SID:02 {Ribbon}-->
    <!--PS: Start of READ-ONLY PREVIEW (do not modify) --><div class="DefaultContentBlock" style="background: rgb(0, 114, 198); color: white; width: 100%; padding: 8px; height: 64px; overflow: hidden;">The SharePoint ribbon will be here when your file is either previewed on or applied to your site.</div><!--PE: End of READ-ONLY PREVIEW -->
</div>  

<!--MS:<SharePoint:SPSecurityTrimmedControl runat="server" Permissions="EditListItems">-->
    <script type="text/javascript">
        $(document).ready(function()
        {
            $('#ms-designer-ribbon').show();
        });
    </script>
<!--ME:</SharePoint:SPSecurityTrimmedControl>-->

Answer 2

If you set overflow:visible on #s4-workspace then that should get rid of the second scrollbar.

Answer 3

I like Amal Hashim's solution (in theory because I haven't tried it), however it presupposes that the master page load jQuery.

You can achieve the same result using just CSS. In the HEAD section of the master page add:

<SharePoint:SPSecurityTrimmedControl runat="server" Permissions="EditListItems">
<style>#ms-designer-ribbon {display:block}</style> 
</SharePoint:SPSecurityTrimmedControl>

And just add

style="display:none" 

in the DIV that displays the Ribbon