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

Engaged ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

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?

 

TOPICS
New UI

Views

388

Likes

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
Engaged ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

Here's the code behind the page.

 

toc-tiles-code.png

Likes

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 ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

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.

 

image.png


www.grainge.org

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Engaged ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

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. 

Likes

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
Engaged ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

toc-tiles-disply-none.png

Likes

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
Engaged ,
Dec 19, 2019 Dec 19, 2019

Copy link to clipboard

Copied

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

Likes

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 ,
Dec 20, 2019 Dec 20, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Engaged ,
Dec 21, 2019 Dec 21, 2019

Copy link to clipboard

Copied

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!

Likes

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 ,
Dec 21, 2019 Dec 21, 2019

Copy link to clipboard

Copied

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

Please use the Blue reply button at the top to help me help you. The black Reply link nests replies and they sort out of order.

Likes

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
Engaged ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

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.

Likes

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 Employee ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

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.

Likes

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
Engaged ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

LATEST

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!!

Likes

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