Positioning scrollbar and rounded edges

tomzn · April 2016

Hi all. I am using datatables with server side scripting and bootstrap. I need to have scrolling enabled but with the scrollbar positionined "within" the table. i.e. underneath the last table column. At the moment all I'm able to get is the scrollbar working outside the table as is displayed in this link

http://live.datatables.net/fopilode/1/edit

Is this possible ?

I'm trying to acieve something like this :

http://issues.wenzhixin.net.cn/bootstrap-table/#options/basic-columns.html

Another issue I'm trying to resolve is getting the rounded edges on the table using the bootstrap css. Any bootstrap aficionados have some ideas regarding this ?

Thanks in advance people.

allan · April 2016

Hi,

At the moment the scrollbar is intentionally outside of the table. This isn't from a desire to have the scrollbar outside, but rather from the need to have all columns line up correctly (i.e. the width of the cell in the body is the same as in the header).

There is currently no option to have it inside the table I'm afraid.

Another issue I'm trying to resolve is getting the rounded edges on the table using the bootstrap css.

You should just be able to use border-top-left-radius (etc) like in the example you linked to. It uses:

 .fixed-table-container thead th:first-child {
    border-left: none;
    border-top-left-radius: 4px;
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px; 
}

For DataTables' DOM structure you might use:

div.dataTables_scrollHead table {
  border-top-left-radius: 4px;
}

div.dataTables_scrollHead th:first-child {
  border-top-left-radius: 4px;
}

Both are needed as Bootstrap applies a style to the table for the border as well as the cell: http://live.datatables.net/fopilode/11/edit

Allan

tomzn · April 2016

Thanks Allan. Is there perhaps any way to get the scrollbar inside the table ? A css/javascript hack perhaps ? Appreciate the response.

allan · April 2016

Not as far as I am aware. Since it takes up space the column width calculations would need to take it into account for the final column.

You could perhaps add styling to make it look like it has its own little column rather than just floating out on its own.

Allan

allan · April 2016

Was thinking about this some more - there is no reason why you couldn't style the final column in the table to not have a border on the right most side. Instead put the border on the container which would give the visual effect you are looking for.

Might be a little tricker with rounded corners, but should still be possible.

Allan

tomzn · April 2016

Greetings Allan. Thanks for the help. I have attempted to get the rounded corners working here :

http://live.datatables.net/fopilode/15/edit

I can get both the header and footer with rounded corners however if I have a table without a footer I can't seem to get the border on the bottom working with round corners.

Regarding the seperate column for the scrollbar or the other option of styling the final column to not have a border and put as border on the container. Where would I begin regarding this ? Also wouldn't putting the border around the container place a border around everything including the search box ?

Thanks again

allan · April 2016

Where would I begin regarding this ?

Right click and use "Inspect element". Have a look at what styles are applied to the cell. You probably need to target the :last-child in the header and then add a border to the table wrapper.

I'm afraid I don't have much spare time this week so its not something I can set a demo up of just now. Sorry.

Allan

tomzn · April 2016

No worries. Thanks for the advice. Will give it a try and let you know how far I get.

tomzn · April 2016

Here's my effort at this. Thanks for the suggestions Allan.
http://live.datatables.net/fopilode/17/edit

I'm using the bootstrap bordered table so a better way would be to use a completely borderless table and just set the td's to have borders ? Dunno if this would work. Two litte hiccups - is it possible to give the scrollbar a border on the top so it lines up nicely with the bottom border of the header.

Secondly, firefox and ie pose a few problems with the vertical scrolling in that they automatically enabled horizontal scrolling. When this was turned off certain columns don't line up properly with the headers. I've tried your suggestion of

top:;able.dataTable tbody th, table.dataTable tbody td { white-space: nowrap; }

but it doesn't seem to completely solve the problem. Especially when there are many truncated td's in which im using the ellipsis plugin.

Any sage words Mr Allan ?

allan · April 2016

That's looking really good - nice one and thanks for posting it for others to see.

I don't actually see the issue in Firefox and I'm afraid I don't have a Windows machine to test IE with me at the moment.

If they have horizontal scrolling when they shouldn't it suggests that there is a slight overflow somewhere - does it scroll by one or two pixels? That would be the border of the table overflowing the container. It might be that you need to rejig where the border's are applied so that doesn't happen.

Allan

tomzn · April 2016

It does scroll by one or two pixels. I'm currently using bootstraps "table-bordered" class to get the borders so will try and customise that. Is there an easier way ?

tomzn · April 2016

Ok. Managed to solve this. Just had to remove the left and right borders of the table like so :

.table {
border-left:0px !important;
border-right:0px !important;
}

I'm guessing what happens is that the extra borders from either side where " pushing" the column borders either 1px left or right (since the table is broken up into "smaller" tables for vertical scrolling).

Seems to be working now in IE, Firefox and chrome.

Updated here : http://live.datatables.net/fopilode/17/edit.

Only one more little nice to have fix. Getting the scrollbar in its own column so that I can get a border on the top part of it. Is there perhaps another way to do this ?

allan · April 2016

That looks really neat - nice one!

Getting the scrollbar in its own column so that I can get a border on the top part of it.

Can you just put a right border on the last cell in the table header?

Allan

tomzn · April 2016

Apologies. I was not very descriptive. What I was trying to describe was the little portion above the scrollbar doesn't have a border so it looks a little odd if one looks closely. I added a screenshot of the part I'm trying to get the border on.

https://www.dropbox.com/s/7rdfgggivfxua0f/headerless_scrollbar.png?dl=0

allan · April 2016

Ah I see. You'd need to put a border on the div.dataTables_scrollBody element to do that. You'd likely need to remove the border from the table body to make that align correctly.

Allan

tomzn · April 2016

Aah. Splendid ! Finally. Had to remove the border for the headers as well

.table th {
border-bottom:0px !important;; 
}

Here's the completed solution. Css is not the most elegant so any tips to refactor will be appreciated. Thanks so much Allan !

http://live.datatables.net/fopilode/22/edit

tomzn · April 2016

Sorry wrong link . For some reason my jsbin was not updating. This is the correct one :

http://live.datatables.net/huqimugo/1/edit

allan · April 2016

That looks really awesome! Nice one.

I'll need to look into how this can be integrated into the core.

Allan

Positioning scrollbar and rounded edges

Positioning scrollbar and rounded edges

Answers

Howdy, Stranger!

Categories

DataTables

Positioning scrollbar and rounded edges

Positioning scrollbar and rounded edges

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables