Datepicker header fields are not attached

[nioc]

Hello,

I have an issue with the datepicker component: month and year fields are not attached.

Following HTML rendered (differences seems to be <div class="pagination-list"> children) and screenshots

With Buefy (0.9.10) / bulma (0.9.3), I got this:

      <div class="field">
        <!---->
        <div class="field-body">
          <div class="field has-addons">
            <!---->
            <div class="control">
              <span class="select"><select>
                  <!---->
                  <option value="0"> January </option>
                  ...

            <div class="control">
              <span class="select">
                <select>
                  <!---->
                  <option value="2022"> 2022 </option>

And now with oruga-next: (0.5.4) / theme-bulma (0.2.3), it display like this:

    <div class="pagination-list">
      <div class="control select">
        <select class="">
          <!--v-if-->
          <option value="0">January</option>
          ...

      <div class="control select">
        <select class="">
          <!--v-if-->
          <option value="2022">2022</option>

I presume we need to have this missing part:

<div class="field">
  <div class="field-body">
    <div class="field has-addons">

I tried to add the Bulma field has-addons classes to the div.pagination-list using the listsClass prop but it overflows 😞:

Last (ugly) try, I updated the .dropdown-menu with min-width: 25rem ...

[nioc]

Update:

I cloned the theme-bulma repo, datepicker is ok.
In my application, I have a custom scss file in which I import the following:

@charset "utf-8";

@import "/node_modules/bulma/sass/utilities/initial-variables";
// also tryed @import "/node_modules/bulma/sass/utilities/_all";
// do some values tuning (color, ...)

@import "/node_modules/bulma/bulma.sass";
// do some component style tuning (colors, ...)

@import "/node_modules/@oruga-ui/theme-bulma/dist/scss/bulma";
// custom styles

I think I forget to import something... I'll give a try tonight.

[jtommy]

Month select is not attached to year but it looks ok

[jtommy]

Update:

I cloned the theme-bulma repo, datepicker is ok. In my application, I have a custom scss file in which I import the following:

@charset "utf-8";

@import "/node_modules/bulma/sass/utilities/initial-variables";
// also tryed @import "/node_modules/bulma/sass/utilities/_all";
// do some values tuning (color, ...)

@import "/node_modules/bulma/bulma.sass";
// do some component style tuning (colors, ...)

@import "/node_modules/@oruga-ui/theme-bulma/dist/scss/bulma";
// custom styles

I think I forget to import something... I'll give a try tonight.

https://github.com/oruga-ui/theme-bulma#customization-sassscss, did you try following it?

[nioc]

Yes of course!

I had to prefix with /node_modules/ for have it working (vite/rollup misconfig probably... does not matters).
But even in copying this, my code does not work.

I close the issue as it is a bug of mine, not your.

[nioc]

For information, I found the conceptual difference with buefy datepicker: with oruga/theme-bulma it needs to be in a component with enough horizontal space. This can be shown in the demo page, if you apply a max-width: 400px to the div.column, design breaks:

In my existing application, datepicker was along others fields (inside a div class="field is-grouped is-grouped-multiline is-block-mobile"):

So i have to found a way for handle parent datepicker spacing without the need of have large field.
Do you have an idea for that?

[nioc]

Same problem when using the :appendToBody="true" prop (just adding it to the demo repo datepicker component).

May be there is something to fix?

[jtommy]

For information, I found the conceptual difference with buefy datepicker: with oruga/theme-bulma it needs to be in a component with enough horizontal space. This can be shown in the demo page, if you apply a max-width: 400px to the div.column, design breaks:

In my existing application, datepicker was along others fields (inside a div class="field is-grouped is-grouped-multiline is-block-mobile"):

So i have to found a way for handle parent datepicker spacing without the need of have large field. Do you have an idea for that?

Thanks to reproduce it. I'll take a look

[nioc]

I have found a dirty workaround:

• add prop lists-class="field has-addons" in template
• override css:

  .datepicker .pagination-list {
    flex-wrap: nowrap; /* fix the horizontal spacing */
    .select {
      margin-left: 0; /* enhance field has-addons style */
      margin-right: 0;
    }
  }