Отзывчивые утилиты Материализации не работают - PullRequest
Новая
       6

Отзывчивые утилиты Материализации не работают

0 голосов
/ 31 августа 2018

Я не могу понять, почему утилиты "show-on-small" и т. Д. Не работают. Несмотря на то, что следующий скрипт должен показываться только маленьким шрифтом, он показывается постоянно (обратите внимание, что другие материализуемые классы работают, поэтому я не могу получить доступ к их файлам).

Пример: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<div class="show-on-small"> <p  style="color: black" class="show-on-medium">Only smaall</p></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

Есть идеи? Большое спасибо!

Ответы [ 2 ]

0 голосов
/ 31 августа 2018

Глядя на то, что делает .show-on-small, мы можем ясно видеть, что никогда не скрывает элемент. Это только гарантирует, что это показано на маленьком : 

@media only screen and (max-width: 600px) {
  .show-on-small{
    display:block !important
  }
}

Так что следующий пример будет работать: 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">

<p class="show-on-small" style="display:none;">I only show on small</p>

... потому что он имеет display:none во всех случаях, кроме малого, где он переопределяется CSS для Materialise с !important.

Обратите внимание, что вы также можете использовать .hide-on-* классы в Materialise, которые делают то, что вы, кажется, хотите.

0 голосов
/ 31 августа 2018

Вы можете использовать hide-on-med-and-up, который устанавливает display: none для экранов шириной более 601 пикселей. 

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/><!-- Do you have this line? -->
  </head>
    
  <body>
    <div class="hide-on-med-and-up">Only smaall</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  </body>
</html>

Их файлы можно найти по адресу https://github.com/Dogfalo/materialize. Оттуда вы также можете внести свой вклад.

...