CODEWITHSUNDEEP
twitter-bootstraplaravellaravel-blade
theGreenCabbage
theGreenCabbage

Reputation: 4845

Button on input group within Laravel

I got the following Blade template. I am trying to emulate the button addon class here:

  <div class="col-lg-6">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="Search for...">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->

This is my Blade code.

<div class="col-lg-10 text-centered">
    <div class="input-group">
        {!! Form::open(['action' => ['SchedulizerController@results'], 'method' => 'GET']) !!}
        {!! Form::text('q', '', [
        '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-default')) !!}
        </span>
        {!! Form::close() !!}
    </div>
</div>

In pure HTML (from view-source) the code looks like this:

<div class="col-lg-10 text-centered">
    <div class="input-group">
        <form method="GET" action="http://app.dev/schedulizer/results" accept-charset="UTF-8">
        <input class="form-control" id="q" placeholder="i.e. ECE 201, Digital Logic, Kandasamy, or 41045" name="q" type="text" value="">
        <span class="input-group-btn">
            <input class="btn btn-default" type="submit" value="Search">
        </span>
        </form>
    </div>
</div>

However, the result looks like this:

enter image description here

My code is essentially the same as the Bootstrap code - so what gives?

EDIT:

Interestingly enough, if I don't close <div class="input-group" with >, it works. What the?!

Upvotes: 1

Views: 2378

Answers (1)

Deja Vu
Deja Vu

Reputation: 731

Is this it?

<div class="col-lg-10 text-centered">
    <form class="form-inline" method="GET" action="http://app.dev/schedulizer/results" accept-charset="UTF-8">
        <div class="form-group">
            <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="" />
                <div class="btn btn-default input-group-addon" type="submit">Search</div>
            </div>
        </div>
    </form>
</div>

Upvotes: 1

Related Questions