Styling not applied to header on iOS

[lukeramsden]

For some reason, none of the styles I'm putting on the class are actually being applied on iOS. It's applying to the text, but just not the header.

Here's my XML:

<accordion:Accordion items="{{ items }}" class="accordion" allowMultiple="false">
  <accordion:Accordion.headerTemplate>
    <StackLayout>
      <GridLayout rows="*" columns="2*, 2*, 2*, 20*, *" class="header">
        <StackLayout row="0" col="1" colSpan="3" class="header-bg" />
        <StackLayout row="0" col="0" colSpan="2" class="key-bg" verticalAlignment="middle">
          <Label text="{{ key }}" class="key" textWrap="false" />
        </StackLayout>
        <StackLayout row="0" col="2" colSpan="2" verticalAlignment="middle">
          <Label text="{{ title }}" class="title" textWrap="true" />
        </StackLayout>
      </GridLayout>
    </StackLayout>
  </accordion:Accordion.headerTemplate>
  <accordion:Accordion.itemTemplate>
    <Label text="{{ text }}" class="text" textWrap="true" />
  </accordion:Accordion.itemTemplate>
</accordion:Accordion>

and my CSS:

Page {
  background-color: #F3721F;
}

.header {
  margin: 10;
  margin-left: 0;
}

.header-bg {
  padding: 25, 5;
  background-color: #151515;
  border-color: #FFFFFF;
  border-width: 1;
}

.title {
  font-size: 16px;
  color: #FFFFFF;
  margin: 0, 10;
}

.key-bg {
  background-color: #F3721F;
  border-color: #FFFFFF;
  border-width: 1;
  border-radius: 50%;
  width: 35;
  height: 35;
  padding: 0;
  margin: 1;
}

.key {
  font-family: 'Montserrat';
  text-align: center;
  vertical-align: middle;
  color: #FFFFFF;
  font-size: 18px;
  margin-top: 1;
}

.text {
  border-top-color: #FFFFFF;
  border-top-width: 1;
  border-bottom-color: #FFFFFF;
  border-bottom-width: 1;
  color: #FFFFFF;
  padding: 10, 40;
  background-color: #151515;
  vertical-align: middle;
  horizontal-align: center;
}

[thegermin8er]

I have the same problem, did you solve it?

[lukeramsden]

@thegermin8er Nope, ended up making my own accordion system with a repeater and nativescript-effects to toggle an item open or closed when tapped.

[triniwiz]

I'll look into this but styling works fine for me with both platforms the only difference is i use angular

[lukeramsden]

Yeah this was NS 2 so it might be fixed now.

[triniwiz]

Ok well if you want to try again let me know :)

[thegermin8er]

@lukeramsden thanks for your answer and suggestion.

Hi triniwiz, I use angular also.

The problem I'm having is with the height of the header. It looks like the ng-template adds a wrapper layoutcontainer and the header is hidden behind the item wrapper.
How do I access the wrappers?

Also when I have a item open and scroll up, the header of that item stops at the top and blocking things beneath.

https://github.com/thegermin8er/nsng-accordion-test

[triniwiz]

Add headerHeight to the accordion element or header-height to the accordion element class Sent from Yahoo Mail for iPhone On Wednesday, September 27, 2017, 7:25 AM, thegermin8er <notifications@github.com> wrote: @lukeramsden thanks for your answer and suggestion. Hi triniwiz, I use angular also. The problem I'm having is with the height of the header. It looks like the ng-template adds a wrapper layoutcontainer and the header is hidden behind the item wrapper. How do I access the wrappers? Also when I have a item open and scroll up, the header of that item stops at the top and blocking things beneath. https://github.com/thegermin8er/nsng-accordion-test — You are receiving this because you commented. Reply to this email directly, view it on GitHub, or mute the thread.

[thegermin8er]

Ok, thank you