events.action: opened
events.author: kollors
events.masked_author: username_0
events.text: 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.
events.title: Modal window does not work
events.type: issue
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: There might have been some changes to the new V4-alpha-6 classes.
  
  I will check on this later today.
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: @username_2, true, I just checked that the original fiddle is working with V4-alpha-6
events.type: comment
events.action: created
events.author: kollors
events.masked_author: username_0
events.text: **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;
  ```
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: Can't build your proj.. seems im lacking of a folder struct :)
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: try to remove jquery and bootstrap importing. they don't needed with vue+bootstrap-vue
events.type: comment
events.action: created
events.author: pi0
events.masked_author: username_3
events.text: Also it seems no js file in included in `index.html`
events.type: comment
events.action: created
events.author: nerdalertdk
events.masked_author: username_4
events.text: 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;
  }
  ```
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: it's strange, because this must be fixed by `.modal{display:block}` rule in `bootstrap-vue/dist/bootstrap-vue.css`
events.type: comment
events.action: created
events.author: pi0
events.masked_author: username_3
events.text: @username_4 Can you please create and share us a repo which can be used to reproduce that?
events.type: comment
events.action: created
events.author: nerdalertdk
events.masked_author: username_4
events.text: 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
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: @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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: pi0
events.masked_author: username_3
events.text: @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 :)
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: I'll check it out and submit a PR!
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: It looks like you're referring to the GitHub pages repository. House is that built? Plain html?
events.type: comment
events.action: created
events.author: pi0
events.masked_author: username_3
events.text: @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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: Sweet! I'm on my phone at the moment, so it can be hard to tell. Thanks again for the awesome lib!
events.type: comment
events.action: created
events.author: kollors
events.masked_author: username_0
events.text: Yes, it all worked after I replacedbootstrap/scss/bootstrap on bootstrap/dist/css/bootstrap.css. Original bootstrap.js, Tether and jQuery is left
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: So is everything working correctly now?
events.type: comment
events.action: created
events.author: kollors
events.masked_author: username_0
events.text: Only if you include bootstrap.css, not bootstrap.scss
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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).
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Maybe if the modal CSS in the `modal.vue` component used scoped CSS? which would ensure that the display block applied to the modal?
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: That actually seems like a smart move to avoid collisions for any `.modal` stylings.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Scoped CSS does have it's shortcomings (doesn't always fix everything), but it might work in this case.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Actually the current `modal.vue` component is using scoped CSS.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: Well, tried removing those lines, and that didn't do a thing.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: Yeah, that part shows it's just getting overwritten.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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).
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: ```
  
  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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: @username_5 could this duplicate logging be because you are emitting the same event back onto the component (i.e. `this.$emit`)?
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: That was my first thought, but I switched the event names to use an arbitrary prefix and I still saw duplication.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: That's a good idea. I'll cook something up and post a link.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Hmm yeah, maybe an issue should be opened with Vue.js?
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: That's what I'm thinking. I'll post the issue link here.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: Filed this transition group issue in the vuejs repository here: https://github.com/vuejs/vue/issues/5701
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Looks like an event for each transition in a group is ht intended behaviour https://github.com/vuejs/vue/issues/5701
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: Yeah, I believe that choosing Vue.js means you aren't playing the backwards compat game—since they already cut support for IE8
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: The only other thing I can think of is debouncing/throttling the transition handlers for the duration of the longest transition duration. :(
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: I've played that game before. My suggestion is not to even go down that road!
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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
      }
    }
  }
  ```
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: There's some good stuff inside the transition group at `transitionGroupVM.$options._renderChildren`, but best to respect those props as private.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Yeah, the only private prop you should trust is `this.__vue__`
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: 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.
events.type: comment
events.action: created
events.author: riker09
events.masked_author: username_6
events.text: 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?
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: @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; }
  ```
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: @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?
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: 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.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Ah, I wasn't sure about that.  good to know.
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: i think, what if we will change display to block not at the <style>, but at some code point (dynamically)?
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: Hmmm.... that might work.
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: @username_0 are you still having this issue with the latest release (v0.17.2)?
events.type: comment
events.action: created
events.author: sushain97
events.masked_author: username_7
events.text: I'm experiencing this issue with v0.17.1.
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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`
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: Perhaps I can look into the rollup plugin responsible for bundling the CSS. It isn't currently respecting the scoping.
events.type: comment
events.action: created
events.author: mosinve
events.masked_author: username_2
events.text: 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`
events.type: comment
events.action: created
events.author: alexsasharegan
events.masked_author: username_5
events.text: 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.
events.type: comment
events.action: closed
events.author: alexsasharegan
events.masked_author: username_5
events.type: issue
events.action: created
events.author: riker09
events.masked_author: username_6
events.text: I just wanted to confirm that updating to 0.18.0 fixed the issue, my modals are working again. yay!
events.type: comment
events.action: created
events.author: mariusa
events.masked_author: username_8
events.text: Got the same issue with 1.0.0-beta.7, fixed by adding
  .modal.show { display:block; }
events.type: comment
events.action: created
events.author: lakshyabatman
events.masked_author: username_9
events.text: 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)
events.type: comment
events.action: created
events.author: tmorehouse
events.masked_author: username_1
events.text: @username_9 Make sure you are including BootstrapVue's custom SCSS/CSS after Bootstrap's SCSS.
events.type: comment
events.action: created
events.author: lakshyabatman
events.masked_author: username_9
events.text: Both Scss files are in order and placed on the global style sheet. @username_1
events.type: comment