ui-select list visibility shift inside dialog on mobile

[jfrag]

Hi,

I made a ui-dialog with a ui-grid of ui-select.

On mobile the list of the ui-select appear in the wrong place.

<ui-dialog scrollable>
  <ui-dialog-title>Dialog title</ui-dialog-title>
  <ui-dialog-content>
    <ui-tabs>
      <ui-tab>Contrôles avant lancement</ui-tab>
      <ui-tab>Lancement</ui-tab>
    </ui-tabs>
    <ui-panels>
      <ui-panel>
        <ui-grid>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <h3>CCP: intégrité tamis</h3>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <ui-select :with-leading-icon="this.production.correctiveActions.datas.tamis_integrity_start != undefined" ref="tamis_integrity_start" @selected="needCorrectiveActions($event, 'tamis_integrity_start')" required fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Intégrité du tamis
              <template v-if="this.production.correctiveActions.datas.tamis_integrity_start" #icon>
                <ui-select-icon @click="showCorrectiveActions($event, 'tamis_integrity_start')">flaky</ui-select-icon>
              </template>
            </ui-select>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <ui-select required fixed fullwidth :options="configurations.boolean" :defaultValue="configurations.defaultVal" default-label=" ">
              &Eacute;lément(s) retrouvé sur le tamis
            </ui-select>
          </ui-grid-cell>
          <ui-grid-cell columns="12" v-if="production.launchBatch.tamis_element_start === '1'">
            <ui-textfield fullwidth>&Eacute;lément(s) retrouvé(s)</ui-textfield>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <h3>Contrôle impression</h3>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:12, tablet:8, phone:4}">
            <ui-select required fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Qualité/Paramétrage impression
            </ui-select>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:6, tablet:8, phone:4}">
            <h3>CCP: bon fonctionnement détecteur de métaux début de conditionnement</h3>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:4, tablet:8, phone:4}">
            <ui-select required helper-text-id="debut-ferreux" fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Ferreux
            </ui-select>
            <ui-select-helper visible id="debut-ferreux">2mm - N°F414</ui-select-helper>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:4, tablet:8, phone:4}">
            <ui-select required helper-text-id="debut-nonferreux" fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Non ferreux
            </ui-select>
            <ui-select-helper visible id="debut-nonferreux">2,5mm - N°B083</ui-select-helper>
          </ui-grid-cell>
          <ui-grid-cell :columns="{default:4, tablet:8, phone:4}">
            <ui-select required helper-text-id="debut-inox" fixed fullwidth :options="configurations.conformite" :defaultValue="configurations.defaultVal" default-label=" ">
              Inox
            </ui-select>
            <ui-select-helper visible id="debut-inox">2,5mm - N°S103</ui-select-helper>
          </ui-grid-cell>
        </ui-grid>
      </ui-panel>
    </ui-panels>
  </ui-dialog-content>
</ui-dialog>

[elf-mouse]

Hi jfrag,

You should remove ui-select fixed prop, try again.

[jfrag]

Hi @elf-mouse

Problem solved (bad integration...)

Soory & THX

[jfrag]

I have a problem, if i remove the fixed attribute on ui-select, the overflow inside the ui-dialog don't work anymore

[jfrag]

I have a css fix

Don't set the fixed attr and put the css below in your stylesheet

@media (min-width:961px)  { 
  .mdc-select__menu.mdc-menu-surface--is-open-below{position:fixed !important;width:auto;}
}

Waiting for a cleaner solution

[elf-mouse]

Hi @jfrag ,

This bug has been fixed! You can try balm-ui@10 and enjoy it :)

Thanks again~