Styles lost with bootstrap vue

[miller-kevin]

Hi, decided to try this out. I'm using a bootstrap vue table and want to give users the option to print it. Should just need bootstrap styles, but I can't seem to get it to work. Here's my configuration:

styles: [ 'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css' ]

And here's how the html is set up:

<b-table id="attendeeList" striped hover :items="event.TastingBookings" :fields="fields"></b-table>

Any idea what I'm doing wrong? It's outputting all on one line with no styles

[jofftiquez]

Hello @whoisme555 can you show me the actual configuration? Also, if you can provide a reproduction link that would be better.

[miller-kevin]

I copied the documentation the whole way through, with the only difference being including a newer version of the bootstrap css above

[jofftiquez]

No styles

With styles using the link you provided

See:

• The code
• The print screenshot
• The css link loaded by the network (same with the one in the code)

This is why I need your actual implementation. And a reproduction. If you can't provide one, I won't be able to help you. It's working for me and probably for everyone using this plugin.

Closing for now, kindly reopen if you have the snippet or reproduction link. Thanks.

[miller-kevin]

I don't know what you mean, I told you my implementation, but here's the full code. It's just the documentation code. It doesn't even match your "no styles" example. It's all on one line, no spacing or styling at all.

main js -

import Vue from 'vue';
import VueHtmlToPaper from 'vue-html-to-paper';

const options = {
  name: '_blank',
  specs: [
    'fullscreen=yes',
    'titlebar=yes',
    'scrollbars=yes'
  ],
  styles: [
    'https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'
  ]
}

Vue.use(VueHtmlToPaper, options);

component -

<b-table id="attendeeList" striped hover :items="event.TastingBookings" :fields="fields"></b-table>

<button @click="print">Print</button>

methods: { print () { // Pass the element id here this.$htmlToPaper('attendeeList'); } }

Ended up just using vue-print-nb, which worked.

[jofftiquez]

What I meant was it was working for me and for the rest for the people using this library. That's why I need to see your code. Why would send the documentation code? Lol. Anyway if you're not willing to cooperate, I'm glad you found something that works for you, which by the way is 1.14MB unpacked size.

[miller-kevin]

I sent the documentation code because, like I've said several times, that's the code I was using with a bootstrap-vue table. You asked for the code I was using, I sent the code I was using

[jofftiquez]

@whoisme555 sure. Thanks.

[miller-kevin]

Here is a link for reproduction.

https://jsfiddle.net/c38p9bos/

As I said in the title and in several posts, it does not work with bootstrap-vue, even when using the documentation code.

[m3hm3taydin]

Here is a link for reproduction.

https://jsfiddle.net/c38p9bos/

As I said in the title and in several posts, it does not work with bootstrap-vue, even when using the documentation code.

Hi,

It is working without any problem. Just put the id to a parent div. https://jsfiddle.net/yv3poecr/

[miller-kevin]

Here is a link for reproduction. https://jsfiddle.net/c38p9bos/ As I said in the title and in several posts, it does not work with bootstrap-vue, even when using the documentation code.

Hi,

It is working without any problem. Just put the id to a parent div. https://jsfiddle.net/yv3poecr/

Thank you!