Skip to main content
Known Participant
November 20, 2024
Answered

RoboHelp 2022: Top table border flush with drop-down header text (list styles)

  • November 20, 2024
  • 2 replies
  • 392 views

When I add a table inside a drop-down that's part of a list style, it does not add the margin space that is part of the css.  Our  paragraph and list styles have a top and bottom margin of 6pt to space things out a bit.  When I add a table inside a drop-down that is part of a list style, this space is not added, but it is there if the drop-down is added to a paragraph style.  In the example below, the top border of the table is almost flush against the "step 2" wording. We want it to look like the 2nd table, which is in a drop-down that was added to a regular <p> line instead - to have a little space between the drop-down header and the table.

Is there a way to do this in the css that I might be missing?  

 

It does honor that space when there is no table inside the drop-down or when the drop-downs are closed:

But nothing I can think of will make that space appear when the Step 2 drop-down is opened.  In the <p> style and in all of the list styles in the css, I have this:

margin-top: 6pt;
margin-bottom: 6pt;

 

I've added that code to all of the OL, UL, and LI tags in the CSS, but it hasn't made a difference - the table is still flush against the text.

 

In classic, I got around this by selecting the drop-down header text (Step 2 in this example), right-clicking, selecting Paragraph, and then adding 6pt to the Before and After under Spacing.  I didn't realize it until converting a project to 2022, but this adds a paragraph tag to the style, so it has both an li and a p tag..  In classic, the code for step 2 would look like this:

<li class="left-align"><p><?rh-dropspot_start class="dropspot" href="javascript&colon;TextPopup(this)"
id="a4" dataid="POPUP924325029" ?>Step
2<?rh-dropspot_end ?> </p>

Whereas step 1, which does not have a table inside the drop-down, does not have a <p> tag:

<li class="left-align"><?rh-dropspot_start class="dropspot" href="javascript&colon;TextPopup(this)"
id="a3" dataid="POPUP924314693" ?>Step
1<?rh-dropspot_end ?>

 

I tried to replicate adding the spacing in RoboHelp 2022 but with no luck. If I select Step 2 and go to the content properties, there is an option to add a margin and padding, and I've tried both, but it doesn't have any effect.  I've found if I edit the code to add a <p> tag it will work, but I'd rather be able to do it in the CSS ideally, or at least in author mode vs editing the code.  

 

thanks!

Chris

    This topic has been closed for replies.
    Correct answer WoutJacobs

    Fair point, in that we case we slightly adjust the CSS selector to only select tables that are children of div-tags with the class droptext:

     

    div.droptext table {
    margin-bottom: 15px;
    margin-top: 35px;
    }

     

    Showcase example:

     

    2 replies

    Peter Grainge
    Community Expert
    Community Expert
    November 20, 2024

    @WoutJacobs Correct me if I am wrong but I think that will apply to all tables rather than just those in dropdowns in lists.

     

    One solution is to apply a table class to those dropdowns with the settings suggested by @WoutJacobs . Another is to click in the table and then click the table breadcrumb. That will open the settings. There you can apply a top margin.

     

     

    Which is easier will depend on how many instances of this scenario you have to deal with.

    ________________________________________________________

    My site www.grainge.org includes many free Authoring and RoboHelp resources that may be of help.

     

    Use menu (bottom right) to mark as Best Answer or to Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    WoutJacobsCorrect answer
    Inspiring
    November 20, 2024

    Fair point, in that we case we slightly adjust the CSS selector to only select tables that are children of div-tags with the class droptext:

     

    div.droptext table {
    margin-bottom: 15px;
    margin-top: 35px;
    }

     

    Showcase example:

     

    Known Participant
    November 20, 2024

    Actually this is the one that worked for me.  I think the one below would be if the table was actually part of the list.  But if it's just inside a drop-down that is part of a list, it only worked with this code. 

     

    div.droptext table {
    margin-top: 6pt;
    }

     

     

    It also doesn't seem to have any effect on tables inside a drop-down that are not part of a list - they look the same whether the new code is part of the css or not:

    Thank you!! 🙂

    Inspiring
    November 20, 2024

    What if you add margin-top to the <table> tag instead?

     

    table {
    margin-bottom: 15px;
    margin-top: 15px;
    }