CODEWITHSUNDEEP
htmlcssbootstrap-4
zemmsoares
zemmsoares

Reputation: 353

Navbar buttons stay inline on resize

My navbar is displaying fine on fullscreen but i´m getting some problems when i resize my browser, i´ve attached some images, i wonder how to make the buttons (Search Buttons) inline even on resize!

.btn-padding {
  margin-right: 10px;
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 10px;
}
<nav class="navbar navbar-expand-md navbar-dark navcolor">
    <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class="navbar-nav mr-auto">
        
            <li className="nav-item btn-padding-40"></li>

            <li className="nav-item btn-padding-40">
               
            </li>

            <li className="nav-item btn-padding-45">
                <a className="nav-link page-title">SPRINTS</a>
            </li>

            <li class="nav-item">
            <select value={this.state.value} onChange={this.handleChange} className="custom-select form-control btn-padding droppadding">
                    {optionItems}
             </select>
            </li>
        </ul>
    </div>
    <div class="mx-auto order-0">
        <a class="navbar-brand mx-auto" href="#"></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item">
                 <form class="form-inline">
                    <input id="SearchTxt2"  className="form-control btn-padding" type="text" placeholder="Sprint ID"></input>
                    <button className="btn btn-primary btn-padding" onClick={(e) => this.handleSubmit2(e)} type="submit">Search</button>
                </form>
            </li>    

                <li class="nav-item">
                    <form class="form-inline">
                        <input id="SearchTxt"class="form-control btn-padding" type="text" placeholder="Issue ID"></input>
                        <button class="btn btn-primary btn-padding" type="submit" onClick={(e) => this.handleSubmit(e)} >Search</button>
                    </form>
                </li>
        </ul>
    </div>
</nav>

Full screen This is ok, it displays as it should

enter image description here

Half-Screen the buttons instead staying inline they pass under the inputs

enter image description here

Collapse The same happends on collapse, they go under the inputs

enter image description here

Upvotes: 0

Views: 75

Answers (2)

HDP
HDP

Reputation: 4221

You will need to use input-group for that.

<div class="input-group">
  <input id="SearchTxt2"  className="form-control btn-padding" type="text" placeholder="Sprint ID">
  <div class="input-group-append">
    <button className="btn btn-primary btn-padding" onClick={(e) => this.handleSubmit2(e)} type="submit">Search</button>
  </div>
</div>

More details for input-group: Click here

Upvotes: 1

Mehdi Souregi
Mehdi Souregi

Reputation: 3265

You need to set the property white-space to nowrap to the parent div

<!-- Now try to resize your screen using developer tools or simply resizing the window -->
<div style="white-space: nowrap">
       <input type="text" />
       <button>OK</button> 
</div>

Upvotes: 0

Related Questions