Bootstrap table plugin not working in 'rtl' table - javascript

I'm working with Arabic bootstrap for rtl support . I have a table and Bootstrap table plugin.
HTML :
<table class="bootstrap-table" id="listComments">
<tr>
<th data-fixed="right">
<input type="checkbox" id="checkAll" />
</th>
<th class="text-right">Title</th>
<th style="width: 200px">Category</th>
<th style="width: 140px">Created date</th>
<th style="width: 100px">Status</th>
<th data-fixed="left">Actions</th>
</tr>
<tr>
<td>
<input type="checkbox" name="id[]" class="itemCheckBox" value="6" />
<input type="hidden" name="token[6]" value="b8c5b7b3584268c8a85f1a14c34699dd" />
</td>
<td>2323</td>
<td>Project</td>
<td>09-19-2014</td>
<td> Published
</td>
<td> <a class="btn btn-info btn-xs" href="" title="Edit post"><i class="icon-edit"></i></a>
<a class="btn btn-danger btn-xs confirmationDelete" href="" title="Delete post"><i class="icon-trash"></i></a>
</td>
</tr>
</table>
Now, I designed my table with bootstrap table plugin. Plugin works using: data-fixed="right" or data-fixed="left". With data left and normal this works fine. But in Arabic Bootstrap and data right , this plugin is not working and shows horizontal scroll and displaced border.
how can I fix this for rtl table?
DEMO RTL NOT WORK : JSFIIDDLE
DEMO NORMAL LTR WORK : JSFIDDLE
Screenshot in FF last version: (SEE scroll and right border Displaced for status and create date..)

Well, your problem isn't really complex, I think that using classes for your td elements would have help you a lot, and I strongly encourage you to use them for this and any other project.
Now, for your solution, simply add this couple lines in your CSS style sheet:
.table-scroll .table-body td:first-child {
border-right:none
}
.table > tbody > tr > td {
width: auto;
max-width: 100%;
}
Of course, it will be a lot better if you use something like .table.tableRtl td{....} so you can target elements properly and more accurately while letting you use the .table class in other instance(s), but as long as your code goes, this CSS will work.
EDIT
there's an issue with one of the columns not having border. This happens because you have this line in bootstrap-table.css
.table-scroll .table-body td:last-child {
border-right: medium none;
}
so basically it overrides all borders it has declared previously telling "in the last column, we should have no borders". But in rtl direction, the last column is in fact VISUALLY the first, so we fix it like this:
.table-scroll .table-body td:last-child, .table-scroll .table-header th:last-child {
border-right: 1px solid #CCC;
}
And now it all works as expected, with columns keeping the width as well, and borders behaving as expected
Check CSS fiddle

As mentioned by webeno, the problem seems to be that bootstrap-table.css applies these rules:
.table-scroll .table-header th:last-child{
border-right:none;
}
.table-scroll .table-body td:last-child{
border-right:none;
}
This is in order to get rid of doubled borders on the rightmost edge of the table; in RTL, the :last-child is actually on the left though, which is why status has no right border. I overrode those styles with rules like this:
.table-scroll .table-header th:last-child {
border-right:1px solid #CCC;
}
.table-scroll .table-body td:last-child {
border-right:1px solid #CCC;
}
.table-scroll .table-header th:first-child {
border-right:none;
}
.table-scroll .table-body td:first-child {
border-right:none;
}
I also got rid of the data-fixed="right" attributes. Here's a fixed fiddle: http://jsfiddle.net/xsoo79c5/5/ .

Related

Is it possible to extend the borders of table data <td> to align with content that has been moved via negative margins?

I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.
Code Snippet:
<tbody>
<tr>
<td rowSpan="3" id="date">
Date
</td>
<td colSpan="4">
<label className="accounting-label" htmlFor="accounting">
Accounting
</label>
<input
type="checkbox"
name="accounting"
id="accounting"
data-toggle="toggle"
onClick={showNestedData}
></input>
</td>
</tr>
<tr className="accounting-data hide">
<td className="australia-data">
<div className="flex-au-wrapper">
<div className="au-checkbox-wrapper">
<input
type="checkbox"
id="au-checkbox"
name="subscribe"
value="newsletter"
></input>
</div>
<div>Australia</div>
</div>
</td>
<td>$3,544.00</td>
<td>$5,834.00</td>
<td>$10,583.00</td>
</tr>
</tbody>
To extend table border you can give some padding,you can also you can select the one you want with :nth child
in codesandbox the bottom border already covered the checkbox and title 'Accounting'. So, if you also want to cover the Date then please add the following CSS code to yours
.accounting-data,
tr {
position : relative;
/* border-bottom: 1px solid #ccc; */
}
th, td{
border: 0;
}
tr::before {
content : "";
display: block;
position: absolute;
width: calc(100vh + 150px);
top: 0;
background: #555;
border-bottom: 1px solid #ccc;
left: 0;
}
May it helps :)

Show last table column on line hovering

In a centered table is the last column hidden.
On hovering over a specific line I want the table to show the last column of this single line.
This should be offering the ability to edit and delete (AJAX) the content/object of the line.
Here's a example:
https://jsfiddle.net/5x2wv160/1/
The problem is the changed size of the table so it is moving a little bit to the left.
My idea fixing this is to change the last column to
tr > td:last-child {
position: relative;
}
But what base element do I have to set the display-style too?
Does anyone have any better ideas?
Check this way of showing the last column on hover to <tr>
.action {
display: none;
}
tr:hover .action{
display: block;
}
<table>
<thead>
<tr>
<th>One</th>
<th>Two</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>Content1</td>
<td>Content2</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content3</td>
<td>Content4</td>
<td class="action">Edit</td>
</tr>
<tr>
<td>Content5</td>
<td>Content6</td>
<td class="action">Edit</td>
</tr>
</tbody>
</table>
You can use visibility instead of dispay:none like this:
table {
margin: 0 auto;
}
tr > td:last-child {
visibility: hidden;
}
tr:hover > td:last-child {
visibility: visible;
}
You are on the right way. But how about only showing contents thus the hyperlink on hover. tr td a { display:none; } VS tr:hover td a{ display:block} so the content would not be moving left and right. Also setting standard widths for each table column would prevent that the columns are moving

Is there a way to center my tables/images in this codepen?

So I've recently started learning how to code. I decided to make a website with all of the smash character damage values. My main setback so far is I have been unable to find a way to center all my differently sized tables and my images.
SO far I have tried to put all my tables into divs and centering them with auto margins on left and right. Additionally I have tried to flexbox my tables and center them that way but nothing seems to work. It seems to me that the only option I have left is to manually center them all but that seems like it would take forever and I am confident there is a different solution.
Here are how my tables are currently configured
#damagetablemario {
display:none;
position:absolute;
top:700px;
left:80px;
border-collapse:collapse;
}
#damagetablemario2 {
display:none;
position:relative;
top:400px;
left:110px;
border-collapse:collapse;
}
#damagetablemario3 {
display:none;
position:relative;
top:450px;
left:540px;
border-collapse:collapse;
margin-bottom:200px;
}
Here are how my tables are written in html
<table id = "damagetablemario">
<tr>
<th>Neutral</th>
<th>Forward Tilt</th>
<th>Up Tilt</th>
<th>Down-Tilt</th>
<th>Forward-Smash</th>
<th>Up-Smash</th>
<th>Down-Smash</th>
<th>Neutral-Air</th>
<th>Forward-Air</th>
<th>Back-Air</th>
<th>Up-Air</th>
<th>Down-Air</th>
</tr>
<tr>
<td class = "Neutral">2.2% (punch)<br>1.7% (punch)<br> 4% (kick)</td>
<td class = "Forward-Tilt">7%</td>
<td class = "Up-Tilt">5.5%</td>
<td class = "Down-Tilt">5% (foot) <br> 7% (body)</td>
<td class = "Forward-Smash">17.8% (fire)<br> 14.7% (arm)</td>
<td class = "Up-Smash">14%</td>
<td class = "Down-Smash">10% (front)<br> 12% (back)</td>
<td class = "Neutral-Air">8% (clean)<br> 5% (late)</td>
<td class = "Forward-Air">12% (early)<br> 14% (clean)<br> 10%(late)</td>
<td class = "Back-Air">10.5% (clean)<br> 7% (late)</td>
<td class = "Up-Air">7%</td>
<td class = "Down-Air">1.4% (1-5 hits) <br>
5.5% (hit 6) <br>
2% (landing)
</td>
</tr>
</table>
<table id = "damagetablemario2">
<tr>
<th>Grab</th>
<th>Pummel</th>
<th>Forward Throw</th>
<th>Back Throw</th>
<th>Up Throw</th>
<th>Down Throw</th>
<th>Neutral Special</th>
<th>Side Special</th>
<th>Up Special</th>
<th>Down Special</th>
<th>Final Smash</th>
</tr>
<tr>
<td>0%</td>
<td>1.3%</td>
<td>8%</td>
<td>11% (throw)<br>8% (collateral)</td>
<td>7%</td>
<td>5%</td>
<td>5% (early)<br>4% (late)</td>
<td>7% 1.5x <br> projectile reflect</td>
<td>5% (hit 1)<br> 0.6% (hits 2-6)<br>3% (hit 7)</td>
<td>0%</td>
<td>2% (early)<br>2.5% (clean)<br>3% (late)</td>
</tr>
</table>
<table id = "damagetablemario3">
<tr>
<th>Floor Attack Front</th>
<th>Floor Attack Back</th>
<th>Floor Attack Trip</th>
<th>Edge Attack</th>
</tr>
<tr>
<td >7%</td>
<td >7%</td>
<td >5%</td>
<td >9%</td>
</tr>
</table>
My end goal is to have my tables centered in the middle of my screen regardless of how much text is in them.
https://codepen.io/JariCarlson/pen/pBYOjb
I see most of the styling in your css are done using an ID (#). Due to this the same set of styles are repeated multiple times which makes your CSS file larger. Better approach is to create one CLASS with all common styling and use the class name multiple times in your HTML. This way amending your styles/maintaining will be very simple. This is the exactly what you are facing now :)
So one way to do this is by using grid. By doing this there's is no need to have left margins for your tables. So
Remove all left: styling on all tables
Remove display: none; on all tables
If position: absolute; use width: 100%;
CSS:
table {
display: grid;
justify-items: center;
}
#damagetablemario {
/* display:none; */ /* remove */
position:absolute;
width: 100%; /*Add */
top:700px;
/* left:80px; */ /* remove */
border-collapse:collapse;
}
#damagetablemario2 {
/* display:none; */ /* remove */
position:relative;
top:400px;
/* left:110px; */ /* remove */
border-collapse:collapse;
}
#damagetablemario3 {
/* display:none; */ /* remove */
position:relative;
top:450px;
/* left:540px; */ /* remove */
border-collapse:collapse;
margin-bottom:200px;
}
Replace your left property to 0 and add this CSS property to your table
table {
display: flex;
justify-content: center;
}
you can also try transform: translateX(-50%);
Don't use display: block; for your tables. Use display: table; remove left and set margin: auto;

Removing whitespace in collapse row

Bootply: http://www.bootply.com/N8lH48VBN7
I have rows where I want each row to expand to show additional rows but I'm having trouble getting rid of the whitespace even when the hidden row is not expanded. I think there might be a way to write a function in JS, but is there a faster and easier way to do this?
Also, when the collapsed rows are expanded, there is some whitespace, and I tried to change some properties of the div to no avail.
Bootstrap has a css style itself.
(so, if you want to apply your css style, you have to use '!important' keyword in your css.)
and, your code structure is not good as well.
therefore, it made a little space inside of each table row.
I think you want to do like this. :)
[RESULT] http://www.bootply.com/0QqWzFcwWo#
1. HTML Source
<div class="col-lg">
<div class="project" id="prodemo"></div>
<table class="table table-striped table-hover">
<thead align="center">
<tr>
<th width="1%"> </th>
<th width="24%">ID</th>
<th width="25%">Name</th>
<th width="25%">Phone</th>
<th width="25%">DOB</th>
</tr>
</thead>
<tbody>
<!-- [demo] -->
<tr class="prevent_drag" data-target="#demo" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo2] -->
<tr class="prevent_drag" data-target="#demo2" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo2" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
<!-- [demo3] -->
<tr class="prevent_drag" data-target="#demo3" data-toggle="collapse">
<td> </td>
<td>MyID</td>
<td>MyName</td>
<td>MyPhone</td>
<td>MyDOB</td>
</tr>
<tr id="demo3" class="collapse myOptions">
<td> </td>
<td>Details</td>
<td>Details2</td>
<td>Details3</td>
<td>Details4</td>
</tr>
</tbody>
</table>
</div>
2. CSS source
.myOptions {
padding: 0 !important;
margin: 0 !important;
color: red;
}
.table th {
cursor:default;
}
.prevent_drag {
cursor:pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
See this bootply
Just add this css and stay away from !important as other answers suggest.
.table>tbody>tr>td[colspan] {
padding: 0;
}
.table>tbody>tr>td[colspan] .table {
margin-bottom: 0;
}
Never use !important
Almost all answers here suggest to use !important. I think all of them need to read about CSS Specificity and stop using !important today.
...Or you could add this JS code:
$("td[colspan]").css("padding", "0");
$(".table").css("margin-bottom", "0");
Here is the Bootyply
Or can use pure CSS like this:
td[colspan]{
padding:0 !important;
}
.table{
margin-bottom:0 !important;
}
CSS Only Bootply
Use below code in css
tr td{padding: 0!important;}
Thanks With Regards
Remove padding-top and padding-bottom only from your collapsed rows. This padding is coming from bootstrap table style.
tr:not([data-toggle]) > td { padding-top: 0px; padding-bottom: 0px; }
Selecting the cells which are children of rows which do not carry an attribute called data-toggle.
There is margin in the nested table as well. You can remove that:
.table tr:not([data-toggle]) table,
.table tr:not([data-toggle]) td {
padding: 0; margin: 0px;
}
Use this CSS style
tr[data-toggle="collapse"] + tr td {
padding: 0 !important;
}

Produce horizontal scroll for table 'tbody'

I have a traditional table with thead, tbody,etc. This is necessary for tablesorter.js.
What I have:
<div id="tableWrapper">
<div id="tableContainer" class="tableContainer">
<table id="scrollTable">
<thead class="fixedHeader">
<tr class="tableHeader even">
<th class="header">
<span>Name</span>
</th>
<th class="header">
<span>Address</span>
</th>
</tr>
</thead>
<tbody class="scrollContent">
<tr class="tableRow">
<td class="td_0">
<span>
Doe, John
</span>
</td>
<td class="td_0">
<span>
Memory Lane
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
CSS:
#tableWrapper tbody{
color:#00467f;
font-weight:500;
position:absolute;
overflow-y: auto;
overflow-x: scroll;
height:300px;
width:300px;
}
#tableWrapper #tableContainer{
width: 1100px;
overflow: hidden;
}
#tableWrapper tbody>tr{
width: 1200px;
}
I am keeping the table header section vertically fixed, so tbody position is absolute to keep the table header outside the tbody vertical scroll event. I tried setting the width of the tbody>tr to something higher than the tbody but no luck.
The tbody>tr width automatically shrinks to the size of the tbody.
Problem: I can't get the tbody horizontal scrollbar to scroll without horizontally scrolling the entire table, (thus the vertical scrollbar would disappear into the overflow:hidden). I want to just scroll the tbody horizontally and then I have some jquery to bind that event to the header. So no issue there. Just trying to get the horizontal scrollbar to scroll for tbody only.
I am able to get the tbody overflow-y:auto to work, but not overflow-x:auto. Is there a way to make the tr wider to get the tbody to scroll left and right? If so, how?
Ah I figured it out.
I added float:left; and display:block to the tbody>tr.
CSS:
#tableWrapper tbody>tr{
display:block;
float:left;
width: 1200px; /*desired width*/
}

Categories