Header Links in the Studio Theme Overlap the Title

[tesposit.oracle]

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.
• 
• They DO overlap when viewing a Topic Page. And that's what most people see.
  

   

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!

  

[Amebr]

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?

[tesposit.oracle]

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:

The area gets larger and the text shifts below:

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

Now, compare that to a Topic page:

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

[Jeff_Coatsworth]

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.

[tesposit.oracle]

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.

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

[Amebr · Accepted solution]

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;
}

[tesposit.oracle]

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!

[tesposit.oracle]

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.

[tesposit.oracle]

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)."