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

[Christine301653386cjz]

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

[WoutJacobs]

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

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

[Peter Grainge · Accepted solution]

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

[WoutJacobs · Accepted solution]

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:

[Christine301653386cjz]

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!! 🙂

[WoutJacobs]

*Correction to my correction: we don't want to apply this to all tables in a dropdown, only to tables within list items within a dropdown:

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

[Christine301653386cjz]

This works as well.   I don't know why I didn't think of that for both classic and 2022.  I guess I had it in my head that it had something to do with the drop-down or list rather than thinking to edit the table itself.

thank you 🙂