CODEWITHSUNDEEP
htmlcsssemantic-ui
quesyKing
quesyKing

Reputation: 148

How to get Semantic UI segments to properly fit page width

I Have constructed a web page that contains both a Top and Side menu but now the ui segments Extends off the side of the page. Do the Menus need to be initialized through java script? Or am I stuck manually moving the segment with CSS? Any help is appreciated.

Minimum Example: *https://jsfiddle.net/Lk6y7msh/ 

<html>
  <head>
    <title>Test Bed</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.css"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.3/semantic.min.js"></script>
  </head>

  <body>
    <div class="ui vertical inverted left visible sidebar menu">
      <img src="/static/logo.png" style="display: block;margin: 0 auto;">
      <div class="ui divider"></div>
      <div class="header icon">
        <h3>
          <a class="item" href="#some">Menu Item
                <i class="check icon"></i>
            </a>
          <a class="item" href="#some">Menu Item
                <i class="check icon"></i>
            </a>
        </h3>
      </div>
    </div>

    <div class="pusher">
      <div class="ui inverted segment">
        <div class="ui inverted secondary pointing menu">
          <a class="active item" href="/test">Test</a>
          <a class="item" href="/setting">Settings</a>
          <a class="item" href="/service">Services</a>
          <a class="item" href="/LogReader">LogReader</a>
          <a class="item" href="/ErrorPage">ErrorPage</a>
        </div>
      </div>
      <div class="ui segment">
        <table class="ui celled table">
          <thead>
            <tr>
              <th>Name</th>
              <th>Age</th>
              <th>Job</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td data-label="Name">James</td>
              <td data-label="Age">24</td>
              <td data-label="Job">Engineer</td>
            </tr>
            <tr>
              <td data-label="Name">Jill</td>
              <td data-label="Age">26</td>
              <td data-label="Job">Engineer</td>
            </tr>
            <tr>
              <td data-label="Name">Elyse</td>
              <td data-label="Age">24</td>
              <td data-label="Job">Designer</td>
            </tr>
            <tr>
              <td data-label="Name">Me</td>
              <td data-label="Age">24</td>
              <td data-label="Job">creates the look, layout, and features of a website. The job involves understanding both graphic design and computer programming. ... They work with development teams or managers for keeping the site up-to-date and prioritizing needs, among
                other tasks.</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </body>

</html>

Upvotes: 1

Views: 718

Answers (1)

Kalnode
Kalnode

Reputation: 11286

Change the way you're offsetting the content.

Currently you're using a transform:translate on your content to offset it to the right so it doesn't get hidden behind your sidebar. In doing this, the browser is taking the entire element as-is, maintaining it's rendered dimensions and literally shifting it over, thus it bleeds off the right of the viewport.

Instead, offset your content with a much simpler rule: margin-left, and the element adapts to whatever space available.

Going forward, you probably want to be applying more responsive design (for mobile devices) especially with regard to how the table looks.

For .pusher:

Remove:

-webkit-transform: translate3d(260px,0,0);
transform: translate3d(260px,0,0);

Add:

margin-left: 260px;

In any case, obviously if the sidebar changes dimensions or gets toggled-off, then you'll have to use JS to change the content offset.

Upvotes: 1

Related Questions