2

I have a search bar that looks like this in my View:

enter image description here

I would like to double its width as well as center it, sorta like this example: Bootstrap 3 - How to maximize input width inside navbar

This is my nav bar partial:

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav">
            <li><a href="{{ url('/schedulizer') }}">Home</a></li>
            <li><a href="{{ url('/schedulizer/search') }}">Search</a></li>

            {{-- Show search bar if we're not in the search page --}}
            @if(Request::url() !== URL('schedulizer/search'))
                {{-- TODO: Remove in-line style --}}
                <li style="top: 8px"> @include('search.form')</li>
            @endif
        </ul>
    </div>

Where the search.form is:

{!! Form::open([
    'action' => ['SchedulizerController@results'],
    'method' => 'GET',
    'class' => 'form-inline'
]) !!}
    <div class="col-lg-10">
        <div class="input-group">
            {!! Form::text('q', $term, [
                'class' => 'form-control',
                'id' =>  'q',
                'placeholder' =>  'i.e. ECE 201, Digital Logic, Kandasamy, or 41045'
            ]) !!}
        <span class="input-group-btn">
            {!! Form::submit('Search', array('class' => 'btn btn-primary')) !!}
        </span>
        </div>
    </div>
{!! Form::close() !!}

@include('js.classes-autocomplete')

I've tried setting the width to 100%.. to hardcoding the width. But ultimately was unable to extend it.

Attached is the pure HTML:

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li><a href="http://app.dev/schedulizer">Home</a></li>
                <li><a href="http://app.dev/schedulizer/search">Search</a></li>

                                                                        <li style="top: 8px"> <form method="GET" action="http://app.dev/schedulizer/results" accept-charset="UTF-8" class="form-inline">
    <div class="col-lg-10">
        <div class="input-group">
            <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="ECEC 355 Computer Organization &amp; Architecture ">
        <span class="input-group-btn">
            <input class="btn btn-primary" type="submit" value="Search">
        </span>
        </div>
Community
  • 1
  • 1
theGreenCabbage
  • 5,197
  • 19
  • 79
  • 169

1 Answers1

0

This may help.

.navbar-default #formID #q {
  min-width: 325px;
}
.navbar-default .navbar-collapse {
  text-align: center;
}
@media (max-width: 768px) {
  .navbar-default #formID #q {
    min-width: 100%;
  }
  .navbar-default .navbar-collapse {
    text-align: left;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button> <a class="navbar-brand" href="#">Schedulizer</a>

    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">Home <span class="sr-only">(current)</span></a>

        </li>
        <li><a href="#">Search</a>

        </li>
      </ul>
      <form class="navbar-form" role="search" id="formID">
        <div class="input-group">
          <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="ECEC 355 Computer Organization &amp; Architecture " /> <span class="input-group-btn">
            <input class="btn btn-primary" type="submit" value="Search"/>
        </span>

        </div>
      </form>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

It's just knowing the component properties (or going into the CSS/JS to find out) so you can adjust them to what you ultimately need.

As an example: the search input width, you have to assign it a fixed width because even at 100%, it's constrained by the .form-control element which I is set to width:auto so it will not change otherwise. Setting a reasonable with based on other nav components so it responds to a device width change and when it does change, reset the width (in this case @768px).

That's all it entails along with considering how things will flow into or out of a changing device width.

Hope this helps.

vanburen
  • 21,502
  • 7
  • 28
  • 41