how to render preformatted text with overflow

[nskalis]

Hi All,

Would you be so kind to advise how can a piece of text be rendered with horizontal and vertical scrollbars?

In the example below, output_data.cli is a variable that is server-rendered, it honours the line breaks \n but no scrollbars appear and the text beyond the grid disappears.

<pre class="pre-scrollable">
	<code class="overflow-auto h-24">
{{ output_data.cli }}
  </code>
</pre>

The output is

inet.0: 944728 destinations, 2447934 routes (941946 active, 6 holddown, 18583 hidden)
1.1.1.0/24 (6 entries, 1 announced)
        State: <FlashAll>
        *BGP    Preference: 170/-251
                Next hop type: Router, Next hop index: 1001
                Address: 0x4ceafec
                Next-hop reference count: 277469
                Source: 4.68.71.249
                Next hop: 4.68.71.249 via ae24.0, selected
                Session Id: 0x8cf
                State: <Active Ext>
                Local AS:  6830 Peer AS:  3356
                Age: 1w4d 1:18:51 	Metric: 0 
                Validation State: valid 
                Task: BGP_3356.4.68.71.249+179
                Announcement bits (4): 0-KRT 7-RT 8-BGP_RT_Background 9-Resolve tree 14 
                AS path: 3356 13335 I 
                Aggregator: 13335 141.101.71.1
                Communities: 6830:17000 6830:17430 6830:33302 17152:0
                Accepted
                Localpref: 250
                Router ID: 4.69.187.239
         BGP    Preference: 170/-251
                Next hop type: Router, Next hop index: 957
                Address: 0x4cde904
                Next-hop reference count: 305016
                Source: 80.231.153.97
                Next hop: 80.231.153.97 via ae3.0, selected
                Session Id: 0x142
                State: <Ext>
                Inactive reason: Active preferred
                Local AS:  6830 Peer AS:  6453
                Age: 2w1d 21:44:32 
                Validation State: valid 
                Task: BGP_6453.80.231.153.97+179
                AS path: 6453 13335 I 
                Aggregator: 13335 141.101.67.1
                Communities: 6453:2000 6453:2200 6453:2203 6830:17000 6830:17457 6830:33302 17152:0
                Accepted
                Localpref: 250
                Router ID: 66.110.10.90
...

And the problem is with the long lines that don't overflow or the too many lines of output sometimes.

with kind regards,
Nikos

[simonswiss]

Hey!

Try moving your utility classes to the pre tag instead of the code:

<pre class="pre-scrollable h-24 overflow-y-auto">
	<code>
            {{ output_data.cli }}
        </code>
<pre>

Not sure if this is exactly what you want (and what the pre-scrollable class does), but it will allow for vertical and horizontal scrolling:

https://play.tailwindcss.com/Err1qC6lkh

Hope it helps!

[nskalis]

thanks a lot! it did help :)