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

[matthieu_chateau]

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>

2. 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>

[gabeski]

This is fantastic - thanks Matthieu

[StevenS]

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?

[matthieu_chateau]

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>

[matthieu_chateau]

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>

[Jackson]

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

[matthieu_chateau]

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

[Jondekh]

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?

[matthieu_chateau]

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