[resolved] [Plugin: Ultimate TinyMCE] Table layout breaks with image. (9 posts)

  1. allanit
    Posted 4 years ago #

    Hi Guys

    This is a bit complicated to explain so I will tell you the steps to create the problem and see if others can recreate it and help to fix it.

    1. Create a page
    2. In Ultimate TinyMCE create a table 8 colums by 20 rows
    3. Select colum 6 and 7 in row 4 down to row 10 so you have a box 2 colums by 7 rows
    4. Then from the tables dropdown menu select merge cells.
    5. Place an image 300w x 600h in the merge cells.
    6. Then in row 4 select colum 1 to 4 and merge the cells
    7. Repeat step 6. For rows 6, 8 and 10.
    8. In row 4 colum 1 which now spans 4 colums put one word eg TinyMCE and give the merged cells a background color.
    9. Then in rows 6, 8 and 10 add a paragraph of text so that in total you have more text than the image is high.
    10. Then save the page and view the page in a browser.

    If you get the same problem in the browser row 4 will match the height of the image. Strange huh? Any one know how to stop this from happening?


  2. Okay, I tried to replicate this... and aside from feeling like I was playing a tetris video game... I was unable to see what you are describing.

    Perhaps you can link to a screenshot where I can see what you mean?

  3. allanit
    Posted 4 years ago #

    Hi Josh I hope these two images help. If you need more information please let me know


  4. Okay... without getting a headache trying to figure that out, it looks like tinymce keeps "like" rows together. So, since the word "Background" is in a cell one row below the cell where the image is being inserted, it's pushing that entire content downward. Try inserting the image in the same cell row as the word background... and make sure all the cells the image is supposed to span downwards, are merged.

    Alternatively, another way to achieve what you are doing is with the column shortcodes. Have you looked at this feature in the plugin?

    Basically, you can insert your header image to span the entire width of the page. Then, you can split the area below it into 2 columns (or 3, or 4, or 5, or 6).

    So, something like [one-half]All your content for the left side.[/one -half][one-half]path to your image</one-half-last]

    There is more documentation and examples if you click the "help" icon next to the feature in my plugin. It's under Miscellaneous Features.

  5. allanit
    Posted 4 years ago #

    Hi guys the solution to this problem is over on my blog.

  6. Very impressive. And the use of the table looks GREAT!!

    Do you possibly have a link to the page you show in the screenshot?

  7. allanit
    Posted 4 years ago #

    At the moment the site is under construction to replace an existing php/html site but as soon as I am ready to go live I can put a link here.

  8. Awesome! Looking forward to seeing the live site!

  9. allanit
    Posted 4 years ago #

    Hi Josh

    As Promised the completed site Please let me know what you think on my blog

    Thanks allanit

Topic Closed

This topic has been closed to new replies.

About this Topic