центрирующее окно поиска в семантическом интерфейсе - PullRequest
Новая
       14

центрирующее окно поиска в семантическом интерфейсе

0 голосов
/ 03 сентября 2018

Я пытаюсь центрировать окно поиска в семантическом интерфейсе. столбец центрирован, но результаты поиска не центрированы. я попытался добавить выровненные по центру классы для ввода div, но это не сработало вот мой код и моя js скриптовая ссылка : 

var categoryContent = [{
    category: 'Language',
    title: 'Python'
  },
  {
    category: 'Language',
    title: 'Java'
  },
];

$('.ui.search')
  .search({
    type: 'category',
    source: categoryContent
  });
body {
  background-color: #F2EDF3;
}

.search-bar {
  width: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title></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 grid center aligned">
    <div class="sixteen wide column">
      <div class="ui category search ">
        <div class="ui icon input search-bar">
          <input class="prompt" type="text" placeholder="looking for...">
          <i class="search icon"></i>
        </div>
        <div class="results"></div>
      </div>
    </div>
  </div>

</body>

</html>

Ответы [ 3 ]

0 голосов
/ 03 сентября 2018

.results имеет положение: абсолютное и левое: 0, а его родитель имеет относительное положение, и это 100%, поэтому нормально .results идет влево, потому что именно так абсолютное положение работает внутри относительного положения

Так что, как и в случае с любым другим фреймворком, вы должны перезаписать материал. Не используйте! Важный, потому что это плохая практика, вместо этого вы используете то, что называется в css " специфичность "

Так что вы можете сделать это: 

.ui.search > .search-bar + .results {
  position: relative;
  margin: 0 auto;
}

https://jsfiddle.net/xwftdv2h/7/

0 голосов
/ 03 сентября 2018

Пожалуйста, попробуйте ниже код. Я проверил это должно работать. 

.ui.category.search .results.visible {
    display: inline-block !important;
    width: 50% !important;
    position: unset !important;
}

Выход:

enter image description here

0 голосов
/ 03 сентября 2018

Ваша проблема в том, что элемент, отображающий результаты, имеет свойство css для абсолютного позиционирования. Это вместе с слева: 0, всегда будет размещать элемент слева.

После сброса (путем установки наследования) и центрирования содержимого с полем: 0 auto; все работают как задумано. Вот пример скрипки 

.results.visible{
   margin: 0 auto;
   position: inherit;
}

Если это не работает, используйте более идентифицирующий CSS, который переопределит любые дополнительные стили. Но обратите внимание, что в случае, если HTML отличается от того, что было представлено или CSS, это не будет работать. Это зависит от "избиения" существующего правила, которое вызывает абсолютное позиционирование, начиная с того же родителя, а затем более конкретно об этом (с .visible, который относится к дополнительному классу). 

.ui.search > .results.visible {
  position: relative;
  margin: 0 auto;
}

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

.results.visible{
   margin: 0 auto !important;
   position: inherit !important;
}

Вы можете попробовать это с этой скрипкой

...