1

I have an AbsoluteLayout that is supposed to open and go over a mdCardview, but it seems that it is trying to squeeze everything inside the cardview. I tried messing with the CSS position tag, but it doesn't change one bit.

In the picture below you can see the save button which is also an absolutelayout, this one does go over every other component.

This is my TimeCard component which has a button and a absolute layout that would be used as a popup

<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
    }
  }

This is my availabilityCard which contains a slot with the timecard component

  <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>

This is the parent component availability that defines the timecard component

 <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>

Availability component screen:
Availability component screen

Jason Aller
  • 3,541
  • 28
  • 38
  • 38
mm da
  • 55
  • 7
  • FYI, {N} do not support position attribute. I'm not sure why you need AbsoluteLayout in first place, can you show us what's the expected output, that might make it easier to understand. – Manoj Apr 21 '20 at 21:42
  • @Manoj So i'm trying to get something like this http://prntscr.com/s3t10j A kind of modal that pops ontop of every component. – mm da Apr 22 '20 at 08:15
  • I don't think you need AbsoluteLayout at all to place a modal over component, just GridLayout should do the job. Wrap your modal & component within a Grid, add background color to modal, vertically align it on top and horizontally to left. – Manoj Apr 22 '20 at 14:46

0 Answers0