Как остановить поток содержимого страницы в SideNav Semantic-ui

Я пытаюсь создать страницу с боковой панелью навигации. Я использую semantic-ui, немного новичок в нем и использую его сетку. Дело в том, что остальное содержимое страницы перетекает под sidenav и скрывается под ним, я не знаю, как остановить такое поведение.

Я попытался поместить sidenav в столбец шириной 4, а остальную часть страницы - в ширину 12, я пробовал разные параметры / классы для sidenav, но не могу заставить его перестать течь в него. Здесь в вертикальном меню есть опция «фиксированная влево».

Я пробовал без исправления, пытаюсь добавить видимую боковую панель. Судя по документации, не похоже, что контент должен течь под ним, не уверен, что я делаю не так.

Вот мой код:

<html >
    <head>
        <link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
        <link rel="stylesheet" type="text/css"  href="/stylesheets/app.css">
        <link rel="icon" type="image/png" href="images/favicon.ico">
    </head>

    <body>

    <div class="ui inverted teal menu">
      <div class="right menu">
        <a class="ui item">Sign In</a>
        <a class="ui item">Login</a>
        <a class="ui item">Logout</a>
      </div>
    </div>

    <div class="ui left fixed vertical menu teal inverted">
        <div class="header item"><a href='/'>MyApp</a></div>
        <%  for(var cat in allCats) { %>
            <div class="item">
                    <a class='header' href="/<%= cat %>" ><%= cat %></a>
                    <div class="menu">
                    <ul>
                        <% for(var subCat in cat) { %>
                                <li><a class="item" href="cat/subCat" ><%= subCat %></a></li>
                        <% } %>
                    </ul>
                    </div>
            </div>
        <% } %>
        <a class="item">About Us</a>
    </div>

<h1 class='title-format'>Welcome to MyApp!!!</h1>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>

    </body>
</html>

Здесь простой h1, который говорит «добро пожаловать в мое приложение», когда я уменьшаю окно, проходит под моей боковой панелью навигации.

Спасибо

Jack 18.07.2018 источник

Ответы (3)

arrow_upward
0
arrow_downward

Используя классы _1 _, _ 2_ и tablet reversed, я смог получить ожидаемый результат. пожалуйста, проверьте рабочий пример ниже.

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/app.css">
<link rel="icon" type="image/png" href="images/favicon.ico">

<div class="ui inverted teal menu">
  <div class="right menu">
    <a class="ui item">Sign In</a>
    <a class="ui item">Login</a>
    <a class="ui item">Logout</a>
  </div>
</div>

<div class="ui grid stackable computer reversed tablet reversed">
  <div class="thirteen wide column">
    <h1 class='title-format'>Welcome to MyApp!!!</h1>
  </div>
  <div class="three wide column">
    <div class="ui left vertical menu teal inverted">
      <div class="header item">
        <a href='/'>MyApp</a>
      </div>
      <%  for(var cat in allCats) { %>
        <div class="item">
          <a class='header' href="/<%= cat %>">
            <%= cat %>
          </a>
          <div class="menu">
            <ul>
              <% for(var subCat in cat) { %>
                <li>
                  <a class="item" href="cat/subCat">
                    <%= subCat %>
                  </a>
                </li>
                <% } %>
            </ul>
          </div>
        </div>
      <% } %>
      <a class="item">About Us</a>
    </div>
  </div>
</div>


<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>

Girisha C 18.07.2018

comment

Привет, Гириш, спасибо, но это не работает для меня, я уже пробовал это, но по какой-то причине он все еще находится под боковой навигационной панелью, когда он сделан маленьким. - Jack; 18.07.2018

comment

удалить position:fixed на маленьких экранах - Girisha C; 18.07.2018

comment

пожалуйста, проверьте отредактированный выше фрагмент кода, теперь он содержит stackable класс, который будет складывать столбцы в меньшие экраны и удалил fixed с боковой панели - Girisha C; 18.07.2018

comment

Извините, это не работает, все содержимое страницы просто складывается под боковой навигацией - Jack; 18.07.2018

comment

Пожалуйста, проверьте приведенный выше фрагмент, надеюсь, вы этого ожидаете. - Girisha C; 18.07.2018

comment

Привет, Гириш, контент все еще течет под боковой навигацией ... Я не знаю, почему этого так сложно достичь. - Jack; 18.07.2018

arrow_upward
0
arrow_downward

Вам необходимо использовать структуру сетки, см. Документы: https://semantic-ui.com/collections/grid.html#/overview

И для того, чтобы иметь фиксированную ширину ваших столбцов, я боюсь, что вы не можете сделать это (не уверен) с классами по умолчанию semantic-ui, я считаю, что вам нужно использовать собственные классы CSS для определения фиксированной ширины.

HTML:

<div class="ui grid">
   <div class="sixteen wide column"> ... </div>
   <div class="custom-sidebar wide column"> ... </div>
   <div class="custom-content wide column"> ... </div>
</div>

CSS:

.ui.grid > .column.custom-sidebar {
    width: 16em !important;
}
.ui.grid > .column.custom-content {
    width: calc(100% - 16em) !important;
}

.ui.grid > .column.custom-sidebar {
    width: 16em !important;
}
.ui.grid > .column.custom-content {
    width: calc(100% - 16em) !important;
}

<html >
    <head>
        <link rel="stylesheet" type="text/css"  href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.css">
        <link rel="stylesheet" type="text/css"  href="/stylesheets/app.css">
        <link rel="icon"       type="image/png" href="images/favicon.ico">
    </head>

    <body>
    <div class="ui grid">
    <div class="sixteen wide column">
      <div class="ui inverted teal menu">
        <div class="right menu">
          <a class="ui item">Sign In</a>
          <a class="ui item">Login</a>
          <a class="ui item">Logout</a>
        </div>
      </div>
    </div>
    <div class="custom-sidebar wide column">   
    <div class="ui left fixed vertical menu teal inverted">
        <div class="header item"><a href='/'>MyApp</a></div>
            <div class="item">
                    <a class='header' href="" >cat</a>
                    <div class="menu">
                    <ul>
                                <li><a class="item" href="cat/subCat" >subcat</a></li>
                    </ul>
                    </div>
            </div>
        <a class="item">About Us</a>
    </div>
    </div>
    <div class="custom-content wide column">
    <h1 class='title-format'>Welcome to MyApp!!!</h1>
    
    </div>
    </div>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.2/semantic.min.js"></script>


    </body>
</html>

caiovisk 18.07.2018

comment

Привет, Гириш, я делал это с сеткой раньше, но это не сработало, однако с 25% и помещением сетки перед верхним фургоном, похоже, это работает, однако 25% делают боковую панель очень уродливой. слишком большой, когда страница максимизирована, и слишком маленькая, когда она свернута, есть ли другой способ ??? - Jack; 18.07.2018

comment

тогда сделай это max-width: 25% !important;. - caiovisk; 18.07.2018

comment

есть ли способ сделать его точно такого же размера без 25% ??? я должен попробовать и использовать значение пикселя, или это будет плохо / не отвечает ??? или использовать максимальную и минимальную ширину, может быть ??? - Jack; 18.07.2018

comment

вы можете использовать класс doubling (двойная сетка удваивает ширину столбца для каждого перехода устройства.) - semantic-ui.com/collections/grid.html#doubling - Girisha C; 18.07.2018

comment

Я попытался добавить минимальную ширину в боковую навигацию, но затем содержимое страницы снова просочилось в нее. И если я оставлю только max-width, то боковая панель станет очень маленькой. Я просто хочу, чтобы он оставался фиксированного размера и уменьшался только для содержимого страницы. - Jack; 18.07.2018

comment

На самом деле он не истекает кровью с h1, но с большим количеством контента, у меня есть страница с сеткой в нем, он просачивается даже с максимальной шириной 25%. - Jack; 18.07.2018

comment

даже с h1 он немного течет под сайднавом на определенных уровнях, все равно не получается заставить это работать - Jack; 18.07.2018

comment

Привет, приятель, я считаю, что вам придется использовать собственный CSS, чтобы иметь фиксированную ширину, см. Мой обновленный ответ. В основном я определил два класса CSS .custom-sidebar и .custom-content с определенной шириной. дайте мне знать... - caiovisk; 19.07.2018

arrow_upward
0
arrow_downward

Оказалось, что это было очень просто, не нужно было вообще использовать сетку, просто небольшая модификация css:

#sidenav {
    min-width: 200px;
}

#mainViewArea {
    margin-left: 200px;
    padding: 20px;
}

Вот и получилось !!!

Спасибо тем, кто помог, это повело меня в правильном направлении, надеюсь, это кому-то поможет.

Jack 29.07.2018

Как остановить поток содержимого страницы в SideNav Semantic-ui

Ответы (3)

Вопросы по теме