Indentation issue in Numbered List with an icon/image (RH 2019.0.12)

Community Beginner ,
Aug 30, 2020 Aug 30, 2020

Copy link to clipboard

Copied

Hi,

My work includes adding UI icons while writing steps to do something.

Upon doing the same, the indentation of the numbered list with the number got mismatched.

Please refer the attached image for depicting actual issue and suggest me if anything can be done.

NumberedListIssue.png

Thanks!

Views

125

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 30, 2020 Aug 30, 2020

Copy link to clipboard

Copied

Does it only display like that when editing in Robohelp, or also after you generate and view the output?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 31, 2020 Aug 31, 2020

Copy link to clipboard

Copied

Hi,

 

It is same as illustrated, at both the places... while editing as well as in the output also.
Actually, other steps are fine...it happens only in the case where I add some icon in the step.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Aug 31, 2020 Aug 31, 2020

Copy link to clipboard

Copied

A quick resolution to this would be highly appreciable as I need to fix it before the release, which is in just a week.

 

Thanks!

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 31, 2020 Aug 31, 2020

Copy link to clipboard

Copied

You know you're only dealing with a user-to-user forum here, right?
Try updating and see if that makes any difference.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Aug 31, 2020 Aug 31, 2020

Copy link to clipboard

Copied

I think it will be something with how your css is defined, but I don't know what. I tried to recreate in a test project but can't.

 

The best I can think is that you create a new temporary project and gradually copy in your styles until you discover the change that makes your numbering misalign.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 01, 2020 Sep 01, 2020

Copy link to clipboard

Copied

Thanks @Amber, will try and let you know if got success.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2020 Sep 02, 2020

Copy link to clipboard

Copied

So, finally, it is solved, though in the output only.
I don't know how but in CSS, the position of the lists was set to Absolute...I just removed it and now the output is displaying fine, as required.

However, the source has still no change.

 

Thanks!

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 02, 2020 Sep 02, 2020

Copy link to clipboard

Copied

So the style was not in your stylesheet, only in your output?

 

Can you post where you found the style, and what the name and settings were? If I have the details I might be able to find where the style comes from, so you can fix it properly, rather than fixing it every time you generate your help.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 02, 2020 Sep 02, 2020

Copy link to clipboard

Copied

No No...It's not in the output folder. I made the changes in the stylesheet only. I have removed this from the source code of the css:

Postion: Absolute

and after this when I generated the output it was working fine...

"However, the source has still no change.", with this line I meant even after changing the css source code...the indentation is not correctly displayed in the RH editor but the changes are reflected in the output.

 

Please let me know if you still need any code.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 02, 2020 Sep 02, 2020

Copy link to clipboard

Copied

Hmm it sounds strange as I would expect the display in Robohelp to be correct.

I wouldn't mind poking around a bit further in case other people have the problem. Would you mind posting the style that was causing problems?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2020 Sep 03, 2020

Copy link to clipboard

Copied

Sure, here is the list style that was creating issue...both ordered and unordered.

 

ol {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style: none;
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  counter-reset: item1;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ul {
  margin-top: 0px;
  margin-bottom: 0px;
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  counter-reset: item1;
  list-style: none;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol>li {
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  font-family: 'Segoe UI';
  font-size: 9pt;
  color: #D1D1D1;
  line-height: 1.5;
}
ol>li:before {
  counter-increment: item1;
  content: counter(item1, decimal)".";
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  font-family: 'Segoe UI';
  font-size: 9pt;
  color: #D1D1D1;
  line-height: 1.5;
}
ul>li {
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  line-height: 1.5;
}
ul>li:before {
  counter-increment: item1;
  content: counter(item1, disc);
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  font-family: 'Segoe UI';
  font-size: 10pt;
  line-height: 1.5;
}
ul>li>ul {
  --prefix-size: 40px;
  --prefix-fixed-size: true;
  --prefix-gap: 12px;
  --list-indent: 20px;
  --vertical-spacing: 4px;
  counter-reset: item2;
  list-style: none;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ul>li>ul>li {
  --prefix-size: 40px;
  --prefix-fixed-size: true;
  --prefix-gap: 12px;
  --list-indent: 20px;
  --vertical-spacing: 4px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  line-height: 1.5;
}
ul>li>ul>li:before {
  counter-increment: item2;
  content: counter(item2, disc);
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  line-height: 1.5;
}
ol>li>ol {
  list-style: none;
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 40px;
  --vertical-spacing: 8px;
  counter-reset: item2;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol>li>ol>li:before {
  counter-increment: item2;
  content: counter(item2, lower-roman)".";
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  margin-left: ;
  line-height: 1.5;
}
ol>li>ol>li {
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 40px;
  --vertical-spacing: 8px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  line-height: 1.5;
}

 

From the above code,  I just removed Position: Absolute.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2020 Sep 03, 2020

Copy link to clipboard

Copied

Sure, here is the CSS that caused issue in both numbered and bulleted list:

 

ol {
  margin-top: 0px;
  margin-bottom: 0px;
  list-style: none;
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  counter-reset: item1;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ul {
  margin-top: 0px;
  margin-bottom: 0px;
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  counter-reset: item1;
  list-style: none;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol>li {
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  font-family: 'Segoe UI';
  font-size: 9pt;
  color: #D1D1D1;
  line-height: 1.5;
}
ol>li:before {
  counter-increment: item1;
  content: counter(item1, decimal)".";
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  font-family: 'Segoe UI';
  font-size: 9pt;
  color: #D1D1D1;
  line-height: 1.5;
}
ul>li {
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 28px;
  --vertical-spacing: 4px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  line-height: 1.5;
}
ul>li:before {
  counter-increment: item1;
  content: counter(item1, disc);
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  font-family: 'Segoe UI';
  font-size: 10pt;
  line-height: 1.5;
}
ul>li>ul {
  --prefix-size: 40px;
  --prefix-fixed-size: true;
  --prefix-gap: 12px;
  --list-indent: 20px;
  --vertical-spacing: 4px;
  counter-reset: item2;
  list-style: none;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ul>li>ul>li {
  --prefix-size: 40px;
  --prefix-fixed-size: true;
  --prefix-gap: 12px;
  --list-indent: 20px;
  --vertical-spacing: 4px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  line-height: 1.5;
}
ul>li>ul>li:before {
  counter-increment: item2;
  content: counter(item2, disc);
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  line-height: 1.5;
}
ol>li>ol {
  list-style: none;
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 40px;
  --vertical-spacing: 8px;
  counter-reset: item2;
  padding-left: var(--prefix-size);
  margin-left: calc(var(--list-indent) - var(--prefix-size));
}
ol>li>ol>li:before {
  counter-increment: item2;
  content: counter(item2, lower-roman)".";
  text-align: right;
  position: absolute;
  left: calc(-1 * var(--prefix-size) - var(--prefix-gap));
  margin-right: var(--prefix-gap);
  width: var(--prefix-size);
  overflow: hidden;
  margin-left: ;
  line-height: 1.5;
}
ol>li>ol>li {
  --prefix-size: 40px;
  --prefix-fixed-size: false;
  --prefix-gap: 8px;
  --list-indent: 40px;
  --vertical-spacing: 8px;
  position: relative;
  margin-top: calc(var(--vertical-spacing) / 2);
  margin-bottom: calc(var(--vertical-spacing) / 2);
  line-height: 1.5;
}

 

So, from the above code snippet, I just removed Position: Absolute.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2020 Sep 03, 2020

Copy link to clipboard

Copied

Hey, one good news and one sad news to share! 🙂

Good one is that...issue has been resolved in the source as well. So, when I restarted my project today, I can see that numberings are perfectly indented in the Source as well.
However, a new issue has occurred now, which is hanging indentation. All lists (Bulleted/Numbered) are hanging now. See the attached snapshot.Hanging.png

 

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 03, 2020 Sep 03, 2020

Copy link to clipboard

Copied

I nearly said you should try closing RH and reopening to see if the display fixed itself. There is a bug with images not refreshing correctly in RH2019 (I forget if it's been fixed in patch 13 or 14 or not until RH2020) and I wondered if the same solution would work for other issues.

 

To confirm the initial problem, all you did was remove 'position: absolute;' from the ol an ul styles?

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 03, 2020 Sep 03, 2020

Copy link to clipboard

Copied

Yes, for the initial problem.

And actually with the restart of RH, the later issue occurred. Will check and let you know if I get any luck to fix this as well.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Sep 08, 2020 Sep 08, 2020

Copy link to clipboard

Copied

Hi @Amber,

It seems the problem was temporary, as it has gone automatically without doing anything.

There may be some bug or something in the List style too.

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Sep 08, 2020 Sep 08, 2020

Copy link to clipboard

Copied

I'm glad it's working for you now. 

 

I tried replicating with the code snippet you posted, but couldn't. I'm going to put this one down to the phase of the moon. 🙂

Likes

translate

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Resources
RoboHelp Documentation