Nativescript绝对布局,父位置相对

Nativescript绝对布局,父位置相对,nativescript,nativescript-vue,absolutelayout,Nativescript,Nativescript Vue,Absolutelayout,我有一个绝对的布局,应该打开并浏览mdCardview,但它似乎试图压缩cardview中的所有内容。我试着弄乱CSS位置标签,但一点也没有改变 在下面的图片中,您可以看到save按钮,它也是一个绝对布局,这个按钮确实覆盖了所有其他组件 这是我的时间卡组件,它有一个按钮和一个绝对布局,可以用作弹出窗口 <template> <GridLayout class="dialog" rows="*, *" columns="*&q

我有一个绝对的布局,应该打开并浏览mdCardview,但它似乎试图压缩cardview中的所有内容。我试着弄乱CSS位置标签,但一点也没有改变

在下面的图片中,您可以看到save按钮,它也是一个绝对布局,这个按钮确实覆盖了所有其他组件

这是我的时间卡组件,它有一个按钮和一个绝对布局,可以用作弹出窗口

<template>
  <GridLayout class="dialog" rows="*, *" columns="*" :class="{ dialogOpen: dialogOpen }">
    <MDButton :text="label" @tap="showDialog()" class="fill" />
    <AbsoluteLayout class="dialog-wrapper">
      <StackLayout top="100" left="20" class="dialog">
        <TimePicker v-bind="$attrs" v-on="$listeners" />
        <MDButton text="Confirm" class="cancel" />
        <Button class="btn btn-outline" text="Cancel" @tap="closeDialog"></Button>
      </StackLayout>
    </AbsoluteLayout>
  </GridLayout>
</template>

 data: () => ({
    dialogOpen: false
  }),
  methods: {
    showDialog() {
      this.dialogOpen = true
    },
    closeDialog() {
      this.dialogOpen = false
    }
  }


FYI,{N}不支持位置属性。我不知道你为什么首先需要AbsoluteLayout,你能告诉我们预期的输出是什么,这可能会更容易理解。@Manoj所以我试图得到这样一种模式,它会在每个组件上弹出。我认为你根本不需要AbsoluteLayout来在组件上放置模式,只要GridLayout就行了。将模态和组件包装在网格中,将背景色添加到模态,在顶部垂直对齐,在水平方向向左对齐。仅供参考,{N}不支持位置属性。我不知道你为什么首先需要AbsoluteLayout,你能告诉我们预期的输出是什么,这可能会更容易理解。@Manoj所以我试图得到这样一种模式,它会在每个组件上弹出。我认为你根本不需要AbsoluteLayout来在组件上放置模式,只要GridLayout就行了。将模态和组件包装在网格中,为模态添加背景色,在顶部垂直对齐,在水平方向向左对齐。
  <StackLayout >
    <MDCardView elevation="5px" ripple="true" width="100%" margin="30px" class="cardview">
      <GridLayout rows="*, *" columns="*, *, *" class="card" width="auto">
        <StackLayout col="0" row="0">
          <Label class="title" :text="getNameAndDayOfMonth(day)" />
        </StackLayout>
        <MDButton col="2" row="0" text="fill" class="fill" @tap="showActions()" v-if="!show && Object.keys(value).length === 0" />
        <GridLayout row="1" colSpan="3" columns="auto, auto, *" rows="*, *" width="auto" v-else>
          <GridLayout row="0"  columns="auto, auto" rows="*" colSpan="2" width="auto">
            <slot  />
          </GridLayout>
          <MDButton text="clear" col="2" row="0" class="cancel" @tap="cancelTime()" />
          <template v-if="Object.keys(value).length !== 0">
            <Label :text="format(value.start)" col="0" row="1" />
            <Label :text="format(value.end)" col="1" row="1" />
          </template>
        </GridLayout>
      </GridLayout>
    </MDCardView>
  </StackLayout>
 <StackLayout>
            <AvailabilityCard v-for="(day, i) in days" :key="i" v-model="day.element" :day="day.date">
              <TimeCard col="0" label="begin" v-model="day.element.start"></TimeCard>
              <TimeCard col="1" label="eind" v-model="day.element.end"></TimeCard>
            </AvailabilityCard>
          </StackLayout>