I'm having a little problem with my CSS.
If you run the fiddle (had to use fiddle because of StackOverflow body limit), and look at the grey background of CASES.
Then you can see that all the content of Cases is nicely inside it the grey area. But if you click on Casefamily then you will notice that the Casefamily goes outside the grey area. This covers parts of my documentation section.
How can I make the "grey" area expand to its content?
<div id="pvCases_d30dcf2a">
<div class="Cases_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="Controllers_d30dcf2a">
<input class="search_d30dcf2a" placeholder="Search..">
<div class="catchWordContainer_d30dcf2a">
<input class="catchWord_d30dcf2a" placeholder="Catchword">
<div class="catchWordSuggestion_d30dcf2a"></div>
</div>
<div class="dropdown_d30dcf2a">
<div class="selected_d30dcf2a">
<span> Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
</div>
<div class="options_d30dcf2a" style="display: none;">
</div>
</div>
<div class="rightContainer_d30dcf2a">
<button type="button" id="SaveSearchResult">Save</button>
<div class="SearchCollection_d30dcf2a">
<div class="selected_d30dcf2a">
<span> </span><i class="fa fa-caret-down"></i>
</div>
<div class="SearchCollectionOptions_d30dcf2a">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12">
<div class="CaseTable_d30dcf2a">
<table class="table table-striped">
<thead>
<tr>
<th><span>Case Title</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Case Number</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Status</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Case Type</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Family</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Country</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Catchword</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th><span>Applicant/Proprietor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Inventor</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Description</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Classes</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Appl. Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Reg Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="defaultHidden_d30dcf2a"><span>Abandoned Date</span><i class="fa fa-caret-down"></i>
<div class="filter_options_d30dcf2a" style="display: none;">
<div class="row">
<div class="col-md-12">
<div class="AtoZ_d30dcf2a">A to Z</div>
</div>
<div class="col-md-12">
<div class="ZtoA_d30dcf2a">Z to A</div>
</div>
</div>
</div>
</th>
<th class="option_container_d30dcf2a">
<i class="fa fa-cog cog_d30dcf2a"></i>
<div class="cog_options_d30dcf2a">
<div class="row"></div>
<button class="SettingTableOptions_d30dcf2a">Save</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr data-content="{"Id":1,"Title":"Feed for salmonids","Case_Number":"P47931PC01","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC01","Inventor":"Konfab","Description":"<div class=\"ExternalClass4AF54D6F770C4D72987907C1A07DEA48\"><p>Something<br><br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":1}">
<td>Feed for salmonids</td>
<td>P47931PC01</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC01</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass4AF54D6F770C4D72987907C1A07DEA48">
<p>Something<br><br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
<tr data-content="{"Id":2,"Title":"case test","Case_Number":"P47931PC02","Status":"Filed","Case_Type":"Parent","Family":"Test","Country":"Denmark","Catchword":"Web","Applicant_x002f_Proprietor":"P47931PC02","Inventor":"Konfab","Description":"<div class=\"ExternalClass3E913664A3344C909C30924BD9212012\"><p>Something<br></p></div>","Classes":"dunno","Appl_x002e_Date":"2018-06-21T22:00:00Z","RegDate":"2018-06-21T22:00:00Z","Abandoneddate":null,"Picture":null,"ID":2}">
<td>case test</td>
<td>P47931PC02</td>
<td>Filed</td>
<td class="defaultHidden_d30dcf2a">Parent</td>
<td class="defaultHidden_d30dcf2a">Test</td>
<td class="defaultHidden_d30dcf2a">Denmark</td>
<td>Web</td>
<td>P47931PC02</td>
<td class="defaultHidden_d30dcf2a">Konfab</td>
<td class="defaultHidden_d30dcf2a">
<div class="ExternalClass3E913664A3344C909C30924BD9212012">
<p>Something<br></p>
</div>
</td>
<td class="defaultHidden_d30dcf2a">dunno</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">2018-06-21T22:00:00Z</td>
<td class="defaultHidden_d30dcf2a">null</td>
<td></td>
</tr>
</tbody>
</table>
<button type="button" class="download_xlsx_d30dcf2a">download as xlsx</button>
</div>
</div>
</div>
</div>
<div class="CaseDetails_d30dcf2a" style="display: block;">
<div class="return_d30dcf2a">
<span> Cases / </span><span>Feed for salmonids</span>
</div>
<div class="CaseDetailContainer_d30dcf2a">
<ul class="tabs_d30dcf2a group">
<li><a class="active_d30dcf2a">Case details</a></li>
<li><a class="">Casefamily</a></li>
</ul>
<div class="box_wrap_d30dcf2a">
<div class="active_d30dcf2a">
<div class="row">
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Case Number</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Status</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Filed</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Type</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Parent</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Family</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Test</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Country</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Denmark</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Title</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Feed for salmonids</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Applicant/Proprietor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">P47931PC01</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Inventor</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Konfab</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Description</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">Something</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Classes</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">dunno</div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="row">
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Appl. date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Reg. Date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class="">21-06-2018</div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Next Renewal</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Abandoned date</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
<div class="col-md-6 left_container_d30dcf2a">
<div class="">Division (subdivision)</div>
</div>
<div class="col-md-6 right_container_d30dcf2a">
<div class=""></div>
</div>
</div>
</div>
<div class="col-md-3">
<img>
</div>
</div>
</div>
<div class="Casefamily_d30dcf2a">
<table class="table">
<thead>
<tr>
<th>
Case No
</th>
<th>
Name
</th>
<th>
Applicant/Proprietor
</th>
<th>
Appl. date
</th>
<th>
Status
</th>
</tr>
</thead>
<tbody>
<tr class="status_d30dcf2a Filled_d30dcf2a">
<td>
T62039EU02
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Filed
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU03
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Pending_d30dcf2a">
<td>
T62039EU04
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Pending
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU05
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU06
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
<tr class="status_d30dcf2a Registered_d30dcf2a">
<td>
T62039EU07
</td>
<td>
Casename
</td>
<td>
</td>
<td>
</td>
<td>
Registered
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
replace position: absolute with position: relative, it will expand parent element
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a .box_wrap_d30dcf2a>div {
position: relative;
}
Hello Peter it doesn't respect the parent because it is a table, and tables are not responsive. The best solution is to make the parent div to have a CSS attribute of overflow-x : scroll, to enable people to view all the content and to contain you content.
#pvCases_d30dcf2a .CaseDetails_d30dcf2a .CaseDetailContainer_d30dcf2a
.box_wrap_d30dcf2a>div{
overflow-x : scroll;
}
Related
In the following, how do I set all cards to have same widths? I currently see some cards exceeding the specified width because of the the table it is holding. I am viewing it on a laptop.
<main role="main" class="container">
<div class="container">
<div class="main-body">
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div>
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<!-- stuff here-->
</div> <!--end of card-->
</div>
</div>
</div>
<div class="row gutters-sm">
<div class="col-md-15">
<div class="card mb-3">
<div class="card-body">
<table class="table mb-0 table-hover">
<thead class="bg-primary">
<tr>
<th scope="col">SSSSSS</th>
<th scope="col">DDDDDD</th>
<th scope="col">FFFFFF</th>
<th scope="col">TTTTTT</th>
<th scope="col">GGGGGGGGG</th>
<th scope="col">AAAAAA</th>
</tr>
</thead>
<tbody>
<tr>
<td class="mb-0"><div class="col-md-1 text-secondary">String 1 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 2 </div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 3</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">String 4</div></td>
<td class="mb-0"><div class="col-md-1 text-secondary">TTTT </div></td>
<td class="mb-0">
<div class="col-sm-12">
<a class="btn btn-secondary " name="education" href="/edit/2">Edit</a>
<a class="btn btn-danger " name="education" href="/delete/2">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
<!-- stuff here-->
</div> <!--end of card body-->
</div>
</div>
</div>
</div>
</div>
</main>
I have this container that was made with boostrap:
The question is, how can i do to make a horizontal scrolling to maintan the aspect of the first picture of the container but in phone resolutions?..
This is the container in phone resolution:
I don't like it in that way..
This is my code:
<div class="card-body scroll" style="border: none;">
<div class="cont">
<div class="row">
<div class="col-sm-12">
<div class="card" style="border: none;">
<div class="box-header">
<div class="row">
<div class="col-sm-8">
<h3 class="box-title w-text">Gestión de Empresas</h3>
</div>
<div class="col-sm-4">
<div class="box-tools">
<div class="input-group-prepend">
<input type="text" name="table_search" class="form-control pull-right" placeholder="Búsqueda" ng-model="searchField">
<span class="input-group-text">
<i class="fa fa-filter"></i>
</span>
<span class="input-group-text">
<i class="fas fa-plus"></i>
</span>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<strong>Razón social</strong>
</div>
<div class="col-sm-3">
<strong>RIF</strong>
</div>
<div class="col-sm-2">
<strong>Dirección fiscal</strong>
</div>
<div class="col-sm-2">
<strong>Activo</strong>
</div>
<div class="col-sm-2">
<strong>Acciones</strong>
</div>
<hr style="border: none;">
</div>
<div class="row" style="text-align: center;">
<div class="col-sm-3">
<h3>Ventor central</h3>
</div>
<div class="col-sm-3">
<h3>J-XYZ</h3>
</div>
<div class="col-sm-2">
<h3>Empresa de pruebas</h3>
</div>
<div class="col-sm-2">
<h3>Activo</h3>
</div>
<div class="col-sm-2" style="color: orange;">
<i class="fas fa-chevron-circle-down"></i>
</div>
<div class="col-sm-3">
<h3>Distribuidora regional del sol</h3>
</div>
<div class="col-sm-3">
<h3>J-1234567890</h3>
</div>
<div class="col-sm-2">
<h3>Carretera nacional</h3>
</div>
<div class="col-sm-2">
<h3>Activo</h3>
</div>
<div class="col-sm-2" style="color: orange;">
<i class="fas fa-chevron-circle-down"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Anyone can help me with this? Thank you!
I found a solution for this issue using the table that is provided with boostrap:
<table class="table">
<thead class="thead-light">
<tr>
<th scope="col">
<strong>Razón social</strong>
</th>
<th scope="col">
<strong>RIF</strong>
</th>
<th scope="col">
<strong>Dirección fiscal</strong>
</th>
<th scope="col">
<strong>Activo</strong>
</th>
<th scope="col">
<strong>Acciones</strong>
</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>Ventor central</h3></td>
<td><h3>J-XYZ</h3></td>
<td><h3>Empresa de pruebas</h3></td>
<td><h3>Activo</h3></td>
<td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
</tr>
<tr>
<td><h3>Distribuidora regional del sol</h3></td>
<td><h3>J-1234567890</h3></td>
<td><h3>Carretera nacional</h3></td>
<td><h3>Activo</h3></td>
<td><i class="fas fa-chevron-circle-down icon-fixed"></i></td>
</tr>
</tbody>
</table>
You can see the documentation here:
https://getbootstrap.com/docs/4.0/content/tables/
I want to remove the vertical space (look at this image below => red mark)
Using : Bootstrap 4
Preview : https://jsfiddle.net/3vcp8o15/
i've tried to put class m-0 and p-0 inside each col-6, but its still doesn't work.
is any wrong with my code?
here my current code:
<div class="row">
<div class="col-6 w-100">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
<tr>
<td class="text-left">Lorem Ipsum</td>
<td class="text-center">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">Lorem Ipsum</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
#foreach($transaction->retail_transaction_products as $row)
<tr>
<td class="text-left">{{ $row->product->name }}</td>
<td class="text-center">{{ $row->quantity }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->code }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ formatted_date($transaction->created_at) }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->branch_operational->open_employee->name }}</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
<tr>
<td class="text-left">Lorem Ipsum</td>
<td class="text-center">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-6">
<div class="card">
<div class="card-body">
<div class="row px-2">
<div class="col-12">
<h5>Detail Transaksi</h5>
</div>
</div>
<div class="row mt-4 px-2" style="font-size: 12px;">
<div class="col-4 text-left">
<p>Kode Transaksi</p>
</div>
<div class="col-4 text-left">
<p>Tanggal</p>
</div>
<div class="col-4 text-left">
<p>Kasir</p>
</div>
</div>
<div class="row px-2" style="font-size: 14px;">
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->code }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ formatted_date($transaction->created_at) }}</p>
</div>
<div class="col-4 text-left">
<p class="font-weight-bold">{{ $transaction->branch_operational->open_employee->name }}</p>
</div>
</div>
<div class="row justify-content-center mt-3 px-4" style="font-size: 14px;">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="drml-bg-lightgray">
<th class="text-left">Nama Produk</th>
<th class="text-center" width="100">Jumlah</th>
</tr>
</thead>
<tbody class="text-secondary">
<tr>
<td class="text-left">Lorem Ipsum</td>
<td class="text-center">Lorem Ipsum</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Is anyone can help me? thanks in advance!
i've tried to use float-right/left too, but i think its not dynamic
You can add this to CSS:
.card {
height: 100%;
}
Or for bootstrap make it this:
<div class="card h-100">
working here: https://jsfiddle.net/e5zxqnfp/
Hey all I am trying to find the correct code in order for the input thats within the DIV TABLE to go to the next line if it's too long to display on one line:
The JSFIDDLE is here
The HTML code:
<div class="container">
<div class="row">
<div class="col-xs-5 col-xs-offset-2 text-right" style="width: 100%;">
<div class="panel panel-default">
<div class="panel-heading" align="left">
<h4>Accident Information:</h4>
</div>
<div class="panel-body">
<div class="Table">
<div class="Row">
<div class="Cell" align="right">
Date of Accident:
</div>
<div class="Cell" align="left">
{AI_DATEOF}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Type of Accident:
</div>
<div class="Cell" align="left">
{AI_ACCIDENT}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Accident Location:
</div>
<div class="Cell" align="left">
{AI_LOCATION}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Accident Details:
</div>
<div class="Cell" align="left">
{AI_DETAILS}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
List Of Other Family Members
<br/> That Were Involved:
</div>
<div class="Row" style="width:100%;display:table;">
<!--Details 1 -->
<div class="Cell" align="left" style="width:50%; display: table-cell;">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
<!--Details 1 -->
<div class="Cell" align="left">
<br/>
<div class="Row">
<div class="Cell" align="right">
Name:
</div>
<div class="Cell" align="left">
{AID_NAME}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
ID#
</div>
<div class="Cell" align="left">
{AID_ID}
</div>
</div>
<div class="Row">
<div class="Cell" align="right">
Relation:
</div>
<div class="Cell" align="left">
{AID_RELATION}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Instead of making your own CSS, if you're using Bootstrap, why don't you change the class of cell to col-sm-2 or so on?
How can I do in bootstrap such a grid:
<table border=1>
<tr>
<td style="height: 30px">aaaa</td><td rowspan="2">bbbb</td>
</tr>
<tr>
<td style="font-size: 9px">cccccccc</td>
</tr>
</table>
https://jsfiddle.net/68anykfe/1/
Is this possible?
I tried:
<div class="container">
<div class="row">
<div class="col-lg-9">
<div class="row">
<div class="col-lg-12" style="height: 60px">aaaaa</div>
</div>
<div class="row">
<div class="col-lg-12">ccccc</div>
</div>
</div>
<div class="col-lg-3">
bbbbb
</div>
</div>
</div>
In this example i would like "bbbbbb" have aligned to bottom.
I think this is what you are asking for? https://jsfiddle.net/eye4ytq2/8/
<div class="col-xs-2 border">
<div class="row">
<div class="col-xs-6">
<div class="row">
<div class="col-xs-12 border" style="height: 60px">aaaaa</div>
<div class="col-xs-12 border">ccccc</div>
</div>
</div>
<div class="col-xs-6 border" style="height: 81px">
bbbbb
</div>
</div>
</div>