Custom code 2 columns layout: change the width of the columns (+ 3 columns layout)

Hi all,
Many of you asked me to update the following code, provided by Joachim Brindeau, which creates a two colums layout. These two colums have equal width - 50%. Some of you want the left column or the right column to have a 30% or 40% width. It’s possible.

DEMO HERE: https://test-play.softr.app/two-columns-width

You will find the updated code after the recap of the original code and explanation:

  1. Recap
    "First, you need to have a custom block where you want the columns to be.
    In the custom block, you need to add the following code:
<div class="row">
<div class="column">
<span id="tocolumn1"></span>
</div>
<div class="column">
<span id="tocolumn2"></span>
</div>
</div>

In the page settings, add this to the header:

<style>
.column {
float: left;
width: 50%;
}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
</style>

And this to the footer:

<script>
$("#block1").insertAfter($("#tocolumn1"));
$("#block2").insertAfter($("#tocolumn2"));
</script>
  1. Updated code

Here is the updated code to change the width of each columns. Follow the same process.

<div class="row">
  <div class="column left-column">
    <span id="tocolumn1"></span>
  </div>
  <div class="column right-column">
    <span id="tocolumn2"></span>
  </div>
</div>
<style>
.column {
  float: left;
}

.left-column {
  width: 40%;
}

.right-column {
  width: 60%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
}
</style>
<script>
$("#block1").insertAfter($("#tocolumn1"));
$("#block2").insertAfter($("#tocolumn2"));
</script>
3 Likes

This is fantastic - thanks Matthieu

1 Like

That’s a game-changer. This opens so many possibilities design-wise. Thanks, Matthieu!

Any way we can add multiple blocks to one side of the column? For example, adding another block under the calendar in your demo?

1 Like

Hi!
Yes this is possible, note that this kind of columns layout is in the Softr roadmap as “planned”.

The part of the code you need to update is this one:

<script>
$("#list-details1").insertAfter($("#tocolumn1"));
$("#calendar1").insertAfter($("#tocolumn2"));
</script>

You can add as many $("#blockxx").insertAfter($("#tocolumnxx"));
as you wish. Each time you want to add a block in a column you will change the #tocolumn by changing the column number.

For example, let’s say you add a new form block and you want to place it below the calendar, in the same column.
Here what would be the code:

<script>
$("#list-details1").insertAfter($("#tocolumn1"));
$("#form1").insertAfter($("#tocolumn2"));
$("#calendar1").insertAfter($("#tocolumn2"));
</script>
1 Like

Here is a last update to the 2 colums layout code: a three columns layout!

DEMO HERE: https://test-play.softr.app/three-columns-width

Careful with which blocks you choose to insert in the 3 columns as the result is not always sexy. Feel free to change the 33% width of each column (the sum of all % width must me 100%)

In a custom code block:

<div class="row">
  <div class="column column-1">
    <span id="tocolumn1"></span>
  </div>
  <div class="column column-2">
    <span id="tocolumn2"></span>
  </div>
  <div class="column column-3">
    <span id="tocolumn3"></span>
  </div>
</div>

In the header code of the page settings:

<style>
  .column {
    float: left;
  }

  .column-1 {
    width: 33.33%;
  }

  .column-2 {
    width: 33.33%;
  }

  .column-3 {
    width: 33.33%;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  @media screen and (max-width: 600px) {
    .column {
      width: 100%;
    }
  }
</style>

In the footer code of the page settings:

<script>
  $("#list-details1").insertAfter($("#tocolumn1"));
  $("#calendar1").insertAfter($("#tocolumn2"));
  $("#form1").insertAfter($("#tocolumn3"));
</script>
4 Likes

Thanks a lot from my side as well @matthieu_chateau
I understood that you did a “last update”, but maybe theres place for one issue that results out of using your (great) code!

I use full width blocks on my page as well as two blocks side by side according to your code. However, the two side-by-side blocks are slightly wider than the full-width blocks.
Is it possible to adjust this?
Many thanks
Julian

Sorry, I’m out of it for now => closed. Otherwise it never ends.

Cant get this to work. Added the first custom code to the page where I wanted the layout. Then proceeded to add the code to the settings code fields, header and footer respectively. Tried on a new page and on a existing list detail page, with neither working. Do I need to alter anything in the code you posted or what am I missing?

1 Like

Hi,
To debug I would need screenshots of

  1. The IDs of the block you want to insert in the column (the blocks name which you can change in the softr studio)
  2. A screenshot of every code you inserted

WIth this set of codes it’s easy to forget something, but I can’t debug without visual clues.

Thanks

Hi @matthieu_chateau this is the thread I was looking for to display summary cards in the same row.

I have one card per block.

I replicated the latest code but I’m not sure what to change to pull each summary block into the custom code.

Can you confirm exactly what should I need to change?

Ty so much!

edit:

This is what I get (See before and after)
Before

After

Closed topic

Unfortunately that is specific to summary cards. I won’t be able to help.
There might be a way to make it better by applying css but I don’t have time for it.

You should wait for the Softr native feature to have multiple blocks next to each other, coming in the next months.
In the meantime, another UI design would be better. Code is not the solution to everything, specifically when you can’t maintain it.

It is too complicated for me to adapt the code to all specific use cases (for free by the way). And as this code setup is going to be unrelevant when Softr will allow multiple blocks next to each other, I prefer closing the thread.

Thank you for your understanding

1 Like