Known Participant

Answered

Issue with the alignment of notes

9 replies
760 views
Translate

Dear All,

We tried upgrading files from RoboHelp 2017 to 2022.

But some of the notes are unaligned (border is not complete) as given below.

Robo Help 2022

RoboHelp 2017

Can anyone suggest a solution?

This topic is closed to new replies. Start a new post to keep the conversation going.

W

WoutJacobsCorrect answer

Inspiring

Ideally, you'd have a div/table with a 'note' class. In that case, it' be easy to just assign them a CSS 'width: 95%'.

Inline styles make it very hard to accurrately and robustly grasp them with CSS. Using a CSS selector on inline styling only works if all your inline styles are exactly the same.

If we naïvely assume that all your 'notes' are actually table tags with the following exact inline styling:

Then you ''could'' add the following CSS:

table[style="border: 1px solid #6792C6;"] {

width: 95%;

}

If the inline styling tends to differ from note to note, then consider yourself unlucky.

W

WoutJacobsCorrect answer

Inspiring

Ideally, you'd have a div/table with a 'note' class. In that case, it' be easy to just assign them a CSS 'width: 95%'.

Inline styles make it very hard to accurrately and robustly grasp them with CSS. Using a CSS selector on inline styling only works if all your inline styles are exactly the same.

If we naïvely assume that all your 'notes' are actually table tags with the following exact inline styling:

Then you ''could'' add the following CSS:

table[style="border: 1px solid #6792C6;"] {

width: 95%;

}

If the inline styling tends to differ from note to note, then consider yourself unlucky.

Translate

Peter Grainge

Community Expert

Oh! Not the best way to work.

Are the new projects using the same CSS as the one where you are having trouble?

It sounds as if you have been applying inline styling and that has not upgraded well. First you will need to remove the existing inline styling and you could then reapply new inline styling. However, the better option would to be create a note style.

If you create a new project and import the CSS and one topic with a note showing the problem, I can provide some notes on how to do that.. Zip up the new project and send it as instructed on my Contact page.

________________________________________________________

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

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Peter Grainge

Community Expert

Which style is applied to the notes? Let me know that I can probably help.

________________________________________________________

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

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

A

amrutha_3925Author

Known Participant

Dear Peter,

We are not using any styles, instead, we use the Insert colum functionality to insert notes.

Then, we customised the code in accordance with our preferences and so, it worked well on creating new projects.

But , when we import the classic files, the above-mentioned error occures.

So,we haven't customised any styles from the Styles menu as you mentioned.

Translate

Peter Grainge

Community Expert

I think what @Amebr wanted was to see the code of a note along with some of the code before and after.

I have downloaded your CSS but I can't tell which style you are applying to the Note.

Did you try what I had suggested?

________________________________________________________

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

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

A

amrutha_3925Author

Known Participant

Dear Peter,

We followed your suggestions and found out the required width.

Currently, we are trying to apply it to the style sheet.

Regards,

Amrutha V Nair

Translate

A

Amebr

Community Expert

It's impossible to tell from the screenshots you have provided what is going on. But it may well be because RH2017 generally didn't do nested elements in lists correctly. So the elements might be using indenting rather than corect nesting, which pushes the right-hand side that much further right. From memory this will need tweaking of the right margin, but depending on the coding of the element with the border, this might require manual tweaks per instance, or the creation of multiple styles with different margins depending on the indenting level of that element (and manual application of that style).

The ultimate fix will be to make sure the underlying html code is correct (which you can do more easily in the WYSIWYG editor in New UI) but obviously that will take some time.

If you need more help, post some code of the relevant area (maybe a couple if different indenting applies), plus the relevant style setup from your stylesheet.

Translate

A

amrutha_3925Author

Known Participant

Dear Amebr,

Thanks for the response.

Please find the attached style sheet.

Regards,

Amrutha V Nair

Translate

RHStyleMapping.zip

Peter Grainge

Community Expert

You are referring to the fact that the right hand border is not showing, correct?

Click in the table and then click the Table breadcrumb. In the properties that will then show on the right, you will be able to change the width for that table. What you then need to do is set that width in the table style in the CSS.

________________________________________________________

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

Translate

Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.