Footer issue in search-before-header template

Post here questions and problems related to editing and publishing DITA content.
steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Footer issue in search-before-header template

Post by steinbacherGE »

We have added the search-before-header template to our GE custom template and the search field is working as expected. Thank you very much for adding this customization!

https://github.com/oxygenxml/oxygen-pub ... ore-header

But, we are now seeing an issue with the footer for larger bookmaps that have several chapters. It looks like this is related to the footer-fix.css file.

The footer is not getting pushed down to the bottom of the page for large bookmaps (tiles or toc). It hovers over the content links on the main page.
whfooter-toc.png
whfooter-toc.png (27.83 KiB) Viewed 1829 times
whfooter-tiles.png
whfooter-tiles.png (26.56 KiB) Viewed 1829 times
Any suggestions?

Thanks,

Leroy Steinbacher
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Footer issue in search-before-header template

Post by alin »

Hello,

I have fixed the position of the footer section and pushed the changes to the samples repository.
In footer-fix.css I have replaced:

Code: Select all

body {
   height: 100vh;
}
with

Code: Select all

body {
   min-height: 100vh;
}
Please let me know if the issue still occurs on your side.

You can also remove the footer-fix.css file from your template as it is out of scope of the search-before-header Publishing template.
I have included it in the template to avoid the footer section not being pushed to the bottom of the page when the height of the page content was smaller than the height of the viewport.

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Re: Footer issue in search-before-header template

Post by steinbacherGE »

Thanks for the fix. This resolves the issue.

I have one more question. In the search-in-header template, is it possible to force the search input field to the right hand side instead of wrapping down to the second, or third line?

search-in-header.png
search-in-header.png (23.57 KiB) Viewed 1805 times

Thanks,

Leroy
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Footer issue in search-before-header template

Post by alin »

Hello,

I have updated the template as follows:
- Main flex items in the header section (title, menu + index terms link, search input) will not wrap
- The content within each item can still wrap independently (e.g.: menu items will warp on multiple lines if there is no enough space)
- Title and search input have a minimum width (150px) - if the title exceeds this width and there is no space available it will also wrap on multiple lines

Image

search-in-header.css additions:

Code: Select all

@media only screen and (min-width : 768px) {
    .wh_top_menu_and_indexterms_link.navbar-collapse {
        display: flex !important;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
    }

    .wh_header_flex_container {
        flex-wrap: nowrap;
    }

    .wh_header_flex_container .wh_search_input {
        padding-left: 1em;
        min-width: 150px;
    }
    
    .wh_publication_title {
        min-width: 150px;
    }
}
Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Re: Footer issue in search-before-header template

Post by steinbacherGE »

Thanks for the update. This is a great improvement. :D
qualler
Posts: 15
Joined: Fri Jan 26, 2018 8:05 pm

Re: Footer issue in search-before-header template

Post by qualler »

Hi Alin,

Leroy has left the company and I'm looking at this feature implementation. One thing I notice is that when we use the search and the predictive text displays, if there are chapter titles underneath, they aren't covered up by the predictive box.
PredictiveTextBleeding.png
PredictiveTextBleeding.png (21.34 KiB) Viewed 1638 times
Is it something that can be adjusted in the CSS?

Justin
Attachments
PredictiveTextBleeding.png
PredictiveTextBleeding.png (21.34 KiB) Viewed 1638 times
alin
Site Admin
Posts: 268
Joined: Thu Dec 24, 2009 11:21 am

Re: Footer issue in search-before-header template

Post by alin »

Hi Justin,

You can fix the issue by increasing the "z-index" property of the pop-up menu in CSS.
For example:

Code: Select all

.ui-autocomplete {
  z-index: 10000;
}
I have also updated our templates samples.

Regards,
Alin
Alin Balasa
Software Developer
<oXygen/> XML Editor
http://www.oxygenxml.com
qualler
Posts: 15
Joined: Fri Jan 26, 2018 8:05 pm

Re: Footer issue in search-before-header template

Post by qualler »

Thanks, Alin. Looks good now! :D
Post Reply