Как заставить сегменты Semantic UI правильно соответствовать ширине страницы - PullRequest
Новая
       44

Как заставить сегменты Semantic UI правильно соответствовать ширине страницы

0 голосов
/ 22 февраля 2019

Я создал веб-страницу, которая содержит как верхнее, так и боковое меню, но теперь ui segments распространяется за пределы страницы.Нужно ли инициализировать меню через java-скрипт?Или я застрял, перемещая сегмент с помощью CSS?Любая помощь приветствуется.

Минимальный пример: *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>

1 Ответ

0 голосов
/ 22 февраля 2019

Измените способ смещения содержимого.

В настоящее время вы используете transform:translate для содержимого, чтобы сместить его вправо, чтобы оно не скрывалось за боковой панелью.При этом браузер принимает весь элемент как есть, поддерживая его визуализированные размеры и буквально смещая его, тем самым отбрасывая его справа от области просмотра.

Вместо этого смещайте содержимое с помощью гораздо более простогоправило: margin-left, и элемент приспосабливается к любому доступному пространству.

В дальнейшем вы, вероятно, захотите применить более отзывчивый дизайн (для мобильных устройств), особенно в отношении того, как выглядит таблица.

Для .pusher:

Удалить: 

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

Добавить: 

margin-left: 260px;

В любом случае, очевидно, если боковая панель изменитсяразмеры или отключение, тогда вам придется использовать JS, чтобы изменить смещение содержимого.

...