Keep div at the left of the container at all time

Question

I'm trying to build a calendar for practice, but I ran into a problem that I can't solve.

If you run the example, You will see the words: Group Title and Test.

When you use the scroll you will notice that Group Title and Test disappears (Of course).

Is there a way to let those stay at the left all the time.

Fiddle Link because I cant post the demo in a snippet because it's over the 30000 character limit.

<li class="Groups_7b64f687">
    <div class="Group_7b64f687">
        <div class="Name_7b64f687" style="">Group Title</div>
        <div class="Tasks_7b64f687">
            <div class="Task_7b64f687">
                <div class="TaskName_7b64f687">Test</div>
            </div>
        </div>
    </div>
</li>

score 0 · Answer 1 · answered Jun 08 '18 at 09:15

0

As I see you already tried some similar things…

You could use style="position:fixed; left:0;" on your Group_7b64f687 element:

<div class="Group_7b64f687" style="position:fixed; left:0;">

https://jsfiddle.net/t7huqa49/

answered Jun 08 '18 at 09:15

Takit Isy

9,688
3
23
47

@CarstenLøvboAndersen = Peter Hansen ? – Takit Isy Jun 08 '18 at 09:22

score 0 · Answer 2 · answered Jun 08 '18 at 09:17

I can see you've used, but commented-out position:fixed.

This is part of a solution, although it doesn't work in your Fiddle for some reason that I don't have time to debug.

However, you are making a 'grid' of data with headed rows and columns. You really should be using a table with a fixed row header.

Keep div at the left of the container at all time

2 Answers2