Support » Plugin: Simple Code Block » ACE blocks overlaps with other

  • Resolved xukyo

    (@xukyo)


    I’m trying the plugin, which is great by the way.
    But the block is overlapping with next blocks and i cannot find the correct CSS configuration to solve this.
    Do you have a working solution?
    Thanks in advance
    Best regards

    Xavier

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Contributor sumapress

    (@sumapress)

    Are you sure you are using the Simple Code Block? 🙂
    You can use the spacing block below the code block.

    In any case, what you say could be a problem with the styles of the installed theme.
    Please check that there is no interference with your theme or others plugins and try to test your installation in a clean installation with a WP default theme

    thanks

    The issue I identified is that it defines a style in the tag definition taht i cannot change.
    <div class=”wp-block-simple-code-block-ace” style=”height: 250px; position:relative; margin-bottom: 50px;”>

    Plugin Contributor sumapress

    (@sumapress)

    Oh yes, height is auto according with the code of each block you have, and the margin it’s a minimun to create some space below.

    In most themes it does not give problems but if according with your project you need more space below this block, you can create with CSS your own solution like for example: use margin-bottom with !important, add other margin block below, add margin top on next block or even put this block into div wrap

    The value is height=250px whatever the size of the code.

    I solve the issue by clearing the css that might interfere with it (changing to class name instead of tag name pre) and adding a CSS class.
    .ace-block {
    height: 500px !important;
    }

    You were right my theme was interfering. The difficulty was to find the right parameters to play with to keep my theme working.

    Anyway, thanks a lot for your time and answer. I would not have found the answer without your input.

    I forgot the main part. I had to change the block parameter “Lines to show in frontend without scroll” to a value that fit the height value. In my case it was 30 lines.

    So for future reference
    Setup 1
    Lines to show in frontend without scroll = 30
    .ace-block {
    height: 500px !important;
    }

    Setup 2
    Lines to show in frontend without scroll = 50
    .ace-block {
    height: 800px !important;
    }

Viewing 5 replies - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.