CODEWITHSUNDEEP
htmlcsssemantic-ui
Frerich Raabe
Frerich Raabe

Reputation: 94319

How do I layout the body properly with an always-visible sidebar?

If I have a Semantic UI Sidebar which is always visible (i.e. the visible class is set), how can I layout the corresponding pusher correctly such that it takes the width of the sidebar into account. Long (or right-aligned) elements appear to be cut off, as in this example:

<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js"></script>
<div class="ui vertical left visible sidebar menu">
  <a class="item">
    <i class="trophy icon"></i>
    Achievements
  </a>
</div>
<div class="pusher">
  <div class="ui left aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
  <div class="ui right aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
</div>

Note how the left-aligned header moves to the left as expected (i.e. the width of the sidebar is taken into account) but the second line, the right-aligned header, is cut off -- as if the layouting didn't take the reduced width of the pusher into account.

Upvotes: 1

Views: 345

Answers (1)

Stickers
Stickers

Reputation: 78686

Apparently it's a bug or feature request, see the related tickets: [Sidebar] Allow Sidebar to Start Visible #649 and [Sidebar] Allow Always Visible #807.

As a temporary solution, you could do this I guess:

.pusher {
  width: calc(100% - 260px); /*260px is the sidebar width*/
}


.pusher {
  width: calc(100% - 260px);
}
<link href="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.css" rel="stylesheet" />
<script src="https://rawgit.com/Semantic-Org/Semantic-UI/next/dist/semantic.min.js"></script>
<div class="ui vertical left visible sidebar menu">
  <a class="item">
    <i class="trophy icon"></i>
    Achievements
  </a>
</div>
<div class="pusher">
  <div class="ui left aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
  <div class="ui right aligned header">
    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z.
  </div>
</div>

Upvotes: 1

Related Questions