opened
kollors
username_0
When I copy example (https://jsfiddle.net/username_3/bofh9aaa) locally, it does not work on bootstrap 4.0.0-alpha.6 and bootstrap-vue 0.14.0. I get only a blackout of body.
Modal window does not work
issue
created
tmorehouse
username_1
There might have been some changes to the new V4-alpha-6 classes.

I will check on this later today.
comment
created
mosinve
username_2
It seems that you do soomething wrong, as jsfiddle uses bootstrap 4.0.0-alpha.6  and bootstrap-vue 0.14.0. So there's cannot be any new classes or whatever.
Show your failing files please.
comment
created
tmorehouse
username_1
@username_2, true, I just checked that the original fiddle is working with V4-alpha-6
comment
created
kollors
username_0
**package.json**
```javascript
{
  "name": "vue-seed",
  "version": "0.0.1",
  "scripts": {
    "build": "NODE_ENV=production webpack --progress",
    "postinstall": "bower i -F && typings i",
    "server:development": "HOST=$(hostname -I | grep -o '[0-9.]*' | head -1) npm run server:localhost",
    "server:localhost": "webpack-dev-server --progress",
    "start": "npm run server:localhost",
    "update": "ncu -a --packageFile package.json && ncu -a -m bower --packageFile bower.json"
  },
  "dependencies": {
    "bootstrap": "^4.0.0-alpha.6",
    "bootstrap-vue": "^0.14.0",
    "font-awesome": "^4.7.0",
    "jquery": "^3.2.1",
    "jquery-ui-dist": "^1.12.1",
    "socket.io-client": "^1.7.3",
    "vue": "^2.2.6",
    "vue-resource": "^1.3.1",
    "vue-router": "^2.5.1",
    "vuex": "^2.3.1"
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-flow-strip-types": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.4.0",
    "babel-preset-stage-3": "^6.24.1",
    "copy-webpack-plugin": "^4.0.1",
    "css-loader": "^0.28.0",
    "debug": "^2.6.4",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.11.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "node-sass": "^4.5.2",
    "postcss": "^5.2.17",
    "postcss-cssnext": "^2.10.0",
    "postcss-loader": "^1.3.3",
    "rimraf": "^2.6.1",
    "sass-loader": "^6.0.3",
    "style-loader": "^0.16.1",
    "url-loader": "^0.5.8",
    "vue-loader": "^11.3.4",
    "vue-template-compiler": "^2.2.6",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.4"
  }
}
```
**index.html**
```html
<!doctype html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue-seed</title>
    <link rel="icon" data-href="favicon.png" type="image/x-icon">
    <base href="/">
</head>
<body>
<div id="app">
    <b-btn @click="$root.$emit('show::modal','modal1')">Launch demo modal</b-btn>

    <!-- Main UI -->
    <div class="mt-3 mb-3">
        Submitted Names:
        <ul>
            <li v-for="n in names">{{n}}</li>
        </ul>
    </div>

    <!-- Modal Component -->
    <b-modal id="modal1" title="Submit your name" @ok="submit" @shown="clearName">

        <form @submit.stop.prevent="submit">
            <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input>
        </form>

    </b-modal>
</div>
<!--<router-view id="app"></router-view>-->
</body>
</html>
```
**index.js**
```javascript
Vue.use(BootstrapVue/*, VueResource, VueRouter, Vuex*/);

window.app = new Vue({
    el: '#app',
    data: {
        name: '',
        names: []
    },
    methods: {
        clearName() {
            this.name = '';
        },
        submit() {
            if (!this.name) {
                alert('Please enter your name');
                return e.cancel();
            }

            this.names.push(this.name);
            this.name = '';
        }
    }
});
```
**vendor.js**
```javascript
require('jquery');
require('jquery-ui-dist/jquery-ui');
require('bootstrap');

window.Vue = require('vue');
/*window.VueRouter = require('vue-router/dist/vue-router');
window.VueResource = require('vue-resource');
window.Vuex = require('vuex');*/
window.BootstrapVue = require('bootstrap-vue');

window.requireAll = requireContext => requireContext.keys().map(requireContext);
window.io = require('socket.io-client/dist/socket.io');
window.compose = (...fns) => value => fns.reduce((v, fn) => fn(v), value);

require('./vendor.scss');
```

**vendor.scss**
```css
@import '~jquery-ui-dist/jquery-ui.theme.css';
@import '~bootstrap/scss/bootstrap';
@import '~bootstrap-vue/dist/bootstrap-vue.css';
@import '~font-awesome/css/font-awesome.css';
```

**webpack.confog.json**
```javascript
process.env.NODE_ENV = process.env.NODE_ENV || 'development';
process.env.HOST = process.env.HOST || 'localhost';
process.env.PORT = process.env.PORT || '8001';

const path = require('path');
const rimraf = require('rimraf');

const CommonsChunkPlugin = require('webpack/lib/optimize/CommonsChunkPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ProvidePlugin = require('webpack/lib/ProvidePlugin');
const DefinePlugin = require('webpack/lib/DefinePlugin');
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin');

const paths = {
    context: path.join(__dirname, 'sources'),
    dist: path.join(__dirname, 'dist'),
    static: path.join(__dirname, 'static')
};

const devHash = process.env.NODE_ENV == 'development' ? '.[hash]' : '';

const webpackConfig = {
    context: paths.context,
    entry: {
        vendor: './vendor',
        app: './app'
    },
    output: {
        path: paths.dist,
        publicPath: '/',
        filename: path.join('assets', `[name]${devHash}.bundle.js`),
        chunkFilename: path.join('assets', `[name]${devHash}.chunk.js`)
    },
    resolve: {
        modules: ['bower_components', 'node_modules'],
        descriptionFiles: ['bower.json', 'package.json'],
        extensions: ['.js', '.json', '.vue'],
        alias: {
            vue: 'vue/dist/vue.js'
        }
    },
    module: {
        exprContextCritical: false,
        rules: [
            {
                test: /\.js$/,
                exclude: /(bower_components|node_modules)/,
                loader: 'babel-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                test: /\.vue$/,
                loader: 'vue-loader'
            },
            {
                test: /\.css$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader'
                })
            },
            {
                test: /\.s[ac]ss$/,
                loader: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: 'css-loader!postcss-loader!sass-loader'
                })
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)([?]?.*)$/,
                loader: 'url-loader',
                options: {
                    limit: '100000', // > 100kb -> file
                    name: path.join('assets', `[name]${devHash}.[ext]`)
                }
            }
        ]
    },
    plugins: [
        {
            apply: compiler => (rimraf.sync(compiler.options.output.path))
        },
        new CommonsChunkPlugin({
            name: ['app', 'vendor'],
            minChunks: 2
        }),
        new HtmlWebpackPlugin({
            template: path.join(paths.context, 'index.html')
        }),
        new CopyWebpackPlugin([{
            from: paths.static
        }]),
        new ExtractTextPlugin({
            filename: path.join('assets', `[name]${devHash}.bundle.css`),
            allChunks: true
        }),
        new ProvidePlugin({
            jQuery: 'jquery',
            Tether: 'tether'
        }),
        new DefinePlugin({
            'process.env': JSON.stringify(process.env)
        })
    ]
};

if (process.env.NODE_ENV == 'development') {
    webpackConfig.devServer = {
        contentBase: paths.dist,
        host: process.env.HOST,
        port: parseInt(process.env.PORT),
        stats: 'minimal',
        historyApiFallback: true
    };

    webpackConfig.devtool = 'source-map';
    webpackConfig.watch = true;
}

if (process.env.NODE_ENV == 'production') {
    webpackConfig.plugins.push(new UglifyJsPlugin({
        compress: {
            warnings: false,
            drop_console: true
        }
    }));
}

module.exports = webpackConfig;
```
comment
created
mosinve
username_2
Can't build your proj.. seems im lacking of a folder struct :)
comment
created
mosinve
username_2
try to remove jquery and bootstrap importing. they don't needed with vue+bootstrap-vue
comment
created
pi0
username_3
Also it seems no js file in included in `index.html`
comment
created
nerdalertdk
username_4
Yes, its not me that's crazy
Found out the display is set to none for .modal

if i unclick it in Chrome inspecter i shows.

![udklip](https://cloud.githubusercontent.com/assets/3426495/25420264/9e2695ea-2a57-11e7-824a-81a1a6ff3e3f.PNG)


```
.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    display: none;
    overflow: hidden;
    outline: 0;
}
```
comment
created
mosinve
username_2
it's strange, because this must be fixed by `.modal{display:block}` rule in `bootstrap-vue/dist/bootstrap-vue.css`
comment
created
pi0
username_3
@username_4 Can you please create and share us a repo which can be used to reproduce that?
comment
created
nerdalertdk
username_4
Hi

Since I use Coreui as style framework I don't thinit will help, fixed it by add .modal .show { display:block;}

So think it bootstrap related since both this and coreui have the bug
comment
created
mosinve
username_2
@username_0 , once more, if you don't need of the original Bootstrap js in your project, try to remove it and check the issue, please.
comment
created
alexsasharegan
username_5
Having the same issue. Not sure why the lib's `.modal{display:block;}` css is loading after the bootstrap css despite importing it last. I just fixed it by adding the d-block in yet another bunch of css that was loaded after bs & bs-vue.
comment
created
alexsasharegan
username_5
P.S. Mad props for removing the jQuery + Tether dependencies native to bootstrap!!!!! Got so excited when I read that. 

Many people may be coming from my position--normal bootstrap app, then add Vue, then add bootstrap-vue. This might be a good documentation addition: migrating plain bootstrap app to bootstrap-vue. Sounds like a short section (just remove bootstrap.js and it's dependencies if you're not using them, and add css), but could save some little gotchas and potential non-issues.
comment
created
pi0
username_3
@username_5 Happy hearing problem fixed :) If you can add some notes about that in `docs/setup.md` 
 file we can add it to docs helping others :)
comment
created
alexsasharegan
username_5
I'll check it out and submit a PR!
comment
created
alexsasharegan
username_5
It looks like you're referring to the GitHub pages repository. House is that built? Plain html?
comment
created
pi0
username_3
@username_5 Docs are written in Markdown (https://github.com/bootstrap-vue/bootstrap-vue/blob/master/docs/SETUP.md) and will be rendered/published to gh-pages.
comment
created
alexsasharegan
username_5
Sweet! I'm on my phone at the moment, so it can be hard to tell. Thanks again for the awesome lib!
comment
created
kollors
username_0
Yes, it all worked after I replacedbootstrap/scss/bootstrap on bootstrap/dist/css/bootstrap.css. Original bootstrap.js, Tether and jQuery is left
comment
created
tmorehouse
username_1
So is everything working correctly now?
comment
created
kollors
username_0
Only if you include bootstrap.css, not bootstrap.scss
comment
created
alexsasharegan
username_5
I second that. I'm pulling in the bootstrap scss file *before* I pull in the bootstrap-vue css, and I have to manually add the same `.modal { display: block; }` rule again. Perhaps that is a webpack loader issue—when mixing scss and css together the order may not be guaranteed or configurable (or most likely I don't have the correct webpack config to load in the right order).
comment
created
tmorehouse
username_1
Maybe if the modal CSS in the `modal.vue` component used scoped CSS? which would ensure that the display block applied to the modal?
comment
created
alexsasharegan
username_5
That actually seems like a smart move to avoid collisions for any `.modal` stylings.
comment
created
tmorehouse
username_1
Scoped CSS does have it's shortcomings (doesn't always fix everything), but it might work in this case.
comment
created
alexsasharegan
username_5
I'm certainly no expert on css, but I know that our offending css rule here is a flat class. Scoped css should offer enough specificity to create a sure override.
comment
created
tmorehouse
username_1
OR... rather than using `v-show` to show/hide the modal, we switch to `v-if` to avoid the `style="display: block;"` / `style="display: none;"` being applied/removed from the modal
comment
created
alexsasharegan
username_5
That might be nice. If the modal is never called into commission, it doesn't add any weight to your dom. I'm in favor of a lazy-injected modal.
comment
created
tmorehouse
username_1
Actually the current `modal.vue` component is using scoped CSS.
comment
created
alexsasharegan
username_5
Weird that I see none of the data-<hash> attributes on anything. I'm using v0.15.5, and I see it in the lib components file. Does it get stripped out at build, or is this some kind of plugin bug with Vue? I see no scoped attrs or selectors on the css.
comment
created
tmorehouse
username_1
Hmmmm not sure.

After looking at the official bootstrap .modal, they are setting the style attribute to either `display none` or `display block`.

Maybe `style` should be a `v-bind` with a computed style value, rather than using v-if to control display.
comment
created
alexsasharegan
username_5
I've never used Rollup before, but this could be stripping off vue's css scoping: https://github.com/bootstrap-vue/bootstrap-vue/blob/master/build/rollup.config.js#L28-L30
comment
created
alexsasharegan
username_5
Well, tried removing those lines, and that didn't do a thing.
comment
created
tmorehouse
username_1
Just made a modification to my copy of modal, which reactively sets the style to either `display: none` or `display: block`, rather than using `v-show`.

I think this might fix the issues.

https://github.com/username_1/bootstrap-vue/blob/modal-style/lib/components/modal.vue
comment
created
alexsasharegan
username_5
Looks like you guys are using css modules rather than the "simulated" scoped css that uses data attributes. I'm admittedly of css modules, but I would argue that it doesn't seem to play into other build systems as a component right now. Or maybe I just have no idea how to make use of css modules the way the lib is built.
comment
created
tmorehouse
username_1
I'm not sure if hte change I porposed in https://github.com/username_1/bootstrap-vue/blob/modal-style/lib/components/modal.vue will break the transitioning or not.

Will try a mockup.
comment
created
tmorehouse
username_1
I've done a mockup, but switched to setting the display style using transition events, and it appears to work.

https://jsfiddle.net/pyk5efjd/

I think the style part of the component can have the `.modal { display: block;}` removed
comment
created
alexsasharegan
username_5
Yeah, that part shows it's just getting overwritten.
comment
created
tmorehouse
username_1
Although the fade transition doesn't work as smooth.

I have tried using v-if (lazy loading), but it interrupts the transition  bit (and I bet for more complex modals if would be worse).
comment
created
alexsasharegan
username_5
P.S. When I bundle bootstrap-vue from `lib/index.js`, all the scoped css works with the data-v attributes. When I use the `.esm` version, I do not get scoped css.
comment
created
alexsasharegan
username_5
```

And here are the methods added:
```vue
handleBeforeEnter() {
    console.log('before-enter');
    this.$emit('before-enter', this);
},
handleAfterEnter() {
    console.log('after-enter');
    this.focusFirst();
    this.$emit('after-enter', this);
},
handleBeforeLeave() {
    console.log('before-leave');
    this.$emit('before-leave', this);
},
handleAfterLeave() {
    console.log('after-leave');
    this.$emit('after-leave', this);
}
```

And here is the weirdness I see:
![image](https://cloud.githubusercontent.com/assets/16269252/26190846/57121c64-3b60-11e7-8e58-ab4d0afbd115.png)

The events are correctly timed, but I can't figure out why they fire twice. I checked my own code to show and hide the modal, but there are no duplications there.
comment
created
tmorehouse
username_1
@username_5 could this duplicate logging be because you are emitting the same event back onto the component (i.e. `this.$emit`)?
comment
created
alexsasharegan
username_5
That was my first thought, but I switched the event names to use an arbitrary prefix and I still saw duplication.
comment
created
alexsasharegan
username_5
If the duplication isn't a byproduct of my own mistake, I feel it could likely be a bug in either the modal component (some kind of nextTick call maybe that halts the transition?) or in the transition-group eventing. I've searched for other instances of this, and I see some people get caught by children of an element also firing transition events. Maybe Vue hasn't or doesn't consolidate the transition events to the whole group.
comment
created
tmorehouse
username_1
You might want to test the `transition-group` duplicate by making  simple Vue.js fiddle with two components, one that has two transitions inside, and one that has just a single transition inside and see if the duplicates are emitted when the `transition-group` only contains a single transition item.
comment
created
alexsasharegan
username_5
That's a good idea. I'll cook something up and post a link.
comment
created
alexsasharegan
username_5
This is an ugly test, but you can play with this: https://jsfiddle.net/vtoy09cy/2/

Each transition element emits discrete transition hook events. One event per transition element! Is this expected behavior for Vue? It seems to contradict the group nature of this.
comment
created
tmorehouse
username_1
Hmm yeah, maybe an issue should be opened with Vue.js?
comment
created
alexsasharegan
username_5
That's what I'm thinking. I'll post the issue link here.
comment
created
tmorehouse
username_1
I suppose one workaround might be to have  counter for each event, and don't do anything until is reaches 2 (then reset the counter back to 0 once it hits 2).  But this would be kind of ugly.
comment
created
alexsasharegan
username_5
Filed this transition group issue in the vuejs repository here: https://github.com/vuejs/vue/issues/5701
comment
created
alexsasharegan
username_5
Agreed. That just feels like a hack. Then **_you_** have to keep track in your head how many transition elements to count. That could easily get out of sync as tweaks are made.
comment
created
tmorehouse
username_1
And one caveat with css based transition hooks for IE9:
https://github.com/vuejs/vue/issues/5525#issuecomment-297597977

Personally I am only supporting IE10 and up.
comment
created
tmorehouse
username_1
Looks like an event for each transition in a group is ht intended behaviour https://github.com/vuejs/vue/issues/5701
comment
created
alexsasharegan
username_5
Yeah, I believe that choosing Vue.js means you aren't playing the backwards compat game—since they already cut support for IE8
comment
created
alexsasharegan
username_5
Yeah, intended behavior. I figured the events needed to be discrete for manipulation. I'm hoping the genius of You recommends a good event aggregation pattern.
comment
created
tmorehouse
username_1
The only other thing I can think of is debouncing/throttling the transition handlers for the duration of the longest transition duration. :(
comment
created
alexsasharegan
username_5
I've played that game before. My suggestion is not to even go down that road!
comment
created
alexsasharegan
username_5
comment
created
alexsasharegan
username_5
Think like so: every transition element needs a unique key, so prefix it with `trans-` or whatever. Then loop like so:

```js
import Vue from 'vue'
const transitionRegex = /^trans-.+/

{
  computed: {
    numTransitionEls() {
      return this.$children.filter(node => node instanceof Vue && transitionRegex.test(node.$vnode.key)).length
    }
  }
}
```
comment
created
alexsasharegan
username_5
Yeah, it gets way more tricky when you dive in. The vm's child will be the transition-group. Manually is probably the easiest thing you can do.
comment
created
alexsasharegan
username_5
There's some good stuff inside the transition group at `transitionGroupVM.$options._renderChildren`, but best to respect those props as private.
comment
created
tmorehouse
username_1
Yeah, the only private prop you should trust is `this.__vue__`
comment
created
tmorehouse
username_1
The original might be due to scoped CSS and certain bundlers not "scoping" the CSS.

Maybe if we add a new class to the component and CSS (say `.b-modal`), to "scope" the CSS display property.
comment
created
riker09
username_6
Hello there. I recently made it back from my parent time (Elternzeit) which was basically a two month break from work. I used version 0.9.x before and modals were working fine. Now I updated this library on my project and modals don't work anymore? Is there a workaround yet?
comment
created
alexsasharegan
username_5
@username_6, I think the thing that is still broken is CSS for the `.modal` display property. The rollup bundling doesn't seem to respect the `scoped` attribute for me. Are you getting the backdrop working on show, but no modal content? If so, add this to your CSS (that's loaded _after_ bootstrap):

```css
.modal { display: block; }
```
comment
created
tmorehouse
username_1
@username_2 @username_5 @username_3 

Just thinking... rather than using `v-show` on modal, what about using `:style=` to set `display` to `none` or `block`, which might negate the need for the scoped CSS?
comment
created
mosinve
username_2
v-show or v-if - allow to use native Vue transitions. 
If we set style directly, then we must implement custom transitions.
Such solution was at the beginning of the modal component.
comment
created
tmorehouse
username_1
Ah, I wasn't sure about that.  good to know.
comment
created
mosinve
username_2
i think, what if we will change display to block not at the <style>, but at some code point (dynamically)?
comment
created
tmorehouse
username_1
Hmmm.... that might work.
comment
created
tmorehouse
username_1
@username_0 are you still having this issue with the latest release (v0.17.2)?
comment
created
sushain97
username_7
I'm experiencing this issue with v0.17.1.
comment
created
alexsasharegan
username_5
I don't believe the slide from top transition is built into the component due to using Vue transitions. It might be possible, but I believe the complication is Vue's show directive uses inline `display: none`
comment
created
alexsasharegan
username_5
Perhaps I can look into the rollup plugin responsible for bundling the CSS. It isn't currently respecting the scoping.
comment
created
mosinve
username_2
Slide from top transition is a default behavior from BS4.
Vue v-show uses **inline** `display:none` to hide element, and just remove it to show. 
Otherwise at BS4 **inline** style `display:none` used to hide modal, and **inline** `display:block` used to show with class `.show`
comment
created
alexsasharegan
username_5
Looks like the current version of the `rollup-plugin-vue` now supports generating the pseudo-scoped css. I would wager the issues around `.modal {display: block;}` should now be gone due to the scoping specificity.

I'm going to close this as the problem _should_ be solved, and this issue is overcrowded and stale. If your problem persists, please upgrade to the latest version of bootstrap-vue `v0.18.0`. If your problem still persists, please open a new issue with any updated details.
comment
closed
alexsasharegan
username_5
issue
created
riker09
username_6
I just wanted to confirm that updating to 0.18.0 fixed the issue, my modals are working again. yay!
comment
created
mariusa
username_8
Got the same issue with 1.0.0-beta.7, fixed by adding
.modal.show { display:block; }
comment
created
lakshyabatman
username_9
Hello, I'm facing the same issue with the 2.13 version.

![vue-issue](https://user-images.githubusercontent.com/29687362/82753361-8f442900-9de2-11ea-95a9-9b859d1e2bcc.gif)
comment
created
tmorehouse
username_1
@username_9 Make sure you are including BootstrapVue's custom SCSS/CSS after Bootstrap's SCSS.
comment
created
lakshyabatman
username_9
Both Scss files are in order and placed on the global style sheet. @username_1
comment