при использовании materialize.css элемент выбора не отображается - PullRequest
Новая
       6

при использовании materialize.css элемент выбора не отображается

0 голосов
/ 24 января 2019

Я ожидаю чего-то очевидного, однако на самом деле я потратил довольно много времени, пытаясь выяснить это.

Это ТОЛЬКО отдельные элементы, которые не отображаются.Я пытался использовать как локальный, так и CDN материализовать 1.0.0, ни один из них не работает.Я попытался создать элементы select, не используя пример из materialize.При осмотре инструментов разработчика видны элементы select и option.

При комментировании materialize.css будет отображаться элемент select, который успешно извлекает все ответы и запускает файл materialize.js.

Это стили элементов при использовании materialize.css. 

element.style {
}
select {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    padding: 5px;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    height: 3rem;
}
select {
    display: none;
}

button, input, optgroup, select, textarea {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
button, select {
    text-transform: none;
}
button, input, optgroup, select, textarea {
    font-family: sans-serif; OVERRIDEN
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}
*, *:before, *:after {
    -webkit-box-sizing: inherit; OVERRIDEN
    box-sizing: inherit;
}
user agent stylesheet
select:not(:-internal-list-box) {
    overflow: visible !important;
}
user agent stylesheet
select {
    border-radius: 0px; OVERRIDEN
    border-color: rgb(169, 169, 169); OVERRIDEN
}
user agent stylesheet
select {
    -webkit-appearance: menulist;
    box-sizing: border-box; OVERRIDEN
    align-items: center;
    white-space: pre;
    -webkit-rtl-ordering: logical;
    color: black;
    background-color: white; OVERRIDEN
    cursor: default;
    border-width: 1px; OVERRIDEN
    border-style: solid; OVERRIDEN
    border-color: initial; OVERRIDEN
    border-image: initial; OVERRIDEN
}
user agent stylesheet
select {
    border-radius: 5px; OVERRIDEN
}
user agent stylesheet
input, textarea, select, button {
    text-rendering: auto;
    color: initial; OVERRIDEN
    letter-spacing: normal;
    word-spacing: normal;
    text-transform: none; OVERRIDEN
    text-indent: 0px;
    text-shadow: none;
    display: inline-block; OVERRIDEN
    text-align: start;
    margin: 0em; OVERRIDEN
    font: 400 13.3333px Arial;
}
user agent stylesheet
input, textarea, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb !important;
}

, и это мой index.html.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Skater-demo</title>
    <!--Import Google Icon Font-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css CDN-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <!-- Import materialize.css LOCAL
    <link type="text/css" rel="stylesheet" href="./materialize/css/materialize.css">   
    -->
    <link type="text/css" rel="stylesheet" href="index.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>

    <div class="input-field col s12">
        <select>
            <option value="" disabled selected>Choose your option</option>
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
        </select>
        <label>Materialize Select</label>
    </div>

    <select>
        <option>I will not be displayed</option>
    </select>

    <script type="text/javascript" src="materialize/js/materialize.js"></script>
</body>

1 Ответ

0 голосов
/ 24 января 2019

Я создал несколько примеров с помощьюizeize.css здесь 

<html>

<head>
  <title>The Materialize Selects Example</title>
  <meta name="viewport" content="width = device-width, initial-scale = 1">
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
  </script>

  <script>
    $(document).ready(function() {
      $('select').material_select();
    });
  </script>
</head>

<body class="container">
  <div class="row">
    <form class="col s12">
      <div class="row">
        <label>Materialize Select</label>
        <select>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Materialize Multi Select</label>
        <select multiple>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Select with Optgroup</label>
        <select>
          <optgroup label="Fruits">
            <option value="1">Mango</option>
            <option value="2">Orange</option>
            <option value="3">Apple</option>
          </optgroup>

          <optgroup label="Vegs">
            <option value="4">Brinjal</option>
            <option value="5">Potato</option>
            <option value="6">Tomato</option>
          </optgroup>
        </select>
      </div>

      <div class="row">
        <label>Select with images</label>
        <select class="icons">
          <option value="" disabled selected>Select Technology</option>
          <option value="1" data-icon="/html5/images/html5-mini-logo.jpg" class="circle">
            HTML</option>
          <option value="2">JavaScript</option>
          <option value="3">CSS</option>
        </select>
      </div>

      <div class="row">
        <label>Browser default Select</label>
        <select class="browser-default">
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Disabled Materialize Select</label>
        <label>Disabled Materialize Select</label>
        <select disabled>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>

      <div class="row">
        <label>Disabled Browser default Select</label>
        <select class="browser-default" disabled>
          <option value="" disabled selected>Select Fruit</option>
          <option value="1">Mango</option>
          <option value="2">Orange</option>
          <option value="3">Apple</option>
        </select>
      </div>
    </form>
  </div>
</body>

</html>
...