Skip to content

Commit

Permalink
Fixed #5089 - Float label demo is broken in mobile mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@tugcekucukoglu
tugcekucukoglu committed Jan 15, 2024
1 parent 134d061 commit 22d7402
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 24 deletions.
16 changes: 8 additions & 8 deletions doc/dropdown/FloatLabelDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions doc/multiselect/FloatLabelDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions doc/treeselect/FloatLabelDoc.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit 22d7402

Please sign in to comment.