ODatepicker not shown as expected when used on a small modal

[pflirae]

Overview of the problem

Oruga version: 0.9.0-pre.2 Vuejs version: 3.5.6 OS/Browser: do not depend of browser

Description

When using ODatepicker is does not shown correctly when used with a small modal, it gets covevered by the modal instead of been displayed over the modal.

Steps to reproduce

With this code it can be reproduced:

<template>
  <div>
    <OModal v-model:active="isImportaRegistrosSIIActive"
            :cancelable="false"
            width="33rem"
    >
      <div class="modal-card" style="width: 33rem;">
        <header class="modal-card-head">
          <p class="modal-card-title" style="margin-bottom: 0">
            Importa registros de CV desde SII
          </p>
          <button class="delete" aria-label="close" @click="cierraModal" />
        </header>

        <section class="modal-card-body">
          <div class="container">
            <div class="columns">
              <OField label="Período" class="column is-5">
                <ODatepicker v-model="periodo_rcv" type="month" :date-formatter="formatoPeriodo" expanded />
              </OField>
              <OField label="Tipo de registro" class="column is-5">
                <OSelect v-model="tipo_registro" expanded>
                  <option value="1">Compras</option>
                  <option value="2">Ventas</option>
                </OSelect>
              </OField>
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <div style="width: 100%; text-align: right;">
            <OButton @click="cierraModal" class="mr-2">
              Cancelar
            </OButton>
            <OButton :disabled="en_proceso" variant="link" @click="importarRegistros">
              Importar
            </OButton>
          </div>
        </footer>
      </div>
    </OModal>
  </div>
</template>

This code shows the following modal:

When doing a click over the comboboxs it is displayed over de modal, as can be seen here:

When doing click over the Datepicker, it is shown inside the modal, as can be seen here:

Expected behavior

It is espected that the Datepicker is shown over the modal, as is the case with the combobox.

Actual behavior

As shown on problem description.

[pflirae]

With theme-bulma 0.4.2

[mlmoravek]

It can maybe be related to #107.

However, have you tried adding teleport to the datepicker component? While adding teleport you may encounter a bug in the datepicker teleport wrapper. If so, try adding this to your theme config:

datepicker: {
    dropdownClasses: {
          teleportClass: "datepicker",
     }
}

[pflirae]

I have tryed your sugestion, but obtained the same results described on las comment of issue #373 on oruga-ui/oruga, unfortunately it looks that this is a more complex bug.

[pflirae]

I have found that the z-index is in 20 for --bulma-dropdown-content-z whe displaying the datepicker, this value can be related to the problem of datepick.

[dylanson25]

Remove the <div class="container"> ... </div> as it is not necessary and can cause confusion when arranging elements. As for why the component is not being displayed, it’s not related toz-index issues; it’s related to overflow. You can modify it by accessing the element’s classes using ::deep.

In the <div class="modal-content">...</div>, change overflow: auto to overflow: visible

In the <div class="modal-card">...</div>, for some reason, there's a conflict; the original looks like this:

.modal-card {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - var(--bulma-modal-card-spacing));
    overflow:  hidden; 
    overflow-y: visible;
   }

In that declaration, the overflow-y should be visible, but as you can see, there’s still a scroll on the y-axis. However, if you remove the overflow: hidden, the component appears as follows:

I tried changing overflow: hidden to overflow-x: hidden, but for some reason, it causes conflicts and doesn't display correctly. It might be a good idea to test with other browsers to get more context.

   <OModal
                v-model:active="isImportaRegistrosSIIActive"
                :cancelable="false"
                width="33rem"
            >
                <div class="modal-card" style="width: 33rem">
                    <header class="modal-card-head">
                        <p class="modal-card-title" style="margin-bottom: 0">
                            Importa registros de CV desde SII
                        </p>
                        <button class="delete" aria-label="close" />
                    </header>

                    <section class="modal-card-body">
                        <div class="columns">
                            <OField label="Período" class="column is-5">
                                <ODatepicker type="month" expanded />
                            </OField>
                            <OField
                                label="Tipo de registro"
                                class="column is-5"
                            >
                                <OSelect expanded>
                                    <option value="1">Compras</option>
                                    <option value="2">Ventas</option>
                                </OSelect>
                            </OField>
                        </div>
                    </section>
                    <footer class="modal-card-foot">
                        <div style="width: 100%; text-align: right">
                            <OButton class="mr-2"> Cancelar </OButton>
                            <OButton variant="link"> Importar </OButton>
                        </div>
                    </footer>
                </div>
            </OModal>

cc: @pflirae

[pflirae]

@dylanson25 , thanks for your comments, just question, what version of oruga an theme are you using ? since I have not been able to reproduce your results, I am usin orugo 0.9.0-pre.2 and theme-bulma 0.4.3.

[dylanson25]

Here is the code. Keep in mind that this solution is specifically for your error, but it may be counterproductive in certain cases.

Code

https://github.com/dylanson25/theme-bulma/blob/107-Overlay-zindex/src/views/Home.vue

package.json

https://github.com/dylanson25/theme-bulma/blob/107-Overlay-zindex/package.json

cc: @pflirae

[pflirae]

Thanks @dylanson25, this is working great, it looks more a problem of oruga than a problem wiht the theme, it is a temporary fix that helps a lot.

[NisuDev]

Anyone have problems to get auth to SII using token? i got this {"id":"0","descripcion":"Data.TokenRecaptcha no puede estar vacio"} for last 5 days