Footer issue in search-before-header template

steinbacherGE
Posts: 55
Joined: Tue Mar 13, 2018 6:07 pm

Footer issue in search-before-header template

Post by steinbacherGE » Wed Jul 14, 2021 6:04 pm

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 432 times
whfooter-tiles.png
whfooter-tiles.png (26.56 KiB) Viewed 432 times
Any suggestions?

Thanks,

Leroy Steinbacher

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

Re: Footer issue in search-before-header template

Post by alin » Thu Jul 15, 2021 12:30 pm

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 » Thu Jul 15, 2021 6:42 pm

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 408 times

Thanks,

Leroy

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

Re: Footer issue in search-before-header template

Post by alin » Tue Jul 20, 2021 7:47 pm

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 » Thu Jul 22, 2021 4:49 pm

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 » Tue Aug 10, 2021 11:25 pm

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 241 times
Is it something that can be adjusted in the CSS?

Justin
Attachments
PredictiveTextBleeding.png
PredictiveTextBleeding.png (21.34 KiB) Viewed 241 times

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

Re: Footer issue in search-before-header template

Post by alin » Thu Aug 12, 2021 11:17 am

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 » Wed Sep 08, 2021 12:46 am

Thanks, Alin. Looks good now! :D

Post Reply