centering search box in semantic ui

semantic ui center text
semantic ui container
semantic ui react grid
semantic ui float right
semantic ui tutorial
semantic ui navbar
semantic ui card
semantic ui input

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>

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

Grid Flexbox, Centering Content. If a row does not take up all sixteen grid columns, you can use a centered variation to center the column contents inside the grid. I just have a log-in box based on your login example. You use the css body > .grid { height: 100%;} for stretching the height to the whole window and then you vertical align it with center align grid. This works all fine. But I want to do that with react. As reacts inserts some divs between the body and the grid body > .grid doesn't work anymore.

.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/

Item, Accordion Checkbox Dimmer Dropdown Embed Modal Popup Progress Rating Search Shape Sidebar Sticky Tab Transition. Behaviors. API Form ValidationĀ  Variations like, text alignment and floating are done in the context of ui elements. There are no "free floating" helper classes in Semantic UI. For instance you can use a ui center aligned grid to center content in a grid column, or a ui right floated image to float an image. Centering arbitrary content should be done in your own code. šŸ‘

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:

How to center all contents Ā· Issue #937 Ā· Semantic-Org/Semantic-UI , For instance you can use a ui center aligned grid to center content in a grid column, or a ui right floated image to float an image. CenteringĀ  Floating Rows. Since Semantic UI's grid is based on flex box, a left floated item should come first, and a right floated item last in its row. Text Alignment. You can specify text alignment using alignment variations on a grid, row, or column level.

React Semantic UI Tutorial for Beginners, center; right; justified. Semantic UI Form. The Form component is used to display a set of related user input fieldsĀ  Semantic's default theme uses 16 columns. The example below shows four four wide columns will fit in the first row, 16 / 4 = 4, and three various sized columns in the second row. 2 + 8 + 6 = 16. The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.

Semantic UI Vertically Center Grid/Container/Whatever! : webdev, Semantic UI Vertically Center Grid/Container/Whatever! method="POST"> <div class="two fields"> <div class="field"> <label>Employee ID:</label> <inputĀ  Semantic UI icon docs now includes a global icon search with easy copy and paste access to html Flexbox Modals and Dimmers Semantic UI 2.3 includes a rewrite of modal to include non-js flexbox positioning for vertical centering.

Semantic UI Components for React, Apply default semantic UI classes for component, for example ui button right; left; justified; center. attached, union A field can show that input is mandatory. In order for them to appear correctly, your segment's offset container must have a z-index declared. A header Te eum doming eirmod, nominati pertinacia argumentum ad his.

Comments
  • this may help yours: .results.transition.visible{margin: auto; position: relative;}
  • @VishnuChauhan you checked how it looks right? :D it apperas on left then moves to center
  • ok i got it working but can you explain this a bit how you found the solution as i couldnt find it in the docs
  • @anekix i just found by inspecting the element with developer tools, what was causing the display issues and put the required css to correct it. I am not familiar with semantic, but as far as i saw the documentation offers no solution about centering either.
  • @vfle dude you literally stole my answer, downvoted. Have some respect for other people's answers
  • @Raul The point of the site is to provide the best answer possible. There was already an existing answer too similar (40 something minutes early) to yours and you chose to answer again instead of editing the existing one with minor improvements. I answered before you and i won't bother answering any more, as the point of the site is to provide the best possible answers and not trying to maximize your karma gains. Have a nice day.
  • @vfe I would have been ok if you would have mentioned that your answer was improved using mine. That's all I ask.
  • I would appreciate if you don't downvote my answer since it was stolen by @vfle. He edited his answer and copied my solution into his. Thanks!