centering search box in semantic ui

user_6518118 0
Viewed 1308

i am trying to center a search box in semantic ui. the bar is centered but the search results are not getting centered.i tried puuting center aligned classes to the input the divs but it didnt work here is my code and my js fiddle link:

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>

semantic-ui css html jquery
3 Answers

Your problem is, because the element that displays the results has the css property of absolute positioned. This combined, with the left:0, will always place the element on the left.

Upon resetting it (by setting it to inherit), and centering the content with the margin: 0 auto; all work as intended. Here is an example fiddle

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

If it is not working use a more identifying CSS, which will override any additional styles. But please note that in case the html is any different than what was presented or the css, this won't work. This depends on "beating" the existing rule that forces the absolute positioning by starting from the same parent and then being more specific about it (with the .visible that refers to an additional class).

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

In case of not working & as last resort option, use !important, which is not generally considered a good practice (as it break the normal flow of CSS rules and can cause problems in the future when styling), but in case you can't find the proper identifiers this will probably work.

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

You can try it with this fiddle

user_100368350

.results has position:absolute and left:0 and it's parent has position relative and it's 100% so it's normal that .results goes to the left because that's how position absolute works inside position relative

So as you would do with any framework you have to overwrite stuff. Don't use !important because it's bad practice instead you use whats called in css "specificity"

So you can do this:

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

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

user_8243440

Please try below code. I have checked it should be worked.

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

Output:

enter image description here

user_32749600
Related