Семантический интерфейс: ошибка интерфейса внутри pushable не работает - PullRequest
Новая
       28

Семантический интерфейс: ошибка интерфейса внутри pushable не работает

0 голосов
/ 12 июня 2019

Я создаю форму внутри боковой панели с помощью pushable, структура HTML приведена ниже 

<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet"/>
<div class="ui card pushable" style="height: 82vh; padding: 0px;">
  <div class="ui segment ui overlay right wide visible sidebar" style="padding: 0px;">
    <div class="ui card">
      <div class="content">
        <div class="header">Add Merchant Group</div>
      </div>
      <div class="content">
        <form class="ui form">
          <div class="field"><label>Name</label>
            <div class="ui error input"><input type="text"></div>
          </div>
        </form>
      </div>
      <div class="extra content"><button class="ui blue right floated button"><i aria-hidden="true" class="user plus icon"></i>Add</button><button class="ui red right floated button">Cancel</button></div>
    </div>
  </div>
  <div class="pusher">
    <div class="ui grid">
      <div class="one column row">
        <div class="column">
          <div class="ui raised segments">
            <div class="ui clearing segment"><button class="ui small compact right floated button light"><i aria-hidden="true" class="plus icon"></i>Add</button></div>
            <div class="ui segment" style="padding: 0px;">
              <table class="ui selectable single line table">
                <thead class="">
                  <tr class="left aligned">
                    <th class="">Name</th>
                    <th class="">Description</th>
                    <th class=""></th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="">
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class=""><button class="ui red mini icon button light"><i aria-hidden="true" class="red delete icon"></i></button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui error input"><input type="text"></div>

как вы видите <div class="ui error input"><input type="text"></div> ведет себя по-разному внутри и снаружи div of pushable. Единственная вещь, которая обозначается как ошибка, является заполнителем ввода, что идет не так? я должен определить новые правила?

1 Ответ

0 голосов
/ 12 июня 2019

Если вы внимательно осмотрите, вы увидите, что селектор влияет на вход снаружи <1001 *, а селектор * на входе внутри формы <code>.ui.form input[type="text"].

Они имеют одинаковое значение специфичности, поэтому последний переопределит правила, определенные первым селектором.

Вы можете просто обернуть его в элемент .form или добавить CSS, который я добавил в фрагмент ниже 

.ui.error.input input[type="text"] {
  color: rgba(0, 0, 0, 0.95);
  border-color: #85B7D9;
  border-radius: 0.28571429rem;
  background: #FFFFFF;
  -webkit-box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
  box-shadow: 0px 0em 0em 0em rgba(34, 36, 38, 0.35) inset;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.css" rel="stylesheet" />
<div class="ui card pushable" style="height: 82vh; padding: 0px;">
  <div class="ui segment ui overlay right wide visible sidebar" style="padding: 0px;">
    <div class="ui card">
      <div class="content">
        <div class="header">Add Merchant Group</div>
      </div>
      <div class="content">
        <form class="ui form">
          <div class="field"><label>Name</label>
            <div class="ui error input"><input type="text"></div>
          </div>
        </form>
      </div>
      <div class="extra content"><button class="ui blue right floated button"><i aria-hidden="true" class="user plus icon"></i>Add</button><button class="ui red right floated button">Cancel</button></div>
    </div>
  </div>
  <div class="pusher">
    <div class="ui grid">
      <div class="one column row">
        <div class="column">
          <div class="ui raised segments">
            <div class="ui clearing segment"><button class="ui small compact right floated button light"><i aria-hidden="true" class="plus icon"></i>Add</button></div>
            <div class="ui segment" style="padding: 0px;">
              <table class="ui selectable single line table">
                <thead class="">
                  <tr class="left aligned">
                    <th class="">Name</th>
                    <th class="">Description</th>
                    <th class=""></th>
                  </tr>
                </thead>
                <tbody class="">
                  <tr class="">
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class="">
                      <div class="ui transparent input"><input type="text"></div>
                    </td>
                    <td class=""><button class="ui red mini icon button light"><i aria-hidden="true" class="red delete icon"></i></button></td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui error input"><input type="text"></div>
...