Enabling wide layout

[pchemguy]

I need to display wide and long tables, so I want to have no margins on the page and the table should extend sideways beyond the screen. Using table specific scrollbar is impossible, because the table does not fit on the screen in the vertical direction, so I should be able to do horizontal scrolling using the browser scrollbar, not table specific scrollbar. I tried setting shell's layout property to 'fluid' and 'horizontal', but neither produced any visible effect.

So, how do I remove margins and clipping of the table columns?

[lovasoa]

Hello and welcome to SQLPage !

Can you share a reproduction of the shell's layout property not working ? It works at least of the official site: https://sql.ophir.dev/examples/layouts.sql?layout=fluid

Maybe you can share your code, and a screenshot of what are seeing, where you would like to see a scrollbar, and which margins you are trying to remove ?

And out of curiosity: what are you building with SQLPage ? I'm always curious to know what people are working on, to orient the development.

Cheers,
Ophir

[pchemguy]

OK, here is the thing: I had

SELECT 'shell' AS components

in my code and, obviously, no straightforward means to catch this error. After fixing it, the fluid layout works now, but it does not solve the problem. Table columns are still clipped at the screen border, and, to do horizontal scrolling, I still need to do vertical scrolling first to get to the bottom of the table, which is, of course, unacceptable.

[lovasoa]

Indeed, sqlpage is not able to catch invalid property names. I agree this would be a nice feature to have !

About scrolling:

• You usually can scroll horizontally without having to scroll vertically first by pressing your middle mouse button
• However, I think I see what you are trying to achieve. I'll write a small example and post it here.

[lovasoa]

Here is the example: https://replit.com/@pimaj62145/SQLPage-large-table

select 'shell' as component,
  '/style.css' as css,
  'fluid' as layout;

And in style.css

#employee_table {
  width: fit-content;
}

[pchemguy]

Great! That is what I need. Thanks!