Text content in table cell - can't add a new line, hitting return selects the cell

Question:
I have a rich text field within which I have a table. Why you ask ? Well, i am building a recipe website and the number of steps vary with each recipe so the only way I could think of doing it was to have one “Steps” field and put a table in there to help format the steps. I want the images to appear next to the step description, rather than above or below - hence the table.

OK, so the problem is editting the text cell, as soon as i hit return for a new line it selects the cell and I can’t edit the text anymore. I can just create all the text in a word doc and copy across but seems like the CMS edit should be able to handle adding multil-ine text to a cell.

Anyone had the same issues, how did you get around it ?

Product:
CMS Editor

I haven’t tried what you’re doing, but why don’t you just design a “table” out in the open, instead of doing it inside a text box?

That way you can add text boxes for each cell in your designed table, and connect each text box with a cms field

Thank you, I think I understand what you’re saying but all the recipes have a different number of steps.

I wonder if I could create a table with, say 15 rows, then only provide content for say steps 1-8, while another recipe has 11 steps for example.

I’ll give it a go and see how it turns out.

OK, I’ve found that I can’t use a table because the CMS fields can only be in columns not in rows as I need. So for example, if i have the following CMS fields

Image 1, Desc 1
Image 2, Desc 2
Image 3, Desc 3

and so on, I can’t have those appear as rows, they’ll appear as columns, which of course is not what i need.

Alternatively if i don’t use a table and create the page with the right layout, which is 2 columns with images and descriptions next to each, each connected individually to a CMS element. So like below

Image connected to CMS image1 field, Description connected to CMS desc1 field
Image connected to CMS image2 field, Description connected to CMS desc2 field
Image connected to CMS image3 field, Description connected to CMS desc3 field

Then I have he other problem. That is, say I have 10 steps in one recipe and only 5 in the other, i will get lots of space below the recipe with 5.

You can see this here
Chicken and Saag (onlineplaces.wixsite.com)
Deliciously Simple Lentil Curry (onlineplaces.wixsite.com)

Lots of space under the lentil recipe!

Any ideas are welcome, thanks.

I don’t understand what you mean. You can create as many CMS fields as you want, such that all your data for one item can be in one row.

Eg.:

Item 1 - Image 1 - Desc 1 - Image 2 - Desc 2 - Image 3 - Desc 3
Item 2 - Image 1 - Desc 1 - Image 2 - Desc 2 - Image 3 - Desc 3
Item 3 - Image 1 - Desc 1 - Image 2 - Desc 2 - Image 3 - Desc 3

Hey, thanks again for your response. Yep, I’m confusing myself. Let me start with what I am trying to do.

A recipe is descripted by a list of steps, each step has a picture, I want to display these as follow.


| Image 1 | Description 1 |

| Image 2 | Description 2 |

| Image 3 | Description 3 |

Some recipes have more steps than others so in the CMS I have to create enough fields to cover Image n and Description n where n is big enough to cover the max number of steps ( lets say n is 15 )

Now, I need to create a 15 row table in the template as shown above.

All good so far, although I can’t use a table as I need to map fields to rows rather than to columns.

The problem is that when I add a recipe that has 5 steps, 10 rows are empty, therefore I end up with 10 rows worth of space.

Yeah, this is an annoying problem that i’ve run into sometimes as well.

The solution would probably be to do some code that can “collapse” elements if the fields are empty / undefinded.

Things get a little more complex there.

I’m a private person and unfortunately can’t spend too much time on this and help you debug etc., but I’m sure that google, chatGPT or Wix Support can help you - at least help finding a developer, in case having to code is too overwhelming.

YouTube might be of help as well.

Alright, have a good one

X

The only thing what will help you is a screenshot, which is exactly showing your wished result. Show a picture of the setup you want to achieve.

In your case i am pretty sure you will need a REPEAR + TABLE.

SETUP:

  1. Imagine you have a REPEATER of 800x400 pixel (w/h).
  2. You put into repeater 2x boxes → (30% of width + 70% of width).
  3. Into left box you put the image.
  4. Into right box (which is devided (30% / 70%) in it’s height, you put the table into the bottom part.
  5. Into the top part you place some other elements, like title or what ever.

The repeater will almost look like the following…

But having a integrated table under the description —> showing all your → RECIPE-STEPS.
A table should be scrollable, so, it should make any problem.

Thanks Dima, does this cater for a different image for each step of the process. Remember I am also doing this using the CMS and need to cater for a different number of steps per recipe. You didn’t mention the CMS in your suggestion so just wanted to clarify.
Cheers, Jack

It is always good to know, how you structured your DATABASE, (i think you call it CMS).
It is very important to know the structure of your DB, before proceeding.

If i would be you → i would have 2 DATABASES.

  1. All your RECEPIES → including … —> RECIPE-DB
    a) Reciep-Title
    b) Reciep-Description
    c) Reciep-whatever…

All this data will be carried by the —> REPEATER.

  1. And a second DATABASE for all steps of EACH-RECIEPE. —> STEPS-DB
    a) STEP-1
    b) STEP-2
    c) STEP-3
    d) STEP-4
    e) and so on…

All the steps would be driven by the table, which is included inside the repeater.

Your STEPS inside the STEP-DATABASE you can connect through ID or references to your each of the RECEPIES inside your MAIN-DATABASE / RECIPE-DB

Example:
Recipe-1 → ID = 001 → inside your RECIPE-DB

Accordingly you will find inside the STEPS-DB the correscponding steps for ID=001.

Of course you can hold everything also inside just ONE-SINGLE-DB, for example using for your steps an OBJECT-FIELD inside of your main RECIPE-DB (other possibilities would be an ARRAY-FIELD or even a SELECTION-TAGS defined field).

So as you can see, the whole thing already starts inside the STRUCTURE of your DATABSAE!

If you want to achieve your aim by using datasets, i would recommend the 2x DATABSE-VERSION.

If you are familiar to CODING → you can use just 1x DATABASE.