• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Header Links in the Studio Theme Overlap the Title

Explorer ,
Mar 13, 2024 Mar 13, 2024

Copy link to clipboard

Copied

Hello,

I'm using the Studio theme with RH2022. We have Header links and depending on where you are in the project, the links either shift below the project title, or overlap it. This occurs when the window is not full screen and the header resizes.

Other than removing the links altogether, how do I prevent it from overlapping?

  • They do NOT overlap when viewing the Home Page.
  • HomePageNoOverlap.png
  • They DO overlap when viewing a Topic Page. And that's what most people see.
    TopicPageWithOverlap.png

There is only one setting that I see to define those, but they render differently depending on Home/Topic pages. Is there something I'm defining incorrectly on the Topic page which causes this?

Thanks!

  

Views

148

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

correct answers 1 Correct answer

Community Expert , Mar 14, 2024 Mar 14, 2024

Aside:

Did you know you have several icons that don't show up because the icon colour matches your background colour? In your 6th image which shows the topic title being truncated, you can see the image imposed of the TR (it's the 3 lines hamburger menu image). Similarly in your example of the home page, there is a Favourites icon that you can't see. You can hover the mouse over the correct areas and it will change to a hand, indicating the area is clickable. I just thought I'd point it out.

 

M

...

Votes

Translate

Translate
Community Expert ,
Mar 13, 2024 Mar 13, 2024

Copy link to clipboard

Copied

Maybe you can adjust the height of the header in the topic page? It's not something I've played with, but the height in your screenshots looks different, so maybe if they were the same height you wouldn't see the problem?

Votes

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
Explorer ,
Mar 14, 2024 Mar 14, 2024

Copy link to clipboard

Copied

Thanks, Amebr!

I checked and indeed the height was slightly different on the one page, so I made them the same.
However, the behavior of the two areas is not the same when I resize the screen.

Here are some shots of the Title page. Note how it rearranges the text automatically as the page size decreases:

tespositoracle_0-1710420402234.png

The area gets larger and the text shifts below:

tespositoracle_1-1710420440459.png

Ultimately the title doesn't even fit, and it all bumps out of the box:

tespositoracle_2-1710420478777.png

 

Now, compare that to a Topic page:

tespositoracle_3-1710420512150.pngtespositoracle_4-1710420539675.png

tespositoracle_5-1710420562577.png

On that one, it just gets shorter, combines the links, and ultimately truncates the title instead of shifting it around.

 

Is there some mystery setting I don't know about that causes this change in behavior? Or is it how the theme is designed? (I did make sure the height is the same between the two in my working copy.)

 

Also, you're welcome to experiment with this if you'd like to see it in person. The project is public and published here: https://docs.oracle.com/en/cloud/saas/transportation/24b/otmol/index.html.

 

Thanks,

Tim

 

Votes

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 Expert ,
Mar 14, 2024 Mar 14, 2024

Copy link to clipboard

Copied

To figure out if an effect of the project or the template, I'd suugest experimenting with the sample project using the same template first to see if it misbehaves the same way & then try the sample with a different template.

Votes

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
Explorer ,
Mar 14, 2024 Mar 14, 2024

Copy link to clipboard

Copied

Jeff, I've tried that as well. Same behavior.

All I've changed in the sample here is made the title longer so it will run into the header buttons.

tespositoracle_1-1710423642972.png

You can see that on the Topic page, the text doesn't rearrange or wrap the way it does on the Title page, just like in my real project.

 

This suggests to me an error in the Theme design, unless the default setting in the theme is to do this for some reason.

 

Thanks,

Tim

Votes

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 Expert ,
Mar 14, 2024 Mar 14, 2024

Copy link to clipboard

Copied

Aside:

Did you know you have several icons that don't show up because the icon colour matches your background colour? In your 6th image which shows the topic title being truncated, you can see the image imposed of the TR (it's the 3 lines hamburger menu image). Similarly in your example of the home page, there is a Favourites icon that you can't see. You can hover the mouse over the correct areas and it will change to a hand, indicating the area is clickable. I just thought I'd point it out.

 

Main topic:

The topic page does seem to behave differently, and that would be something you need to raise with Adobe. You could try support, to see if they have a workaround. Or log a bug report for consideration for a future release.

 

See the following page for support contact options. The email address is recommended as it goes to a dedicated Robohelp team.

https://helpx.adobe.com/contact/enterprise-support.other.html#robohelp

 

You can request features and report issues here: https://tracker.adobe.com/
Post the item number in the discussion so people can easily vote if they want the same functionality.

 

I did poke around the css and I came up with a hack you could try, but Adobe might have a better suggestion. If you want to try it, paste the following into a custom css and add it to the User Assets section of the skin. You might need to add !important after some properties if they don't work once you generate and publish, but I can't test out which ones might be needed.

NOTE: I don't guarantee that this won't cause weird display issues. You'll need to test thoroughly to make sure you're happy with the behaviour on all devices, browsers, screen sizes, etc.

 

.RH-LAYOUT-HEADER-container {
flex: row wrap;
align-items: unset;
}
.RH-LAYOUT-HEADER-container > * {
flex: 1 100%;
}
.RH-LAYOUT-HEADER-logo-box {
position: unset;
justify-content: unset;
}
.RH-LAYOUT-HEADERMENU-container {
flex: 4 auto;
}
.search-placeholder-class {
display: flex;
flex: 1;
}

Votes

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
Explorer ,
Mar 15, 2024 Mar 15, 2024

Copy link to clipboard

Copied

Thank you, Amebr!

I did notice the hidden icons when I made the screen shots. I'll see if I can restore them somehow. I don't remember changing the colors of those, but who knows?

 

And thank you for the links to report this to Adobe. I'll try and craft an email about it.

The revised CSS looks interesting and I'll experiment as well!

Votes

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
Explorer ,
Mar 22, 2024 Mar 22, 2024

Copy link to clipboard

Copied

I've applied your suggested CSS and it is a big improvement! Thank you.

Today, I sent an email to Adobe as you suggested. We shall see if/when they reply.

Votes

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
Explorer ,
Mar 22, 2024 Mar 22, 2024

Copy link to clipboard

Copied

LATEST

Adobe responded and said, "We were able to reproduce the below issue in RH 2022.3.93. Bug #RH-12401 has been logged internally for further investigation, and it shall be addressed in future application update(s)."

Votes

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
Download Adobe RoboHelp