RH 2019 Frameless: How to suppress/hide TOC Tiles container

[RoboFan]

Enviro

• Running RH 2019.
• Developing Frameless output for the Orange skin.

Goal

• Want to suppress/hide TOC Tiles container on home page and use my own topic as the source of all home page content. 

Problem

• If I set the Display property to None for the TOC Tiles: container element, the TOC tiles are correctly suppressed/hidden in the output, but the search function won't display search results.

Details

• Output Preset: Frameless
• Skin: Orange
  • Home Page / Search Results / container
    • Float: Select
    • Clear: Select
    • Position: Select
    • Display: block
  • Home Page / TOC Tiles / container
    • Float: Select
    • Clear: Select
    • Position: Select
    • Display: Select

Generate, perform search. Search results display over (or replace) the TOC tiles container, and push my home page topic to the end of the results list. I'm okay with my home page topic gettng pushed down to the end of the search results.

Edit the above configuration and change one thing:

• Skin: Orange
  • Home Page / Search Results / container
    • Float: Select
    • Clear: Select
    • Position: Select
    • Display: block
  • Home Page / TOC Tiles / container
    • Float: Select
    • Clear: Select
    • Position: Select
    • Display: None

Generate. Home page correctly loads, TOC tiles are suppressed, and my home page topic is the only home page content displayed. Type a known-good search term and click search icon or press Enter. Nothing. No search results.

So how do I configure the home page to never display the TOC tiles container, but display the Search Results container when an end-user performs a search?

[RoboFan]

Here's the code behind the page.

[Peter Grainge]

I'm not sure I have followed but you seemed to be saying you want your own topic as the home page. Browsing to it here is supposed to let you choose your own home page.

---

www.grainge.org

[RoboFan]

Correct. And I have that set and it's displayed below the TOC Tiles. However, I don't want the TOC tiles to display. So I can set the TOC Tiles container to not display. And everything looks good in my output until I go to run a search from the home page - at which point I get no search results. 

[RoboFan]

[RoboFan]

It is as though the Search Results container is inheriting the TOC Tile container's "display: none" setting.

[Peter Grainge]

I think the problem can be created more simply. I created a new project using the Orange skin and generated an output. The search worked.

Then I went to TOC Tiles > Container and set Display to None. The search fails. It doesn't seem to be anything to do with your use of your own home page.

If you can just confirm you get the same with a clean project, I will make further enquiries.

---

www.grainge.org

[RoboFan]

Peter,

I can confirm. I created a new, blank project as well. Tried both Oceanic skin and Orange skin with frameless output. The result was the same. I would appreciate further inquiries. Too, if there's a code workaround - such as manually editing the layout.css, or some other text-based system/project/output file, I'm game for using that until Adobe can get a true fix deployed.

Thank you for looking into this!

[Peter Grainge]

The wrong field is being referenced in the code. Restore TOC Tiles > Container > Display to Select and go to TOC Tiles > toc-list and set that to None. The search then works.

This has been noted for the next update so check your settings again after Update 11.

---

www.grainge.org

[RoboFan]

Peter,

Thank you! Your advice got me half-way there. The TOC tiles were suppressed and search worked, but I still had a big blank space between the bottom of the header container (with search box) and the top of my custom home page topic. So much so, that it pushed my home page topic down below the visible area in the web browser (when viewing the compiled/generated output). As a result, users would have to scroll down to view the home page. None of the RoboHelp output (skin) settings were able to resolve this. Instead, I had to manually edit min-height and padding settings under .RH-LAYOUT-HOMEPAGE-TOC-container (starting on line 1218) in layout.css of my output.

Here are the default settings:

.RH-LAYOUT-HOMEPAGE-TOC-container {
flex-grow: 1;
min-height: calc(100% - 29rem);
padding: 3rem 5rem;
}

Here are my corrected/edited settings:

.RH-LAYOUT-HOMEPAGE-TOC-container {
flex-grow: 1;
min-height: 1%;
padding: 1rem 1rem;
}

IMPORTANT: The above corrections in layout.css get overwritten each time you build/compile/generate the output - so you'll need to perform this change after building/compiling/generating your output every time.

Hopefully, Adobe gets this issue resolved in update 11.

[Vivek Kumar]

We will take it up to fix in Update 11.

But correct way to customize the CSS is to put it in layoutDiff.css which you will find in the skin folder. This css file is designed for such changes only.

[RoboFan]

Edited layoutDiff.css for my project's skin.

Changed this:

.RH-LAYOUT-HOMEPAGE-TOC-container {
}

To this:

.RH-LAYOUT-HOMEPAGE-TOC-container {
flex-grow: 1;
min-height: 1%;
padding: 1rem 1rem;
}

Saved the changes. The issue is resolved every time I compile/build output, without any further manual editing/steps. Thank you!!