Modal is stop scrolling after open the other modal nested of it
See original GitHub issueI have two modal (i call it dialog) that is nested from one to the other. Let call them the ZFirstDialog and the ZSecondDialog. The ZFirstDialog is very long dialog that we can scroll on it. In the middle of ZFirstDialog we have a button that call the ZSecondDialog. The issue is here :
-
When i call the ZSecondDialog the ZFirstDialog (behind of it) is (auto) scroll up the top. My expectation is the ZFirstDialog is just stay in there while the ZSecondDialog is opened.
-
While the ZSecondDialog is still opened, i can scroll on it. My Expectation is the ZSecondDialog cannot scrolled. Since the ZSecondDialog is not as long as the ZFirstDialog.
-
After we close the ZSecondDialog, the ZFirstDialog is stuck and cannot scroll anymore. This is the main issue (bug).
here is the sample code that you can use to try
This is the ZContent.vue
where we can find the button of ZFirstDialog
<template>
<div>
<div class="tengap"><h4>Some Label here</h4></div>
<b-btn v-b-modal="'z-first-dialog'" variant="primary">Call First Modal</b-btn>
<z-first-dialog></z-first-dialog>
</div>
</template>
<script>
import ZFirstDialog from './ZFirstDialog'
export default {
components: {
ZFirstDialog
}
}
</script>
This is the ZFirstDialog.vue
. Sorry for the long code.
<template>
<b-modal
id="z-first-dialog"
ref="z-first-dialog"
title="Create The something First">
<form @submit.stop.prevent="handleSubmit">
<b-form-group
description="blablabla"
id="exampleInputGroup1"
label="First Field"
label-for="exampleInput1">
<b-form-input
id="exampleInput1"
type="text"
required
placeholder="The First Field is here">
</b-form-input>
</b-form-group>
<b-input-group left="$">
<b-form-input></b-form-input>
</b-input-group>
<b-form-group
description="blablabla"
id="exampleInputGroup1"
label="Another Field"
label-for="exampleInput1">
<b-form-input
id="exampleInput1"
type="text"
required
placeholder="The Another Field is here">
</b-form-input>
</b-form-group>
<b-form-group
description="blablabla"
id="exampleInputGroup1"
label="Just want to make sure its long enough Field"
label-for="exampleInput1">
<b-form-input
id="exampleInput1"
type="text"
required
placeholder="The First Field is here">
</b-form-input>
</b-form-group>
<b-input-group right=".00">
<b-form-input></b-form-input>
</b-input-group>
<b-form-group
description="blablabla"
id="exampleInputGroup1"
label="Blablab Field"
label-for="exampleInput1">
<b-form-input
id="exampleInput1"
type="text"
required
placeholder="The First Field is here">
</b-form-input>
</b-form-group>
<b-form-group
id="exampleInputGroup3"
label="Components"
label-for="exampleInput3">
<b-btn v-b-modal="'z-second-dialog'" variant="primary" >Call the second Modal</b-btn>
<z-second-dialog></z-second-dialog>
<b-table :fields="fields" :items="records" bordered>
<template slot="quantity" scope="data">
{{data.value}} {{data.item.unit}}
</template>
</b-table>
</b-form-group>
<b-form-checkbox id="checkbox1" value="accepted" unchecked-value="not_accepted">
I accept terms and use
</b-form-checkbox>
<div>State: <strong>AAAA</strong></div>
<b-list-group>
<b-list-group-item>
Awesome list
</b-list-group-item>
<b-list-group-item href="#">
Action links are easy
</b-list-group-item>
<b-list-group-item>
This is a text only item
</b-list-group-item>
</b-list-group>
<b-form-group
description="blablabla"
id="exampleInputGroup1"
label="First Field"
label-for="exampleInput1">
<b-form-input
id="exampleInput1"
type="text"
required
placeholder="The First Field is here">
</b-form-input>
</b-form-group>
<b-form-group
description="blablabla"
id="exampleInputGroup1"
label="First Field"
label-for="exampleInput1">
<b-form-input
id="exampleInput1"
type="text"
required
placeholder="The First Field is here">
</b-form-input>
</b-form-group>
</form>
</b-modal>
</template>
<script>
import ZSecondDialog from './ZSecondDialog'
export default {
components: {
ZSecondDialog
},
data () {
return {
fields: {
code: { label: 'Code' },
name: { label: 'Name' },
quantity: { label: 'Qty' }
},
records: [
{ code: 'RM_13123', name: 'First', quantity: 12, unit: 'kg' },
{ code: 'RM_334422', name: 'Second', quantity: 8, unit: 'pcs' },
{ code: 'RM_72842', name: 'Third', quantity: 4, unit: 'lt' }
]
}
}
}
</script>
And the last one is ZSecondDialog.vue
<template>
<b-modal
id="z-second-dialog"
ref="z-second-dialog"
title="Add new Soemthing">
<form @submit.stop.prevent="handleSubmit">
<b-form-group
id="exampleInputGroup3"
label="Nama "
label-for="exampleInput3">
<b-form-select
id="exampleInput3"
:options="rawMaterials"
required>
</b-form-select>
</b-form-group>
<b-form-group
id="exampleInputGroup2"
label="Quantity"
label-for="exampleInput2">
<b-input-group
right="Kg">
<b-form-input
id="exampleInput2"
type="text"
required
placeholder="Amount of something">
</b-form-input>
</b-input-group>
</b-form-group>
</form>
</b-modal>
</template>
<script>
export default {
data () {
return {
rawMaterials: ['The first', 'second', 'thirt', 'Fourth']
}
}
}
</script>
in the package.json
"dependencies": {
"bootstrap-vue": "^1.0.0-beta.6",
"vue": "^2.4.2"
},
Thank you for this awesome project…!!
Issue Analytics
- State:
- Created 6 years ago
- Comments:5 (3 by maintainers)
Bootstrap doesn’t allow nested modals or multiple open modals at the same time.
Both Bootstrap V3 and Bootstrap V4 do not support multiple modals open: https://getbootstrap.com/docs/4.0/components/modal/#how-it-works
Since Bootstrap-Vue tries to follow Bootstrap V4 features as close as possible, Bootstrap-Vue doesn’t support staked modals. Bootstrap-Vue uses Bootstrap V4 CSS which dictates what can and can’t be done.