I have created a view that shows 2 columns on medium and large screens but only 1 column on small and extra small screens. I'm using the push and pull classes from bootstrap to reorder my panels at different screen sizes.
My problem is that on small and extra small screen sizes some of my links and buttons are not clickable.
I have followed this thread Links in bootstrap grid stop working in small screen mode. It says the problem is that the links are floated, resulting in a height of 0 for the parent container.
I have tried using the "clearfix" class. I've also created my own class using overflow:auto and another using overflow:hidden and none of these work.
I have never had this problem before but this is the first time I've used push/pull. Would you take a look at my code and see if you can spot the problem?
<div class="container">
<!--*********************************Modal for notes**********************************************************-->
<div class="modal fade" id="myModal" name="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h3 class="modal-title" id="myModalLabel">Notes</h3>
</div>
<div class="modal-body">
<form method="post" action="/notes/save" role="form" name="new_note">
{!! csrf_field() !!}
<div class="form-group">
<label for="note">Type a new note for this client. (The current date will be automatically added.)</label>
<textarea class="form-control" rows="15" name="note" id="note" required></textarea>
<input type="hidden" name="ind_id" value="{{ $id }}">
<input type="hidden" name="timestamp" id="timestamp">
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Save Changes" onclick="this.form.timestamp.value=Date.now()">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</form>
</div>
</div>
</div>
</div>
<!--***********************************End modal code***********************************************************-->
<div class="row">
<div class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<!--************************************Name and Address********************************************************-->
<div class="panel panel-primary">
<div class="panel-heading">Name and Address</div>
<div class="panel-body">
<address class="col-md-6">
<strong>{{ $ind->name }}</strong><br>
@if ($ind->MailingStreet)
{{ $ind->MailingStreet }}<br>
@endif
@if ($ind->MailingCity || $ind->MailingState || $ind->MailingPostalCode)
{{ $ind->MailingCity . ", " . $ind->MailingState . " " . $ind->MailingPostalCode }}
@endif
</address>
<address class="col-md-6">
@if ($ind->OtherStreet || $ind->OtherCity || $ind->OtherState || $ind->OtherPostalCode)
<strong>Other Address</strong><br>
@endif
@if ($ind->OtherStreet)
{{ $ind->OtherStreet }}<br>
@endif
@if ($ind->OtherCity || $ind->OtherState || $ind->OtherPostalCode)
{{ $ind->OtherCity . ", " . $ind->OtherState . " " . $ind->OtherPostalCode }}
@endif
</address>
</div>
</div>
<!--*******************************************End Name and Address***************************************-->
<!--*******************************************Contact Info***********************************************-->
<div class="panel panel-danger">
<div class="panel-heading">Contact Info</div>
<div class="panel-body">
@if ($ind->Cell_Phone)
<div class="col-md-5 col-sm-6"><strong>Cell Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Cell_Phone }}</div>
@endif
@if ($ind->Spouse_Cell_Phone)
<div class="col-md-5 col-sm-6"><strong>Spouse Cell Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Cell_Phone }}</div>
@endif
@if ($ind->Business_Phone)
<div class="col-md-5 col-sm-6"><strong>Business Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Business_Phone }}</div>
@endif
@if ($ind->Spouse_Business_Phone)
<div class="col-md-5 col-sm-6"><strong>Spouse Business Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Business_Phone }}</div>
@endif
@if ($ind->HomePhone)
<div class="col-md-5 col-sm-6"><strong>Home Phone</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->HomePhone }}</div>
@endif
@if ($ind->Fax)
<div class="col-md-5 col-sm-6"><strong>Fax</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Fax }}</div>
@endif
@if ($ind->Email)
<div class="col-md-5 col-sm-6"><strong>Email</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Email }}</div>
@endif
@if ($ind->Spouse_Email)
<div class="col-md-5 col-sm-6"><strong>Spouse Email</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Spouse_Email }}</div>
@endif
@if ($ind->Return_Type)
<div class="col-md-5 col-sm-6"><strong>Return Type</strong></div>
<div class="col-md-7 col-sm-6">{{ $ind->Return_Type }}</div>
@endif
</div>
</div>
<!--*********************************************End Contact Info******************************************-->
</div>
<div class="col-sm-12 col-md-4 col-md-pull-8 col-lg-3 col-lg-pull-9 pull-right">
<!--*******************************************Options***********************************************************-->
<ul class="list-group">
<li class="list-group-item">
<a href="/individuals/edit/{{ $id }}" class="btn btn-warning btn-block no-print"><i class="fa fa-pencil-square-o"></i> Edit Client</a>
</li>
<li class="list-group-item">
<a href="/individuals/delete/{{ $id }}" class="btn btn-danger btn-block no-print" onclick="return confirm ('Are you sure you want to delete this client?')"><i class="fa fa-times"></i> Delete Client</a>
</li>
<li class="list-group-item">
<button type="button" class="btn btn-success btn-block no-print" data-toggle="modal" data-target="#myModal"><i class="fa fa-sticky-note-o"></i> Add Note</button>
</li>
<!--********************Link Form*****************************************-->
<li class="list-group-item">
<form action="/links/save" method="post" class="form-inline">
{!! csrf_field() !!}
<div class="input-group btn-block">
<input id="autocomplete" type="text" class="form-control autocomplete no-print" name="client" placeholder="Add link..." required>
<input id="autocomplete-value" type="hidden" name="autocomplete-value" class="autocomplete-value">
<input id="ind_id" name="ind_id" type="hidden" value="{{ $id }}">
<span class="input-group-btn">
<button type="submit" class="btn btn-success no-print" style="height:36px;">Go</button>
</span>
</div>
</form>
</li>
<!--***********************End Link form*************************************-->
</ul>
<!--***************************************End Options*********************************************************-->
<!--************************************************Routing sheet starts here*********************************************************-->
@if(isset($routing_sheet))
<div class="panel panel-info" id="2015_routing_sheet">
<div class="panel-heading" role="tab" id="headingOne">2015 Tax Return</div>
<ul class="list-group">
@foreach($routing_sheet as $r)
<form action='/individuals/tax_return_2015' method='post'>
{!! csrf_field() !!}
@if($r->user_name)
<li class="list-group-item" style="padding: 5px 5px 5px 5px;">
<div>
<button
type='submit'
class='btn btn-success btn-xs'
name='button'
value="Clear"
onclick="return confirm('Are you sure you want to clear this event?')">
<i class="fa fa-check" aria-hidden="true"></i>
</button>
<strong>{{ $r->name }}</strong>
</div>
<div>
{{ $r->user_name }}
{{ $r->date ? date('m/d/Y h:i a', strtotime($r->date)) : '' }}
</div>
<input type='hidden' name='routing_events_id' id='routing_events_id' value='{{ $r->id }}'>
<input type='hidden' name='routing_data_id' id='routing_data_id' value='{{ $r->routing_data_id }}'>
</li>
@else
<li class="list-group-item" style="padding: 5px 5px 5px 5px;">
<button
type='submit'
class='btn btn-danger btn-xs'
name='button'
value="Done"
onclick='this.form.timestamp.value=Date.now()'>
<i class="fa fa-square-o" aria-hidden="true"></i>
</button>
<strong>{{ $r->name }}</strong>
{{ $r->user_name }}
{{ $r->date ? date('m/d/Y h:i a', strtotime($r->date)) : '' }}
<input type='hidden' name='routing_events_id' id='routing_events_id' value='{{ $r->id }}'>
<input type='hidden' name='routing_data_id' id='routing_data_id' value='{{ $r->routing_data_id }}'>
</li>
@endif
<input id="ind_id" name="ind_id" type="hidden" value="{{ $id }}">
<input type="hidden" name="timestamp" id="timestamp">
</form>
@endforeach
</ul>
</div>
@endif
<!--*********************************************Routing Sheet ends here***********************************************-->
</div>
<div class="col-md-8 col-md-push-4 col-lg-9 col-lg-push-3">
<!--*******************************************Links**********************************************************-->
<div class="panel panel-warning">
<div class="panel-heading">Links</div>
<ul class="list-group">
<!--******************Start of displaying links*****************-->
@if(count($links_ind))
@foreach($links_ind as $link)
<li class="list-group-item">
<div class="row">
<div class="col-md-1 col-xs-1">
<a
href='/links/delete/{{ $link->link_id }}'
class='btn btn-danger btn-sm no-print'
onclick="return confirm ('Are you sure you want to delete this link?')">
<i class="fa fa-times"></i>
</a>
</div>
<div class="col-md-11 col-xs-11">
<div class="col-md-4 col-sm-5"><strong>Name</strong></div>
<div class="col-md-8 col-sm-7">
<a href='/individuals/{{ $link->ind_id }}'>{{ $link->FirstName.' '.$link->LastName }}</a>
</div>
@if ($link->Business_Phone)
<div class="col-md-4 col-sm-5"><strong>Business Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Business_Phone }}</div>
@endif
@if ($link->Cell_Phone)
<div class="col-md-4 col-sm-5"><strong>Cell Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Cell_Phone }}</div>
@endif
@if ($link->Spouse_Cell_Phone)
<div class="col-md-4 col-sm-5"><strong>Spouse Cell Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->Spouse_Cell_Phone }}</div>
@endif
@if ($link->HomePhone)
<div class="col-md-4 col-sm-5"><strong>Home Phone</strong></div>
<div class="col-md-8 col-sm-7">{{ $link->HomePhone }}</div>
@endif
</div>
</div>
</li>
@endforeach
@endif
@if(count($links_bus))
@foreach($links_bus as $link)
<li class="list-group-item">
<div class="row">
<div class="col-md-1 col-xs-1">
<a href='/links/delete/{{ $link->link_id }}'
class='btn btn-danger btn-sm no-print'
onclick="return confirm ('Are you sure you want to delete this link?')">
<i class="fa fa-times"></i>
</a>
</div>
<div class="col-md-11 col-xs-11">
<div class="col-md-4 col-sm-5"><strong>Name</strong></div>
<div class="col-md-7 col-sm-7">
<a href='/businesses/{{ $link->bus_bus_id }}'>{{ $link->company_name }}</a>
</div>
@if ($link->business_phone)
<div class="col-md-4 col-sm-5"><strong>Business Phone</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->business_phone }}</div>
@endif
@if ($link->cell_phone)
<div class="col-md-4 col-sm-5"><strong>Cell Phone</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->cell_phone }}</div>
@endif
@if ($link->fax)
<div class="col-md-4 col-sm-5"><strong>Fax</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->fax }}</div>
@endif
@if ($link->email)
<div class="col-md-4 col-sm-5"><strong>Email</strong></div>
<div class="col-md-7 col-sm-7">{{ $link->email }}</div>
@endif
</div>
</div>
</li>
@endforeach
@endif
</ul>
</div>
<!--*******************************************************End of displaying links*************************************************-->
<!--*****************************************start of displaying notes************************************************-->
<div class="panel panel-success">
<div class="panel-heading">Notes</div>
<ul class="list-group">
@if(count($notes))
<!--***********************************Modal for each note*******************************************-->
@foreach($notes as $note)
<div class='modal fade'
id='myModal{{ $note->id }}'
name='myModal{{ $note->id }}'
tabindex='-1'
role='dialog'
aria-labelledby='myModalLabel'>
<div class='modal-dialog modal-lg' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button>
<h3 class='modal-title' id='myModalLabel'>Edit Note</h3>
</div>
<form method='post' action='/notes/save' role='form' name='new_note'>
{!! csrf_field() !!}
<div class='modal-body'>
<div class='form-group'>
<label for='note'>Edit the note and save your changes.</label>
<textarea class='form-control' rows='15' name='note' id='note' required>{{ $note->note }}</textarea>
<input type='hidden' name='ind_id' id='ind_id' value="{{ $id }}">
<input type='hidden' name='note_id' id='note_id' value="{{ $note->id }}">
<input type='hidden' name='timestamp' id='timestamp'>
</div>
</div>
<div class='modal-footer'>
<input type='submit' class='btn btn-primary' value='Save Changes' onclick='this.form.timestamp.value=Date.now()'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</form>
</div>
</div>
</div>
<!--*****************************************End Modal for each note****************************************-->
<li class="list-group-item">
<div class="row">
<div class="col-lg-2 col-md-3 col-sm-2 col-xs-4">
<button type='button'
class='btn btn-warning no-print'
data-toggle='modal'
data-target='#myModal{{ $note->id }}'
>
<i class="fa fa-pencil-square-o"></i>
</button>
<a href='/notes/delete/{{ $note->id }}'
class='btn btn-danger no-print'
onclick="return confirm('Are you sure you want to delete this note?')"
><i class="fa fa-times"></i></a>
</div>
<div class="col-lg-2 col-md-3 col-sm-6 col-xs-8">{{ $note->user->name . ' ' . $note->user->last_name }}<br>{{ $note->timestamp->format('n/j/Y') }}</div>
<div class="col-lg-8 col-md-6 col-sm-12"><pre class="pre-note">{{ $note->note }}</pre></div>
</div>
</li>
@endforeach
@endif
</ul>
</div>
<!--******************************************end of displaying notes***************************************************-->
<!--*****************************************start of displaying invoices***********************************************
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Invoices</h3>
</div>
<div class="panel-body">
<ol>
@foreach($invoices as $invoice)
<li><a href='/invoice/pdf/{{ $invoice->id }}'>{{ date('m-d-Y', strtotime($invoice->date)) }}</a> {{ '$' . $invoice->amount }}</li>
@endforeach
</ol>
</div>
</div>
<!****************************************end of displaying invoices**************************************************-->
</div>
<script>
//This encodes the PHP array as JSON so that the autocomplete.js script can use it
var dataTwo = {!! $dataTwo !!};
</script>
</div>
</div>
Thank you
Jason
