Search code examples
javascriptbootstrap-4vuejs3

Vue Bootstrap radio buttons are not filled then print webpage

Greetings I have project that using vuejs and bootstrap-vue-3. I want possibility to user print data about company. So I created print scss for that. And also made the styles. I have problem the radio buttons are not filled then I want print the webpage

How it looks like of webpage webpage before printing

How it looks like then I want print the page Printing page As you can see(arrows are pointing to) the radio buttons are not filled.

How it looks like in inspector Radio button in inspector and in code

<form-group 
   :validator="v$.form.companyType"
    label="Company Type"
    v-if="!isUserParentCompanyAdmin"
>
    <b-form-radio-group
        v-model="form.companyType"
         :options="companyTypes"

     />
 </form-group>

If you check vue bootstrap docs page the filling working there.

Solution

  • So the problem was/is that in project I am using bootstrap scss not css. In scss you do not have specific style (-webkit-print-color-adjust: exact;) differences in input-select in css and scss bootstrap what is on css so printing of radio buttons can not be done.

    How to fix the problem: Two ways

    1. I am using Vitejs so you can use autoprefixer this package is adding properties needed for browsers like mention before on postcss thingy.

    2. Manually add to @ media print needed property

    .form-check-input:checked[type=radio] {
    -webkit-print-color-adjust: exact;   /* Chrome, Safari 6 – 15.3, Edge */
    print-color-adjust: exact;           /* Firefox 97+, Safari 15.4+ */
}