How can I position: fixed an element within a <$scrollable> container?

#1

I have two buttons in a <$scrollable> container that I want to be visible in the upper right corner at all times. They are “scroll left” and “scroll right” buttons and only work if the buttons are placed inside the container. The problem is that position: fixed only applies to the window, and ignores its position within the container using this method. I’m asking just in case TiddlyWiki already has a solution to this, or maybe there is another method that I am not aware of.

#2

Try this:

<div style="position:relative;">
   <div style="position:absolute;top:0;right:0;">
      <$button> {{$:/core/images/chevron-left}}
         <$action-sendmessage $message="tm-scroll" ... />
      </$button>
      <$button> {{$:/core/images/chevron-right}}
         <$action-sendmessage $message="tm-scroll" ... />
      </$button>
   </div>
   <div id="scrollable" style="overflow:auto;">
      content goes here
   </div>
</div>

-e

#3

I tried that. The tm-scroll message doesn’t work, but the buttons do stay where I want them.

#4

I see that in your OP, you said:

I have two buttons in a <$scrollable> container… only work if the buttons are placed inside the container.

I guess that my first suggestion didn’t work because the buttons are outside the container itself.

Here’s a version adjusted to put the buttons inside the scrolling container… hopefully this makes it work…

<div style="position:relative;">
   <div id="scrollable" style="white-space:nowrap; overflow:auto;">
      <div style="position:absolute;top:-1.5em;right:0;">
         <$button> {{$:/core/images/chevron-left}}
            <$action-sendmessage $message="tm-scroll" ... />
         </$button>
         <$button> {{$:/core/images/chevron-right}}
            <$action-sendmessage $message="tm-scroll" ... />
         </$button>
      </div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta vel diam et ullamcorper. Praesent tristique, arcu sit amet egestas venenatis, dui orci tincidunt lorem, in mattis nulla ante sit amet dui. Praesent auctor urna augue, sit amet pellentesque dui ultricies fermentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam vestibulum vitae elit varius lacinia. In eu orci lorem. Curabitur in metus gravida elit ornare rhoncus eu tristique est. Integer varius leo et molestie consequat.
   </div>
</div>
#5

This line

<div id="scrollable" style="white-space:nowrap; overflow:auto;">

needs to be a <$scrollable> and when I do that, it ignores that white-space part.

#6

Use the class attribute of the $scrollable widget to give it a class name and then apply CSS for that class via a stylesheet tiddler: https://tiddlywiki.com/#Using%20Stylesheets

#7

I got the demo to work properly. Then I slowly added my content the way I had it before and it’s all working beautifully now. Thanks, guys!

<style>
.test-wrapper {
	position: relative;
	border: 1px solid blue;
}
.test-scrollable {
	white-space: nowrap;
	overflow-x: scroll;
	overflow-y: hidden;
}
.test-controls {
	position: absolute;
	top: 3px;
	right: 3px;
}
</style>

<div class="test-wrapper">
  <$scrollable class="test-scrollable">
    <div class="test-controls">
      <$button> {{$:/core/images/chevron-left}}
        <$action-sendmessage $message="tm-scroll" $name="selector" $value="#left" animationDuration="1000"/>
      </$button>
      <$button> Return
        <$action-sendmessage $message="tm-scroll" $name="selector" $value="#test" animationDuration="1000"/>        
      </$button>
      <$button> {{$:/core/images/chevron-right}}
        <$action-sendmessage $message="tm-scroll" $name="selector" $value="#right" animationDuration="1000"/>
      </$button>			
    </div>
    <span id="left"/>
    <span id="right"/>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta vel diam et ullamcorper. Praesent tristique, arcu sit amet egestas venenatis, dui orci tincidunt lorem, in mattis nulla ante sit amet dui. Praesent auctor urna augue, sit amet pellentesque dui ultricies fermentum. Pellentesque habitant morbi tristique senectus et netus et <span id="test">test</span> malesuada fames ac turpis egestas. Aliquam vestibulum vitae elit varius lacinia. In eu orci lorem. Curabitur in metus gravida elit ornare rhoncus eu tristique est. Integer varius leo et molestie consequat.
  </$scrollable>
</div>