I am using coreUI and I have a view where i set up a datatable. I want to have the thead sticky on top but nothing I do seems to work.
The thead consists of two rows (tr). one row contains the names of the headers and the second row contains some the column filters. These come right out the box with UI.
Whatever I tried only applies to the 2nd row and not the 1st.
eg. I have tried adding the below css code but only the second line seems to be working.
thead tr:nth-child(1) th { position: sticky; top: 0; }
thead tr:nth-child(2) th { position: sticky; top: 43px; }
Any ideas why?
thead tr:nth-child(1) th { position: sticky !important; top: 0; }
thead tr:nth-child(2) th { position: sticky !important; top: 43px; }
Related
I need to change the padding of my dividers to 0, but can't access them even though they are list items
https://codepen.io/majesticpotatoe-the-bashful/pen/KKwXwBw
.v-breadcrumbs li {
padding: 0px;
}
This CSS above didn't do the trick
This CSS works:
.v-breadcrumbs__divider {
padding: 0 !important;
}
updated codepen
Is it possible to obtain the position: sticky effect on an HTML table build up using just divs and css?
Apparently if I try to add the position: sticky rule to the header, which already contains the display: table-header-group rule, the sticky effects is null.
HTML
<div class="container">
<div class="header-row">
<div class="header>Header</div>
[...]
</div>
<div class="body-row">
<div class="body>Content</div>
[...]
</div>
</div>
CSS
.container {
display: table;
}
.header-row {
display: table-header-group;
position: sticky;
top: 0;
}
.body-row {
display: table-row;
}
.body, .header {
display: table-cell;
}
Live fiddle: https://jsfiddle.net/Lc0rE/9fxobxb0/1/
This question may be a few years old, but I came across the same issue. Especially now that position: sticky is a widely adopted positioning element now.
I got round this by adding a float to the Table header & Table Rows.
.header-row {
display: table-header-group;
position: sticky;
top: 0;
float: left;
}
.body-row {
display: table-row;
float: left;
}
https://jsfiddle.net/58zes8rr/
There may be a cleaner option for this using Flexbox (Arguably not widely supported yet).
I first tried the answer above and added float to my css definition however this blew away all my dynamic column widths and required i specify fixed widths for all columns. Not an option.
As with everyone else, my first instinct was to put sticky on the Row itself but that did not work. It worked PERFECTLY when i added sticky to each cell in the header row.
Fiddle Example
(TLDR)
ON EACH CELL OF YOUR HEADER ROW:
.td.searchResultHeader {
position:sticky;
top:0;
}
I've reading about native CSS variables for declaring colors, but I wondering if there is a way to create a variable for top: left positions? I have a CSS template that overlays text boxes on an image, and the layout page get's changed periodically by the designer. I'd like to accomplish something like this:
:root {
--topOffset: 10px;
-- leftOffset: 20px;
}
.text_Date_Overlay {
position: absolute;
top: 516px + topOffset;
left:570px + leftOffset;
font-family:Verdana;
font-size:18px;
font-style:italic;
}
Is there a way, other thank going into JavaScript?
Thanks
You can combine them with calc() and do something like this.
:root {
--topOffset: 10px;
--leftOffset: 20px;
}
.text_Date_Overlay {
position: absolute;
top: calc(516px + var(--topOffset));
left: calc(570px + var(--leftOffset));
font-family:Verdana;
font-size:18px;
font-style:italic;
}
View Example Fiddle
I would like to customize my tooltip for my table and I used the following example :
https://datatables.net/beta/1.9/examples/advanced_init/events_post_init.html
I copied CSS and JS tooltip file but my tooltip look like a default one.
How can I customize my tooltip ? Do you have examples ?
Cheers
There is nothing fancy about it, really. It is just a <div> following the mouse showing some content. You can use one of the zillion tooltip / popover plugins out there, or you can do it by yourself. Here is an example showing the content of a hovered row in a "tooltip" :
#tooltip {
position: absolute;
z-index: 1001;
display: none;
border: 2px solid #ebebeb;
border-radius: 5px;
padding: 10px;
background-color: #fff;
}
event handlers
$('#example').on('mousemove', 'tr', function(e) {
var rowData = table.row(this).data().join(',')
$("#tooltip").text(rowData).animate({ left: e.pageX, top: e.pageY }, 1)
if (!$("#tooltip").is(':visible')) $("#tooltip").show()
})
$('#example').on('mouseleave', function(e) {
$("#tooltip").hide()
})
demo -> http://jsfiddle.net/0g2axdt5/
The use of animate() is to avoid flicker.
I'm using bootstrap3 modal and trying to create a table inside a modal.
I want the tbody to have vertical scroll. I've tried adding the height and overflow-y: auto to tbody, but it won't work.
I was able to have the entire modal scrollable, but I just want only the table body to be scrollable
Can anyone please help me?
I've finally found an answer for this.
I adapted the code from here: http://jsfiddle.net/T9Bhm/7/
The CSS Solution:
table {
width: 100%;
}
thead, tbody, tr, td, th { display: block; }
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
}
thead th {
height: 30px;
/*text-align: left;*/
}
tbody {
height: 120px;
overflow-y: auto;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
}