vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #5089 - Float label demo is broken in mobile mode

pull/5098/head
tugcekucukoglu 2024-01-15 17:08:03 +03:00
parent 134d061f41
commit 22d7402e18
3 changed files with 24 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
doc/dropdown/FloatLabelDoc.vue
View File

@ -3,8 +3,8 @@
<p>A floating label appears on top of the input field when focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label>
</div>
</div>
@ -25,16 +25,16 @@ export default {
],
code: {
basic: `
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label>
</div>
`,
options: `
<template>
<div class="card flex justify-content-center">
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label>
</div>
</div>
@ -60,8 +60,8 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<div class="p-float-label">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full md:w-14rem" />
<div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="w-full" />
<label for="dd-city">Select a City</label>
</div>
</div>

16
doc/multiselect/FloatLabelDoc.vue
View File

@ -3,8 +3,8 @@
<p>A floating label appears on top of the input field when focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<span class="p-float-label">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
<span class="p-float-label w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label>
</span>
</div>
@ -25,16 +25,16 @@ export default {
],
code: {
basic: `
<span class="p-float-label">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
<span class="p-float-label w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label>
</span>
`,
options: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
<span class="p-float-label w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label>
</span>
</div>
@ -60,8 +60,8 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full md:w-20rem" />
<span class="p-float-label w-full md:w-20rem">
<MultiSelect id="ms-cities" v-model="selectedCities" :options="cities" optionLabel="name" :maxSelectedLabels="3" class="w-full" />
<label for="ms-cities">MultiSelect</label>
</span>
</div>

16
doc/treeselect/FloatLabelDoc.vue
View File

@ -3,8 +3,8 @@
<p>A floating label appears on top of the input field when focused.</p>
</DocSectionText>
<div class="card flex justify-content-center">
<span class="p-float-label">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
<span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label>
</span>
</div>
@ -21,16 +21,16 @@ export default {
selectedValue: null,
code: {
basic: `
<span class="p-float-label">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
<span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label>
</span>
`,
options: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
<span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label>
</span>
</div>
@ -55,8 +55,8 @@ export default {
composition: `
<template>
<div class="card flex justify-content-center">
<span class="p-float-label">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" />
<span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label>
</span>
</div>