Trying to get a column to freeze on my table. The answer by skube for this question is the closest to what I need. However, I need to go one div deeper. This causes the absolutely positioned column to not show though it is positioned correctly.
Here is the example that is not showing colA (Header A, Header B and Header C): http://jsbin.com/uxecel/667/
Any help would be greatly appreciated.
It's not visible because you have left:-100px on .colA
Remove that style, and it works as (I think) you expect.
update: sorry:
Set left:0px on .colA. Also, you won't need left:-100px on the table for ie7.
Related
I'm not sure if there is another post similar to this one but I'm hoping this can be a simple fix for someone better as css than me.
See the example here: https://svelte.dev/repl/e7d663de324043f98613b8fe35b8d78f?version=3.47.0
I build the example in Svelte repl but the issue is with the html and css.
The problem is that the dropdown part of the SimpleSelector is hidden behind the other rows below it.
I've tried to set the z-order but that doesn't seem to work. I tried playing with the display attribute and position but I can't seem to get this to work the way I want.
Try clicking on the textbox on any row. You'll see part of the dropdown but the rest is hidden.
Thanks in advance for any help.
I figured it out.
It seems that the z-index had to be set separately for each row.
For example, if there are 100 rows, the first row should have z-index: 100, the second row, z-index: 99, the third, z-index: 98 and so on.
That seemed to have done the trick.
Here is a link to the updated REPL: https://svelte.dev/repl/e84a80ef53a64af6975705407ddff040?version=3.48.0
However, in the end, I redesigned how the interface will work and I will not be editing inline in the table anymore so I won't be using this solution.
I'm using FullCalendar with the resource library that you can see in my JSFIDDLE
How you can see the problem of the resource (first column, second column) is the overlapping. Seems infact if the resource have a long name go to overlap the near column and this is bad for me. What I want is cut the resource name if exceeds a certan lenght, anyway, the label must not overlap the next cell.
Issue image:
Final result
Something like: First col | Second col
You seem to want to hide the overflow.
Your calendar's table header elements are overflowing into each other.
CSS:
#calendar tr th div.col-label{
overflow-x: hidden;
}
This will make the overflowing text not draw instead of drawing on the next cells.
EDIT: Fixed this making the events disappear
EDIT 2: Fixed messing up the Date Label
Another way to solve your problem is by setting a min-width property on your columns in order to ensure that each one will have enough space available to store it's data. And then use width:100%; property on your labels. Maybe use some padding as well in order to make it look nice. Let me know if this helped :)
Please go through fiddle. Here I am presenting the information TV seasons in the form of lists. I am managing these lists to appear next-each-other through setting FLOAT left/right. Some-how few of the lists are not appearing properly.
Any assistance is appreciated.
You can check fiddle
You cannot acheive that look-n-feel with current structure of HTML and css. You will need to
Create columns - for now I have created 3 columns - you may create as many columns as you want. Further these number of columns can be made specific to RESPONSIVE WEB BREAKPOINTS if you want to make this page responsive.
Associate season lists to each column
Apply float:left to each column
Get rid of lef and right div classes
Rather apply this float to columns as mentioned in # 3
Please visit the demo # https://jsfiddle.net/zm11awhq/5/embedded/result/
If you dont want to use columns then you will need to give min-height to each season's div. This min-height will remain standard for all the sasons so floating will take place very properly. But this will keep lot of white space on the page.
I figured it out by myself i just added clear: left; on left class and clear: right; on right class it fix`s the season which isnt displayed correctly and rest will shows as it is.
Thank you for everyone of your help.
I have a page with:
1 - header.
2 - table.
3 - footer.
The table has a first row which is like a title for each column. After that, all the data gets ordered by row and column.
I need to scroll all the rows except the first one in the top. I try and try and I got a headache.
This is the start position: Demo
And this is One of my attempts: Demo1
I can think a few solutions..
One would be using two tables, pulling the headers out and placing the lower part of the table in a div that you can scroll.
Second could be using waypoints (http://imakewebthings.com/jquery-waypoints/)to lock the table header in and target it with tr:first-child
A third could be using an image as the header and scrolling the content in it's own div tag.
(using position:fixed will keep something locked on a page in position)
Hope these help :)
I need to create three divs, next to each other (attribute float:left).
Then I read the data from database and I need to present this data in three divs, in such a way that I first fill up the first div, line by line and when I reach certain height, I go to the next div and fill it with data, and so on.
This is something like reverse table, that is I first fill the first column in first row then go to second and so on until the end of the row, then I move to the second column of first row
and so on. I hope you get the picture.
Is there a way to achieve this in CSS or in some other way?
This functionality is available in CSS3 using column-count and column-span.
I do not know how to make it efficient, but it should be possible with javascript... you know the line-height, you check the height of first div with all content, then you truncate it to desired size and the rest put to the next div.. repeat.. but this looks odd.. ?
You might be able to do this by requesting the first 30 results in the database in one column, then request the next 30 in the next div, and so on. I can't see it being possible in CSS 2.1 alone.