Software Archive
Read-only legacy content
17061 Discussions

Header issue when set to Fixed

John_L_11
Beginner
482 Views

Under bootstrap framework, I have added a fixed header, a column and an accordion control. When we test in the simulator and device, part of the control is shifted upward under the header and the first item in the accordion/collapsible list keeps getting clipped. We've tried setting margins to the control but unable to find a work-around. Please see attached image showing the header clipping.

The only way around it is turn switch OFF the "fixed" setting on the header but we prefer the header be fixed in place like a normal app.

Any suggestions to correct this?

 

0 Kudos
6 Replies
PaulF_IntelCorp
Employee
482 Views

I'll ask our App Designer expert to take a look.

0 Kudos
Chris_P_Intel
Employee
482 Views

That doesn't look like Bootstrap. The collapsible is animating, which BS doesn't support. I suspect you are using JQueryMobile.

I tried what you described with Twitter Bootstrap, and it works great.  The fixed header does not overlap the accordion.

However, I do remember seeing something like this bug a long time ago.  Back before it was fixed the workaround was to put some sort of spacer - usually a row with a height of 40px (if I recall correctly). Or maybe a text control that had spaces. It would slip underneath the header, and keep the its neighbor from being overlapped.

Hope this helps,

 

Chris

 

0 Kudos
John_L_11
Beginner
482 Views

I haven't added jQuery Mobile to the project. I just created a new HTML5/Cordova project with App Designer toggled on. Then simply dragged a Header control, Column control and then the Accordion control there. Added a few more collapsible items to the Accordion, set the header to "Fixed" and launched the simulator. jQuery Mobile is not anywhere in the code that I can see. The Accordion is animating right out of the box in App Designer.

The overlap only happens in the Simulator and on the device. I've tried using the row as a spacer and setting height, margins, padding but nothing seems to work. When launched, The contents under the header are ignoring the header completely. As if it isn't there.

I will keep trying your spacer suggestion and hopefully hit a solution.

Thanks Chris.
 

0 Kudos
Chris_P_Intel
Employee
482 Views

If you create a _blank_ project you'll be asked what UI framework you want to use.  If you create a project from an an existing sample, you'll get whatever framework it was built with, typically App Framework. 

0 Kudos
John_L_11
Beginner
482 Views

That's pretty much what I did. New blank project, selected HTML5 + Cordova. Then started adding controls from App Designer.

0 Kudos
John_L_11
Beginner
482 Views

By the way, your suggestion with using a row at a 40px height seems to be working ok. Shows a 40px gap in the Design window but when launched, it does prevent the Accordion from getting tucked under the 'fixed' header.

Thanks for that work-around.

0 Kudos
Reply