This is a bit of a continuation from this question here: dataTables - Can't get horizontal scroll & fixed column to do their job. Seems to render differently everywhere. What am I doing wrong?
I got the dataTable displaying the way I want it to, for the most part. But this is what it looks like.
I had a picture of the previous look, but I somehow managed to edit it out while posting my answer below. I didn't think you could do that.
You can still see how it looked before by going to the jsfiddle link below.
I need to know if there's a way to not only close up that gap, that the scrollbar is clearly causing, but also if there is a way to move the scrollbar to the outside of the table.
padding-right: 140px; did move it over, but also covered up the Action column. I then tried to apply a z-index to the action Column, but when I moved it over, it covers up the horizontal scroll at the bottom. I can't change the height obviously because then it won't line up with the rest of the table. Any thoughts?
It took a bit of doing and a number of failures before I figured it out. Ultimately, I ended up adding a padding to the container producing the scrollbar, added a z-index to the actions div, which was already {position: absolute;}. Then, I added some jquery that adjusted heights and widths over several things and had to tweak the styles, accordingly.
The big part of it, after the padding and z-index and positioning, was that the table that wasn't static would scroll behind the now hovering Actions Columns. So I used jquery to insert a clone of the Actions column before it (or whatever is the last column, which may or may not be Actions on other pages, for example) so it would act as a place holder and push everything to the left and the Static Actions column would now overlap the clone and everything you want to remain visible stays to the left of it. If you do this in this way, it's important that the jquery that creates the clone column, happens before the dataTable.js and/or FixedColumns.js, because it needs the table HTML to be in place so it can do it's thing properly.
Now it looks like this:
Lots of tweaking later
I used the following to remove the scrollbar gap from a fixed column datatable.
table#mainDataTable{
margin-left: 300px !important;
}
div.DTFC_ScrollWrapper div.dataTables_scroll div.dataTables_scrollBody{
padding-left: 300px;
left: -300px;
}
div.DTFC_ScrollWrapper div.DTFC_LeftWrapper div.DTFC_LeftBodyWrapper{
z-index: 1;
}
This assumes you set iLeftWidth to 300px in the FixedColumn initialization. The selectors also assume bJQueryUI: false on datatable initialization.
Related
I have a table-like structure made out of different divs (and not the html tag). (kind of like an excel view).
I want to implement the fixation of the top row (header) and the first column (has some actions).
All my actions are in one view. Every row with data is a separate view and the header is a separate view.
I have presently applied position: sticky/-webkit-sticky and top: 0/left:0 as required.
This has been able to fix my problem in most browsers. However, Safari is behaving very abnormally.
My left column gets to stay fixed, but the top column on scrolling goes out of the viewPort.
Can anybody suggest some other fix or a Safari related fix?
Please find images attached below:
Sticky can be finicky. If you showed us relevant html/css it would be easier to offer solutions.
Is there a reason you can't use position: fixed; instead of sticky? unless the sticky elements are only sometimes sticky, then fixed should work.
Or maybe set the body 100% width and height, overflow: none; and then set the area you want scrollable to 100% height with overflow-y: scroll or 'auto'.
Edit: Based on your comments below.
I think I have a better idea about what you are trying to do. You want the left column to scroll up/down with the rows, but not left/right. position: sticky; may be the only way to achieve that other than javascript.
I think you should take the top row out of the equation though. Put the whole thing in one container, then setup nested containers within that. There are lots of different ways to structure it. Because position: sticky; gets positioned relative to the nearest scrollable ancestor.
I made a jsfiddle to show one possible method. https://jsfiddle.net/c9kaz854/4/ I can't test it in safari right now, but maybe you can test it, and maybe it can give you some different ideas.
I would suggest you make the same sort of structure you are going for in a simplified format. Start with a clean html file and basic css reset file. Build the basic structure and tweak it until you have something that works consistently across the browsers you need to support. Then use that basic pattern in your full site.
Because position: sticky; has inconsistent implementations in some browsers, a possible workaround for your situation could be to put the element in an <iframe>, <object> or <embed>. Then you could used position: fixed; in a more limited context.
To make that work though, you would put the top row above and outside the iframe, and all the scrollable content inside the iframe (left column and all but top row). Just have left column (inside iframe) be 'fixed.' Put the iframe in a div with overflow-y: scroll; (or auto), and make the iframe itself taller than its container div, so for vertical the scrolling happens outside the iframe, and the whole iframe element scrolls within the containing div, including the left column which is fixed inside the iframe. Then put a class on the iframe source's html/body elements and limit their width with width: 100%; (size of the container) and give them overflow-x: scroll; (or auto), so the the horizontal scrolling happens within the iframe where the left column is fixed and won't move.
I have some divs, and I want them to start filling the main div vertically, and then cause the main div to scroll horizontally.
Currently, I'm using float:left on child divs, but it does exactly the opposite: it starts filling the main div horizontally, and then the main div scrolls vertically.
The number of rows may differ based on screen size, so I can't create a table for this purpose.
table + some javascript hacks may allow me to do this, but I prefer a CSS (without any javascript) way. Because this code will run on mobile apps, and javascript will slow down the web app.
This is my current code, and here's the result of my current code. But I want something like this.
UPDATE: As #goliney suggested, seems that it can be done with css-columns. I created this example right now.
Now, there are these two problems:
While it's working good, it still needs some javascript to determinate number of visible columns (column-count) in the page. Although it's a minor javascript process, is there any way to do it in CSS, too?
Also, I prefer to show a little bit of fifth column, so user can know that this list is scrollable horizontally. But columns-count can't accept some float value (like 4.2), it only accepts integer values. So how can I do it?
As #goliney suggested, css3 columns can help.
I've created an example of using css3 columns in this issue, here.
However, it needs javascript to figure out count of columns, or since I'm targeting tablets, I can create some predefined classes using media queries.
Second, I needed some way to show a little bit of next column, so user can know that this list can be scrolled horizontally.
I've found that if I set a margin-left and then take it back into it's right place using translateX, it'll happen correctly.
So this is the final code for container div:
.main {
column-count: 4;
column-gap: 40px;
height:480px;
margin-left:80px;
transform: translateX(-80px);
}
(I removed prefixed properties here, but they're available in jsFiddle)
And this is the final result in jsFiddle.
I've seen examples here and there of a trick to use
position:absolute
on the first column of a table, and then make the rest of the table scrollable horizontally.
This works, as seen here: http://jsfiddle.net/YMvk9/4289/
However, as soon as I added the vertical scrollbar you can see that it does not scroll the frozen pane, instead, the frozen pane now sticks down from the rest of the table in a ugly sort of way.
I need the frozen column on the left to scroll vertically. Can anyone fix the jsfiddle code?
Assuming that what you want is for the user to be able to scroll the table vertically or horizontally there are several ways to achieve this. The most straightforward would be to put your headcol cells in a table all there own then position the two tables so they are right up against each other and wrap them both in a div with overflow:scroll. I did come up with a patch-work fix for your current layout though.
Here is the FIDDLE
You had several problems:
Your overflow property was only applying to the second column of the table.
Your containing div was not containing anything because it had no positioning rules so I gave it some absolute positioning and assigned the overflow:scroll: property to that.
Once you position the container absolutely it screws up the long class so I assigned that to float:right; and gave it a margin-left to account for the headcol cells.
Finally, since you are floating an element, you have to use a "clear fix" to make sure it doesn't wrap so I added a new class and a new cell to each row to fix the layout.
Hope that helps!
UPDATE: After posting I noticed one issue in that adding margin-left to your long class screwed up the way the table looked to I removed that rule and added padding-left to the div to fix the issue. There may still be a couple minor margin & padding tweaks you need to do to make the table look just right; but it works! I updated the fiddle too.
I have a large table inside a scrollable div. The table contains a person's name, followed by his details. I need the first column of the table to stay fixed while scrolling horizontally, so that the person's name stays visible while look at his details. Similar to this: HTML table with horizontal scrolling (first column fixed)
However, my table is also very large in the y direction, so when I scroll down, the person's name should also scroll up with his details. This almost solves my problem, but not the vertical scrolling.
Please help!
I was trying to solve fixed column issue where a table is inside other DIV control. While solving that, I faced the same issue and found solution via setting up container at ScrollTop property on event of "onscroll". I applied below style to the container:
.floatingStyle
{
position:relative;
background-color:#829DC0;
top:0px;
}
You can look complete solution here: http://rajputyh.blogspot.in/2011/12/floatingfixed-table-header-in-html-page.html
There are few browser related issues which are also handled there.
For vertical scrolling the problem is keeping the headers and footer fixed. The best way to do this is to actually have three tables - one for headers, one for the data (in a scrollable DIV) and one for the footer. If the table column widths are fixed then that's all you need to do. If they aren't then you'll need to use JavaScript to adjust them. But there is a trick here - a table with AUTO column widths can't be guaranteed to use widths that you specify in JS, especially if a column is empty, or a header text item is quite long.
I've handled this by setting the headers width based on the data, finding if the browser resized and then changing the data widths. Once they are close I then set the table to FIXED mode for the final adjustment.
Have a look here:
http://hifi.goneill.co.nz/cd.php
Click on Jazz, Classical buttons etc to see the tables. Also read the technical notes page as it describes the coding and try out the Ajax version too.
For your fixed column you could do something similar: have two tables and use the offsetTop of one to set the scrollTop of the other. See how my table sets the top line when you sort on a column with empty rows, or saves and restores the current row in the Ajax version when swapping between tabs.
I use example 3 given in this page:
http://simple-navigation-demo.andischacke.com/
and I have a problem because when I open the main page (for example)
http://simple-navigation-demo.andischacke.com/
I get an empty div on the left instead of the content div filling the whole area.
On the other hand when I open a page from the menu (for example)
http://simple-navigation-demo.andischacke.com/books
Everything is just fine.
Can someone propose a solution? How can I completely remove the div in CSS if it does not contain anything?
There are lots of solutions; it depends on where you want your logic to be. A pure CSS solution might be tricky; it might be easier to do this sort of thing in JS.
That said, try changing #sub_navigation's width property to be a max-width instead. This way, it can still be set to float:left, but when there's no ul element inside it, it can collapse.
You might need to modify the width of your content div after that, but hopefully this gets you on the right track.