this is my Codepen,
<div title="Monitor Table: Cluster Queue Status" data-type="livereport" data-title="Cluster Queue Status" class="u-monitor meter ui-draggable ui-draggable-handle ui-resizable" id="42DCmauenMCrxjZEb">
<div class="meter-header">
<div class="edge livereport"> </div>
<h4>Cluster Queue Status</h4>
<div class="dropdown">
<button aria-expanded="true" aria-haspopup="true" class="dropdown-toggle">
<span class="sr-only">Options: livereport</span>
<span class="icon icon-burger-small"></span>
</button>
<ul class="dropdown-menu with-arrow small align-right">
<li>
<div class="dropdown-content panels">
<div class="panel-edit">
<ul class="list-unstyled">
<li>
<button type="button" data-action="edit" class="btn-link link-with-icon icon-edit">
Edit
</button>
</li>
<li>
<button type="button" data-action="delete" class="btn-link link-with-icon icon-delete">Delete
</button>
</li>
</ul>
<hr>
<ul class="list-unstyled">
<li>
<button type="button" data-action="downloadPdf" class="btn-link">Download .pdf</button>
</li>
<!--<li>-->
<!--<button type="button" class="btn-link">Download .jpg</button>-->
<!--</li>-->
<!--<li>-->
<!--<button type="button" class="btn-link">Download .png</button>-->
<!--</li>-->
<li>
<button class="btn-link" data-action="downloadCSV" type="button">Download .csv</button>
<a style="display: none" id="downloadCSV" download="Cluster Queue Status.csv"></a>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
<div style="right: auto; bottom: 5px; width:100%; overflow: auto;" class="u-monitor-container">
<div style="display: none;" class="table-loading">
<p>
<i aria-hidden="true" class="fa fa-spinner fa-pulse fa-fw"></i>
<span class="sr-only">Loading...</span>
</p>
</div>
<div class="filter-list">
</div>
<table style="max-height: 346px;" class="table table-striped" data-type="report">
<thead>
<tr>
<th data-key="cluster_name">
<div class="blocker"></div>
<button data-key="{"mainAttr":"cluster_name"}" class="th-container" type="button">
<span class="th-button-title">Cluster Name</span>
</button>
</th>
<th data-key="name">
<div class="blocker"></div>
<button data-key="{"mainAttr":"name"}" class="th-container" type="button">
<span class="th-button-title">Queue Name</span>
</button>
</th>
<th data-key="usedSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"usedSlots"}" class="th-container" type="button">
<span class="th-button-title">Used Slots</span>
</button>
</th>
<th data-key="availableSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"availableSlots"}" class="th-container" type="button">
<span class="th-button-title">Available Slots</span>
</button>
</th>
<th data-key="ambiguous">
<div class="blocker"></div>
<button data-key="{"mainAttr":"ambiguous"}" class="th-container" type="button">
<span class="th-button-title">Ambiguous</span>
</button>
</th>
<th data-key="disabledByCalendar">
<div class="blocker"></div>
<button data-key="{"mainAttr":"disabledByCalendar"}" class="th-container" type="button">
<span class="th-button-title">Disabled By Calendar</span>
</button>
</th>
<th data-key="disabledManual">
<div class="blocker"></div>
<button data-key="{"mainAttr":"disabledManual"}" class="th-container" type="button">
<span class="th-button-title">Disabled Manual</span>
</button>
</th>
<th data-key="error">
<div class="blocker"></div>
<button data-key="{"mainAttr":"error"}" class="th-container" type="button">
<span class="th-button-title">Error</span>
<span class="th-button-sort">
<i class="fa fa-sort-asc"></i>
</span>
</button>
</th>
<th data-key="loadAlarm">
<div class="blocker"></div>
<button data-key="{"mainAttr":"loadAlarm"}" class="th-container" type="button">
<span class="th-button-title">Load Alarm</span>
</button>
</th>
<th data-key="manualIntervention">
<div class="blocker"></div>
<button data-key="{"mainAttr":"manualIntervention"}" class="th-container" type="button">
<span class="th-button-title">Manual Intervention</span>
</button>
</th>
<th data-key="orphaned">
<div class="blocker"></div>
<button data-key="{"mainAttr":"orphaned"}" class="th-container" type="button">
<span class="th-button-title">Orphaned</span>
</button>
</th>
<th data-key="reservedSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"reservedSlots"}" class="th-container" type="button">
<span class="th-button-title">Reserved Slots</span>
</button>
</th>
<th data-key="suspendByCalendar">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendByCalendar"}" class="th-container" type="button">
<span class="th-button-title">Suspend By Calendar</span>
</button>
</th>
<th data-key="suspendManual">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendManual"}" class="th-container" type="button">
<span class="th-button-title">Suspend Manual</span>
</button>
</th>
<th data-key="suspendOnSubordinate">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendOnSubordinate"}" class="th-container" type="button">
<span class="th-button-title">Suspend On Subordinate</span>
</button>
</th>
<th data-key="suspendThreshold">
<div class="blocker"></div>
<button data-key="{"mainAttr":"suspendThreshold"}" class="th-container" type="button">
<span class="th-button-title">Suspend Threshold</span>
</button>
</th>
<th data-key="tempDisabled">
<div class="blocker"></div>
<button data-key="{"mainAttr":"tempDisabled"}" class="th-container" type="button">
<span class="th-button-title">Temp Disabled</span>
</button>
</th>
<th data-key="totalSlots">
<div class="blocker"></div>
<button data-key="{"mainAttr":"totalSlots"}" class="th-container" type="button">
<span class="th-button-title">Total Slots</span>
</button>
</th>
<th data-key="unknown">
<div class="blocker"></div>
<button data-key="{"mainAttr":"unknown"}" class="th-container" type="button">
<span class="th-button-title">Unknown</span>
</button>
</th>
<th data-key="load">
<div class="blocker"></div>
<button data-key="{"mainAttr":"load"}" class="th-container" type="button">
<span class="th-button-title">Load</span>
</button>
</th>
</tr>
</thead>
<tbody><tr><td>test charlie</td><td>queue-17.q</td><td>1754</td><td>8246</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>21.719</td></tr><tr><td>test charlie</td><td>queue-42.q</td><td>7226</td><td>2774</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>12.993</td></tr><tr><td>test charlie</td><td>queue-16.q</td><td>8469</td><td>1531</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>16.730</td></tr><tr><td>test charlie</td><td>queue-9.q</td><td>8639</td><td>1361</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>14.279</td></tr><tr><td>test charlie</td><td>queue-6.q</td><td>8584</td><td>1416</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>18.757</td></tr><tr><td>test charlie</td><td>queue-34.q</td><td>6280</td><td>3720</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>4.167</td></tr><tr><td>test charlie</td><td>queue-33.q</td><td>1839</td><td>8161</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>26.900</td></tr><tr><td>cluster 3</td><td>queue-10.q</td><td>3478</td><td>6522</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>1.511</td></tr><tr><td>cluster 3</td><td>queue-29.q</td><td>4918</td><td>5082</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>11.513</td></tr><tr><td>cluster 3</td><td>queue-28.q</td><td>4334</td><td>5666</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>25.730</td></tr><tr><td>cluster 3</td><td>queue-4.q</td><td>3960</td><td>6040</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>8.859</td></tr><tr><td>cluster 3</td><td>queue-24.q</td><td>4662</td><td>5338</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>19.812</td></tr><tr><td>cluster 3</td><td>queue-30.q</td><td>8255</td><td>1745</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>36.908</td></tr><tr><td>cluster 3</td><td>queue-11.q</td><td>5390</td><td>4610</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>2.718</td></tr><tr><td>UGE841</td><td>queue-2.q</td><td>8059</td><td>1941</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>37.822</td></tr><tr><td>UGE841</td><td>queue-43.q</td><td>7649</td><td>2351</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>29.769</td></tr><tr><td>UGE841</td><td>queue-8.q</td><td>784</td><td>9216</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>1.039</td></tr><tr><td>UGE841</td><td>queue-26.q</td><td>7183</td><td>2817</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>4.707</td></tr><tr><td>UGE841</td><td>queue-31.q</td><td>7089</td><td>2911</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>4.700</td></tr><tr><td>UGE841</td><td>queue-32.q</td><td>3501</td><td>6499</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>8</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>0</td><td>10000</td><td>8</td><td>5.015</td></tr></tbody>
<tfoot>
<tr>
<td colspan="21">20 of 20</td>
</tr>
</tfoot>
</table>
</div>
<div style="width: 0; height: 0;" class="click-receiver">
<button style="display: none;" class="menu-hover" type="button"></button>
</div>
<div class="ui-resizable-handle ui-resizable-ne"></div>
<div class="ui-resizable-handle ui-resizable-n"></div>
<div class="ui-resizable-handle ui-resizable-nw"></div>
<div class="ui-resizable-handle ui-resizable-w"></div>
<div class="ui-resizable-handle ui-resizable-sw"></div>
<div class="ui-resizable-handle ui-resizable-s"></div>
<div class="ui-resizable-handle ui-resizable-se"></div>
<div class="ui-resizable-handle ui-resizable-e"></div>
</div>
this piece of html/css works just fine in modern version of chrome and firefox, but it doesn't in Firefox 38 which I need to support :-(
basically I have a container(main) position absolute with overflow auto width 100% relative to the parent container(grandparent). Inside the main container I have a table which in FF38 gets as wide as the main container and some parts of the columns get overlapped with each other. In modern browsers the table get wider than the container and you can see an scroll bar that allow you to move right/left.
so the question is how can I reproduce this behaviour on FF38??
thanks in advance :-)
Related
So I'm working in a laravel project using The Argon Dashboard Pro bootstrap template. I'm trying to show user data from the database in a sortable, the data shows without a problem but when I'm trying to left click a link inside the table (to go to edit a user for example) nothing happens. I can right click the link and open it on a new page, but left click just does nothing. What am I doing wrong?
Here's the code:
<div class="header bg-primary pb-6"><!-- Page title -->
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<i class="ni ni-shop text-white"></i>
<h6 class="h2 text-white d-inline-block mb-0">Users</h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><i class="ni ni-circle-08"></i></li>
<li class="breadcrumb-item">Users</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid mt--6">
<div class="row">
<div class="col">
<div class="card">
<!-- card header -->
<!-- Card header -->
<div class="card-header border-0">
<h4 class="card-title mb-0">
{{ __('labels.backend.access.users.management') }} <small class="text-muted">{{ __('labels.backend.access.users.active') }}</small>
</h4>
<!-- Import users -->
<div class="btn-toolbar float-right" role="toolbar" aria-label="#lang('labels.general.toolbar_btn_groups')">
<i class="fas fa-file-import"></i>
</div>
<!--Create new user-->
<div class="btn-toolbar float-right" role="toolbar" aria-label="#lang('labels.general.toolbar_btn_groups')">
<i class="fas fa-plus-circle"></i>
</div>
<!-- Search users -->
<form class="navbar-search navbar-search-light form-inline mr-sm-3 float-right" id="navbar-search-main">
<div class="form-group mb-0">
<div class="input-group input-group-alternative input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="fas fa-search"></i></span>
</div>
<input class="form-control" placeholder="Search User" type="text">
</div>
</div>
<button type="button" class="close" data-action="search-close" data-target="#navbar-search-main" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</form>
</div>
<!-- Light table -->
<div class="table-responsive" data-toggle="list" data-list-values='["id", "name", "email", "role", "updated"]'>
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col" class="sort" data-sort="id">User ID</th>
<th scope="col" class="sort" data-sort="name">Name</th>
<th scope="col" class="sort" data-sort="email">E-mail Address</th>
<th scope="col" class="sort" data-sort="role">Role</th>
<th scope="col">Active</th>
<th scope="col" class="sort" data-sort="updated">Last Updated At</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody class="list">
#foreach($users as $user)
<tr>
<td><span class="id mb-0 text-sm">{{ $user->id }}</span></td>
<td><span class="name mb-0 text-sm">{{ $user->first_name. ' ' .$user->last_name }}</span></td>
<td class="email mb-0 text-sm">{{ $user->email }}</td>
<td><span class="role mb-0 text-sm">[Role]</span></td>
<td>{{ $user->active == '1' ? 'Active' : 'Inactive'}}</td>
<td><span class="updated mb-0 text-sm">{{ $user->updated_at->diffForHumans() }}</span></td>
<td>
<i class="fas fa-edit" style="font-size:24px"></i>
<i class="fas fa-trash-alt" style="font-size:24px"></i>
</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<!-- Card footer -->
<div class="card-footer py-4">
<nav aria-label="...">
<ul class="pagination justify-content-end mb-0">
<li class="page-item disabled">
<a class="page-link" href="#" tabindex="-1">
<i class="fas fa-angle-left"></i>
<span class="sr-only">Previous</span>
</a>
</li>
<li class="page-item active">
<a class="page-link" href="#">1</a>
</li>
<li class="page-item">
<a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
</li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item">
<a class="page-link" href="#">
<i class="fas fa-angle-right"></i>
<span class="sr-only">Next</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
I can see js errors in the console when clicking on the dropdown actions on the right saying "bootstrap.bundle.min.js:6 Uncaught TypeError: Cannot read property 'nodeName' of undefined"
check argon-dashboard-pro-laravel.creative-tim.com/sortable
Temporary fix
Use
onclick="location.href = 'YOUR_LINKS_GOES_HERE';"
Example
//...
<td>
<i class="fas fa-edit" style="font-size:24px"></i>
<i class="fas fa-trash-alt" style="font-size:24px"></i>
</td>
I created a list group that display a text variant name and its price, then e group button to edit it. what i want is price and button should be right-justified, but in my current work it seems messed up. here is my single item of list-item. Full snippet is here https://jsfiddle.net/matiusnugroho/uev7wz5t/4/
<li class="list-group-item px-0" style="padding: 0px;">
<span>
<a class="btn collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a>
<span class="float-right">341000</span>
<span class="float-right">
<div class="btn btn-group">
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</span>
</span>
<div
class="collapse" id="collapseExample11" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>Variant 03</td>
</tr>
<tr>
<td>Description</td>
<td>just it</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
how to put the price and button group properly?
Try to remove the floating class to align right side. When we use float-right will affect the other div alignment.
For spacing and button use the bootstrap default components.
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.list-group .card {
border: 0;
border-top: 1px solid #ddd;
border-radius: 0;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="card">
<div class="card-header"><strong class="card-title">Variants</strong></div>
<div class="card-body">
<div class="col-12">
<ul class="list-group">
<li class="list-group-item p-0 collapsed">
<div class="d-flex">
<a class="btn btn-link" data-toggle="collapse" href="#collapseExample10" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 02</a>
<div class="ml-auto my-1 mr-1">
<span class="price">12000</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample10" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>V02</td>
</tr>
<tr>
<td>Description</td>
<td>A description</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
<li class="list-group-item p-0">
<div class="d-flex">
<a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample11" role="button" aria-expanded="false" aria-controls="collapseExample1">Varian 03 is another variant</a>
<div class="ml-auto my-1 mr-1">
<span class="price">341000</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample11" style="">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>Variant 03</td>
</tr>
<tr>
<td>Description</td>
<td>just it</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
<li class="list-group-item p-0">
<div class="d-flex">
<a class="btn btn-link collapsed" data-toggle="collapse" href="#collapseExample12" role="button" aria-expanded="false" aria-controls="collapseExample1">Yet Another Varian</a>
<div class="ml-auto my-1 mr-1">
<span class="price">121212</span>
<button class="btn btn-outline"><i class="fa fa-pencil"></i></button>
<button class="btn btn-outline"><i class="fa fa-trash text-danger"></i></button>
</div>
</div>
<div class="collapse" id="collapseExample12">
<div class="card card-body mt-2">
<table>
<tr>
<td>Code</td>
<td>v34</td>
</tr>
<tr>
<td>Description</td>
<td>afrvrefr rre</td>
</tr>
<tr>
<td>Default</td>
<td><i class="fa fa-times"></i></td>
</tr>
<tr>
<td>Use Stock</td>
<td><i class="fa fa-check"></i></td>
</tr>
<tr>
<td>Use Recipe</td>
<td><i class="fa fa-times"></i></td>
</tr>
</table>
</div>
</div>
</li>
</ul>
</div>
<div class="col-12 mt-2 text-right">
<button type="button" class="btn btn-default">Add Varian</button>
</div>
</div>
</div>
I want my footer to stretches just to fit the default container width from bootstrap. Despite it is inside a row, which in turns is within the container tag, it strectches to fill the whole screen width.
How to avoid it?
please check it at: https://codepen.io/jcrr1985/pen/wRKdzL
You are not placing the footer inside the container class, that fixes the issue; also, you should consider using the <footer> tag instead to define a page footer, instead of a div with a class .footer; try to use semantic tags as much as you can
body{
background-color: #E4E4E4;
}
.navbar-brand{
font-weight: bold;
}
.form-inline input,button{
font-size: 13px!important;
}
.barraNav{
border: 1px solid black;
}
.section1Title{
font-size: 26px;
}
.edit{
background-color: #0066FF;
border: 1px solid #00CCFF;
padding: 5px 8px;
border-radius: 7px;
}
.footer{
padding: 10px;
background-color: #666666;
height: 75px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/css/tether.min.css" />
<!--bootstrap.min.css-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<!--jquery.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.0/css/all.css" integrity="sha384-aOkxzJ5uQz7WBObEZcHvV5JvRW3TUc2rNPA7pe3AwnsUohiw1Vj2Rgx2KSOkF5+h" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.5/angular.min.js"></script>
<body ng-controller = "evalController">
<div class="wrapper">
<div class="container">
<div class="row">
<div class="col-12 col-sm-12">
<div class="barraNav">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
<img src="logo.png">
</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar usuarios" aria-label="Buscar usuarios">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Nuevo usuario +</button>
</form>
</div>
</nav>
</div>
</div>
</div>
<div class="row">
<div class="col-12 col-sm-12">
<div class="section1">
<nav class="navbar navbar-expand-lg navbar-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link section1Title" href="#"><strong>LISTA DE USUARIOS</strong>
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Buscar usuarios" aria-label="Buscar usuarios">
<button class="btn btn-primary my-2 my-sm-0" type="submit">Nuevo usuario +</button>
</form>
</div>
</nav>
</div>
</div>
</div>
<div class="row section2">
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Nombre de Usuario</th>
<th scope="col">Cargo</th>
<th scope="col">E-mail</th>
<th scope="col">edit</th>
<th scope="col">Password</th>
<th scope="col">Del</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td><button class="edit"><i class="fas fa-pencil-alt"></i></button></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<footer class="row footer">
<div class="col-12 col-sm-12">
<span>© 2018</span>
</div>
</footer>
</div>
</div>
<!--Tether.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.4/js/tether.min.js"></script>
<!--bootstrap.min.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!--font awesome-->
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<title>Hello, world!</title>
<link rel="stylesheet" href="./main.css">
<link rel="stylesheet" href="./test.css">
</head>
<body>
<!--scripts-->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="./test.js"></script>
<!-- <button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span> -->
<div class="row justify-content-center test" id="button1">
<h1 class="status">Status of program</h1>
<div class="col-xs-offset-1">
<button type="button" class="btn btn-md" onclick="show(this)">Just an Idea</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">In Development</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Being Polited</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Proof Tested</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
<button type="button" class="btn btn-md" onclick="show(this)">Operationals</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</div>
</div>
<div class="row justify-content-center">
<div>
<h2 class="status">Rate the value of Your Idea will Provide</h2>
</div>
<div class="row">
<table class="table table-responsive" id="table">
<tbody id="tbody">
<tr class="test">
<td>
Client Experience
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Collaboration
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Money
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Time
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
<tr class="test">
<td>
Quality
</td>
<td>
<button type="button" class="btn btn-xs" onclick="show(this)">Low Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">Medium Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
<td>
<button type="button" class="btn btn-xs " onclick="show(this)">High Value</button>
<span class="fa-stack fa-lg" id="loadingImage" style="visibility: hidden">
<i class="fas fa-check-circle"></i>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Hi
I have written a small html page using bootstrap version 3.3.7 using BootstrapCDN
it just looked fine like this
After I thought to change to version 4.1.0
I just changed the CDN version from 3.3.7 to 4.1.0 from bootstrap official site but it changed whole alignment of my page like this
please help me
Thanks in advance
It's because some bootstrap 3 classes are different in verison 4. You didn't provide any code so it's hard to tell which specificly are causing the problem. You can read in more details about changes here https://getbootstrap.com/docs/4.0/migration/
I'm trying to put all the controls on the same row without using the class row 'cause this controls are near a column, that also have other controls. So my structure is actually this:
<div class="col-xs-12 col-md-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
and this is a jsfiddle
How you can see the buttons are on the same line but the textbox go ahead, I don't know wham is wrong. Someone could help? Thanks.
Use this type of grid section and http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp and adjust screen size according to this link
<div class="row">
<div class="col-sm-4">
<button class="btn btn-default">
<span class="glyphicon glyphicon-plus"></span>
Add</button>
<button class="btn btn-default" >
<span class="glyphicon glyphicon-plus"></span>
Remove</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span>
Refresh</button>
<button class="btn btn-default">
<span class="glyphicon glyphicon-fullscreen"></span>
</button>
</div>
<div class="col-sm-4">
<div class="input-group">
<input type="text"
class="form-control"
placeholder="Hello world">
<span class="input-group-btn">
<button class="clear btn btn-default clean-resource btn-danger" type="button">
<span class="glyphicon glyphicon-remove"></span>
</button>
</span>
</div>
</div>
</div>