How to make menu item 100% width


#1

Is there a semantic class/feature to enable a menu item to take up the available width?

I have a fixed menu bar and I need to make the search take up the remaining space but have failed to find any clues how this could be achieved.

TIA


#2

+1. I have the same problem. I want to put the search input in full width in the menu navbar.


#3

I founded a solution.

<div id="main-menu" class="ui borderless stackable menu" style="">
            <div class="ui container">
                <a class="item">
                    <b>IXXXX</b>
                </a>
                <a class="item">
                    <b>XXXX</b>
                </a>
                <a class="item">
                    <b>XXXX</b>
                </a>
                <a class="item">
                    <b>XXXX</b>
                </a>
                <a class="item">
                    <b>XXXX</b>
                </a>
                <div class="right menu" style="width: 100%;">
                    <div class="item" style="width: 100%;">
                        <div class="ui icon input">
                              <input placeholder="Search a very wide input..." type="text" />
                              <i class="search icon"></i>
                        </div>
                    </div>
                </div>
              ...

Good Luck!


#4

Have you tried ‘fluid’ class ?

Like <div class="ui fluid input">