Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styles not applied in apk #176

Closed
vallemar opened this issue Dec 11, 2022 · 1 comment
Closed

Styles not applied in apk #176

vallemar opened this issue Dec 11, 2022 · 1 comment

Comments

@vallemar
Copy link
Contributor

When I build the apk there are some styles that are lost, an example is this:

Dev mode:
dev

APK mode:
apk

I open this error here and not in NativeScript/tailwind because I think the cause is when you apply a style to a vue component so that it inherits within the component. For example, the following example shows the Steps component that the styles that are applied to the component itself do not seem to be applied

<template>
    <GridLayout rows="*" class="px-3 pt-4">

      <StackLayout height="100%">
        <FlexboxLayout
            class="items-center justify-between p-1">
          <Back horizontalAlignment="left"></Back>
          <FlexboxLayout
              class="bg-secondary rounded-full w-1/2 text-center justify-center items-center box-shadow"
              height="46">
            <Label col="1" text="Reservar Vuelta" class="mx-2 text-xl text-center" verticalAlignment="center"></Label>
            <Label col="2" text=">" class=""></Label>
          </FlexboxLayout>
        </FlexboxLayout>

        <Steps class="w-1/2 mt-8" :steps="3" :current="currentView + 1"></Steps>    <!-- THIS STYLES -->
       </StackLayout>
   </GridLayout>
  </Page>
</template>
// Steps.vue
<template>
  <StackLayout>
    <FlexboxLayout>
      <GridLayout v-for="index in steps"
                  :key="index"
                  height="7"
                  :class="[index <= current ? 'bg-primary' : 'bg-secondary']"
                  class="rounded-full mx-2"></GridLayout>
    </FlexboxLayout>
    <Label class="text-center mt-4 text-secondary" :text="`Step ${current} of ${steps}`"></Label>
  </StackLayout>
</template>

<script setup lang="ts">

const {steps, current} = defineProps({
  steps: Number,
  current: {
    type: Number,
    default: 1
  }
})

</script>

It is also happening to me in this component, the height and width are not applied (this is not tailwind because what I think is something general of the vue components and the styles)

      <Icon @tap="onSettings" verticalAlignment="center" class="mr-2" height="38" widht="38" icon="user-dark"
            :supportDarkMode="false"></Icon>
@vallemar
Copy link
Contributor Author

I confused the repository, I created the issue in the ns-vue repository

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant