Search box on page with header

  • 1
  • Problem
  • Updated 2 years ago
  • Solved
I have page with sliding pages that works fine.  However, when I include the page with with a Skuid Header the header and footer override the slider.  It does not show any page titles or buttons on the top of slide out page.  I have a video that shows best the issue.

https://drive.google.com/file/d/0B409lhd9sYDcb0lTVEZEMGtobmc/view
Photo of Bill Fox

Bill Fox

  • 8,044 Points 5k badge 2x thumb

Posted 2 years ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,670 Points 10k badge 2x thumb
Hi Bill, thank you for your demonstration video. I tried to mirror the components and pages you show here, but I'm not seeing the same issue. Can you elaborate on the way your header and main page area are set up? In other words, are you using a master page and child page, or a page include, or some combination of the two? 
Photo of Bill Fox

Bill Fox

  • 8,044 Points 5k badge 2x thumb
I have a page header and a child page.  In the child page is an include of this page. The same behaviour exists for any sliding panel on the child page.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,670 Points 10k badge 2x thumb
I had tried to reproduce this in Brooklyn Update 1 Iter. 4 (9.5.4) - is that the version you're using as well?
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,670 Points 10k badge 2x thumb
I've been able to reproduce this. Specifically, when using a master page that has a custom header, and a child page that has a page include, which in turn has a sliding panel. 

I was able to use this inline CSS snippet to pad the top of the panel by 70 pixels, which brings the hidden contents down so that they're visible:
.sk-pagepanel-open {    
padding-top: 70px;
}
You might need to fine-tune the number of pixels to suit your page header's dimensions. I will log this as a product issue, and we will update this post when it has been addressed. At that point, you would want to remove the above.
(Edited)
Photo of Bill Fox

Bill Fox

  • 8,044 Points 5k badge 2x thumb
Ok.  Should I put the code in the custom css or on every page?
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,670 Points 10k badge 2x thumb
I would recommend that you keep its scope narrow by adding it to either the included page or on the master page, not to your theme. I don't believe it should cause any unexpected styling issues, but the code hasn't been thoroughly tested.
Photo of Bill Fox

Bill Fox

  • 8,044 Points 5k badge 2x thumb
By the way.  It did work.  However, I do look forward to a fix as pages without a header leaves a lot of unused real estate.  Is the fix something that we can see soon?
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,670 Points 10k badge 2x thumb
I'm not sure what the turnaround would be, but it is definitely on the radar. You might try placing the code in the master page that has the header, instead of anywhere else, since that's the only scenario it seems to be needed for. That should make it so that the extra padding is only added to the panel when the child page is loaded underneath the header. And, if 70 pixels is too much, 50 might be worth trying.
Photo of Bill Fox

Bill Fox

  • 8,044 Points 5k badge 2x thumb
Thanks
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,670 Points 10k badge 2x thumb
Official Response
The issue with page includes overlapping dropdowns (like the Search Results) has been resolved in Brooklyn Update 1, Iteration 5 which is now available from the Skuid Releases page at http://www.skuid.com/skuidreleases. As a reminder, Salesforce does not allow reverting back to prior versions of managed packages. Skuid always recommends installing new versions in a non-business critical sandbox environment to test all mission critical functionality before installing into a production environment. We also recommend that you update out of date themes when you upgrade.