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> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-float-label"> <div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="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> <label for="dd-city">Select a City</label>
</div> </div>
</div> </div>
@ -25,16 +25,16 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<div class="p-float-label"> <div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="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> <label for="dd-city">Select a City</label>
</div> </div>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-float-label"> <div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="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> <label for="dd-city">Select a City</label>
</div> </div>
</div> </div>
@ -60,8 +60,8 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<div class="p-float-label"> <div class="p-float-label w-full md:w-14rem">
<Dropdown v-model="selectedCity" inputId="dd-city" :options="cities" optionLabel="name" class="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> <label for="dd-city">Select a City</label>
</div> </div>
</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> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <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 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> <label for="ms-cities">MultiSelect</label>
</span> </span>
</div> </div>
@ -25,16 +25,16 @@ export default {
], ],
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <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 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> <label for="ms-cities">MultiSelect</label>
</span> </span>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <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 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> <label for="ms-cities">MultiSelect</label>
</span> </span>
</div> </div>
@ -60,8 +60,8 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <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 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> <label for="ms-cities">MultiSelect</label>
</span> </span>
</div> </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> <p>A floating label appears on top of the input field when focused.</p>
</DocSectionText> </DocSectionText>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </span>
</div> </div>
@ -21,16 +21,16 @@ export default {
selectedValue: null, selectedValue: null,
code: { code: {
basic: ` basic: `
<span class="p-float-label"> <span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </span>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </span>
</div> </div>
@ -55,8 +55,8 @@ export default {
composition: ` composition: `
<template> <template>
<div class="card flex justify-content-center"> <div class="card flex justify-content-center">
<span class="p-float-label"> <span class="p-float-label w-full md:w-20rem">
<TreeSelect v-model="selectedValue" :options="nodes" class="md:w-20rem w-full" /> <TreeSelect v-model="selectedValue" :options="nodes" class="w-full" />
<label>Tree Select</label> <label>Tree Select</label>
</span> </span>
</div> </div>