Hello,
In the Themes section of my current app, it is set to Fixed width, which is what I want 99% of the time.
I have some specific list table blocks that I would like to make full-width because I have several columns and want to create more horizonal space for the users to view as many columns as possible.
Would love to know if there is some sort of custom code I could use to make a certain block full-width while keeping everything else fixed
Hi @flavi, Matthieu’s custom code will help to adjust the width of certain blocks based on your preference
I have put this code in my page header but cannot seem to get it any wider that what the block is already set as. I can make it small by reducing '1000’px parameter, but if I increase it it doesn’t get wider.
As seen in the photo below, this is the max width I can set the table, but I would like to get it wider (like how the black bottom part of the footer stretches across the entire webpage
It’s great that this custom code option exists, but is Softr planning something that is easier to set up? It’s not much to ask for blocks to be 50/50 or 33/33/33 width, etc. Pretty standard CSS i think.
Hi!
Thank you @Maria for the mention. Though the needed code is a bit different.
The code you need to allow full width on a specific block, while having a theme set to fixed width, is this one:
<style>
#table1 .container {
max-width: none;
}
</style>
If you have multiple blocks that need to be set with a full width (here the example is 2 blocks but you can understand the logic):
<style>
#table1 .container,
#list2 .container {
max-width: none;
}
</style>
You just need to change table1 and list2 by your block IDs. Code to be inserted in the header custom code of the page settings.
This is exactly what I was looking for! Thank you!! Really appreciate your help
How you achieved this table?
Put this in the Header Code of your page, and change the table1/list2 with your blocks