I am having some extreme difficulties in keeping my data tables responsive on smaller screens. I have the issue page coming up on my reports page where I have navbar tabs to show 3 different tables (Only 2 are shown in the code and until I fix this error I am not continuing with said page.) which are Clicks/Leads/Reversals (Clicks/Leads for now). It is breaking out of my page as shown in the pictures below on the Leads tab table:
Leads page preview - Problematic table lies here
My code for displaying that page is like so:
reports.blade.php
@extends('admin.layouts.app')
@section('content')
<div class="content-wrapper">
<!-- Content Header (Page header) -->
<section class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1>Offer Reports</h1>
</div>
<div class="col-sm-6">
<ol class="breadcrumb float-sm-right">
<li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Home</a></li>
<li class="breadcrumb-item active">Offer Reports</li>
</ol>
</div>
</div>
</div><!-- /.container-fluid -->
</section>
<!-- Main content -->
<section class="content">
<!-- Default box -->
<div class="card card-danger card-outline card-outline-tabs">
<div class="card-header p-0 border-bottom-0">
<ul class="nav nav-tabs" id="custom-tabs-four-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="custom-tabs-four-clicks-tab" data-toggle="pill" href="#clicks" role="tab" aria-controls="clicks" aria-selected="true">Clicks</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-four-leads-tab" data-toggle="pill" href="#leads" role="tab" aria-controls="leads" aria-selected="false">Leads</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-four-reversals-tab" data-toggle="pill" href="#reversals" role="tab" aria-controls="reversals" aria-selected="false">Reversals</a>
</li>
<li class="nav-item">
<a class="nav-link" id="custom-tabs-four-revenue-tab" data-toggle="pill" href="#revenue" role="tab" aria-controls="revenue" aria-selected="false">Revenue</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content" id="custom-tabs-four-tabContent">
<div class="tab-pane fade show active" id="clicks" role="tabpanel" aria-labelledby="clicks">
<table id="table" class="table table-sm">
<thead>
<tr>
<th hidden>#</th>
<th>Offer</th>
<th>Advertiser</th>
<th>Publisher</th>
<th>Click ID</th>
<th>Sub IDs</th>
<th>Referer</th>
<th>I.P. Address</th>
<th>Timestamp</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($clicks as $click)
@php
$banner = \App\Models\OfferBanner::find($click->bid);
$offer = \App\Models\Offer::find($banner->oid);
$advertiser = \App\Models\Advertiser::find($offer->aid);
$publisher = \App\Models\Publisher::find($click->pid);
$geo_location = \Location::get($click->ip_address);
$timestamp = \Carbon\Carbon::parse($click->created_at)->toDateTimeString();
@endphp
<tr>
<td hidden>{{ $click->id }}</td>
<td><a href="{{ route('admin.offer.manage.view', $offer->id) }}">{{ $offer->name }}</a></td>
<td><a href="{{ route('admin.advertiser.manage.view', $advertiser->id) }}">{{ $advertiser->company }}</a></td>
<td><a href="{{ route('admin.publisher.manage.view', $publisher->id) }}">{{ $publisher->first_name }} {{ $publisher->last_name }}</a></td>
<td>{{ $click->token }}</td>
<td>@if($click->s1) {{ $click->s1 }} @endif @if($click->s2)/ {{$click->s2}} @endif @if($click->s3)/ {{ $click->s3 }} @endif @if($click->s4)/ {{$click->s4}} @endif @if($click->s5)/ {{ $click->s5 }} @endif</td>
<td>{{ $click->referred_url }}</td>
<td><p title="{{ $geo_location->regionName }}, {{ $geo_location->countryName }}">{{ $click->ip_address }}</p></td>
<td>{{ $timestamp }}</td>
<td>
<form action="" method="post">
@csrf
<input type="text" name="action" value="credit" hidden>
<button class="btn btn-app" type="submit">
<i class="fas fa-check"></i> Credit
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th hidden>#</th>
<th>Offer</th>
<th>Advertiser</th>
<th>Publisher</th>
<th>Click ID</th>
<th>Sub IDs</th>
<th>Referer</th>
<th>I.P. Address</th>
<th>Timestamp</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<div class="tab-pane fade" id="leads" role="tabpanel" aria-labelledby="leads">
<table id="table2" class="table table-sm">
<thead>
<tr>
<th hidden>#</th>
<th>Offer</th>
<th>Advertiser</th>
<th>Publisher</th>
<th>Click ID</th>
<th>Sub IDs</th>
<th>Referer</th>
<th>I.P. Address</th>
<th>Timestamp</th>
<th>Action</th>
</tr>
</thead>
<tbody>
@foreach($leads as $lead)
@php
$banner = \App\Models\OfferBanner::find($lead->bid);
$offer = \App\Models\Offer::find($banner->oid);
$advertiser = \App\Models\Advertiser::find($offer->aid);
$publisher = \App\Models\Publisher::find($lead->pid);
$geo_location = \Location::get($lead->ip_address);
$timestamp = \Carbon\Carbon::parse($lead->created_at)->toDateTimeString();
@endphp
<tr>
<td hidden>{{ $lead->id }}</td>
<td>{{ $offer->name }}</td>
<td>{{ $advertiser->company }}</td>
<td>{{ $publisher->first_name }} {{ $publisher->last_name }}</td>
<td>{{ $lead->token }}</td>
<td>@if($lead->s1) {{ $lead->s1 }} @endif @if($lead->s2)/ {{$lead->s2}} @endif @if($lead->s3)/ {{ $lead->s3 }} @endif @if($lead->s4)/ {{$lead->s4}} @endif @if($lead->s5)/ {{ $lead->s5 }} @endif</td>
<td>{{ $lead->referred_url }}</td>
<td><p title="{{ $geo_location->regionName }}, {{ $geo_location->countryName }}">{{ $lead->ip_address }}</p></td>
<td>{{ $timestamp }}</td>
<td>
<form action="" method="post">
@csrf
<input type="text" name="action" value="reverse" hidden>
<button class="btn btn-app" type="submit">
<i class="fas fa-times"></i> Reverse
</button>
</form>
</td>
</tr>
@endforeach
</tbody>
<tfoot>
<tr>
<th hidden>#</th>
<th>Offer</th>
<th>Advertiser</th>
<th>Publisher</th>
<th>Click ID</th>
<th>Sub IDs</th>
<th>Referer</th>
<th>I.P. Address</th>
<th>Timestamp</th>
<th>Action</th>
</tr>
</tfoot>
</table>
</div>
<div class="tab-pane fade" id="reversals" role="tabpanel" aria-labelledby="reversals">
Morbi turpis dolor, vulputate vitae felis non, tincidunt congue mauris. Phasellus volutpat augue id mi placerat mollis. Vivamus faucibus eu massa eget condimentum. Fusce nec hendrerit sem, ac tristique nulla. Integer vestibulum orci odio. Cras nec augue ipsum. Suspendisse ut velit condimentum, mattis urna a, malesuada nunc. Curabitur eleifend facilisis velit finibus tristique. Nam vulputate, eros non luctus efficitur, ipsum odio volutpat massa, sit amet sollicitudin est libero sed ipsum. Nulla lacinia, ex vitae gravida fermentum, lectus ipsum gravida arcu, id fermentum metus arcu vel metus. Curabitur eget sem eu risus tincidunt eleifend ac ornare magna.
</div>
<div class="tab-pane fade" id="revenue" role="tabpanel" aria-labelledby="revenue">
Pellentesque vestibulum commodo nibh nec blandit. Maecenas neque magna, iaculis tempus turpis ac, ornare sodales tellus. Mauris eget blandit dolor. Quisque tincidunt venenatis vulputate. Morbi euismod molestie tristique. Vestibulum consectetur dolor a vestibulum pharetra. Donec interdum placerat urna nec pharetra. Etiam eget dapibus orci, eget aliquet urna. Nunc at consequat diam. Nunc et felis ut nisl commodo dignissim. In hac habitasse platea dictumst. Praesent imperdiet accumsan ex sit amet facilisis.
</div>
</div>
</div>
<!-- /.card -->
</div>
</section>
<!-- /.content -->
</div>
@endsection
@section('footerComponent')
<script type="text/javascript">
$('#table2').DataTable({
order: [[0, 'desc']],
responsive: true,
"paging": true,
"lengthChange": false,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
});
</script>
@endsectionInside app.blade i have called all the required css styles & javascript files that adminlte requires, as seen in the screenshots the pages load the datatable. It wouldn't let me include the app.blade.php for character reasons. The inital call is in app.blade.php the same way table2 is called above in the reports.blade.php and is placed at bottom of the app.blade.php after all other javascripts.
I was having the issue of the Leads table being smaller and not stretching the whole length so i added some more paramenters to the datatable load. Now i just have this second table bugging me and wondering how the 3rd table will come to show on this single page.
