topic That doesn't look like in Software Archive

Header issue when set to Fixed

John_L_11 — Wed, 19 Oct 2016 04:08:14 GMT

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?

I'll ask our App Designer

PaulF_IntelCorp — Wed, 19 Oct 2016 23:38:17 GMT

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

That doesn't look like

Chris_P_Intel — Wed, 19 Oct 2016 23:50:11 GMT

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

I haven't added jQuery Mobile

John_L_11 — Thu, 20 Oct 2016 01:05:21 GMT

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.

If you create a _blank_

Chris_P_Intel — Thu, 20 Oct 2016 18:10:30 GMT

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.

That's pretty much what I did

John_L_11 — Thu, 20 Oct 2016 18:38:56 GMT

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

By the way, your suggestion

John_L_11 — Thu, 20 Oct 2016 18:58:11 GMT

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.