The webpage fails to display Vue Bootstrap radio buttons in a filled state

Hey there! I've been working on a project using vuejs and bootstrap-vue-3. My goal is to allow users to print data about the company, so I created a print scss file for that purpose and added some styles. However, I'm facing an issue where the radio buttons are not filled when I try to print the webpage.

Here's how the webpage looks like: https://i.sstatic.net/SCTzj.png

And here's how it looks like when I try to print the page: https://i.sstatic.net/vk42A.png You can see (arrows pointing to) that the radio buttons are not filled.

This is how it appears in the inspector: https://i.sstatic.net/yKeda.png and this is the relevant code snippet:

<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 refer to the vue bootstrap docs page, you'll see that the filling functionality works there as expected.

javascriptbootstrap-4vuejs3

Answer №1

The issue I encountered in my project is due to the use of bootstrap scss instead of css. Unlike regular CSS, scss does not have a specific style (-webkit-print-color-adjust: exact;) necessary for printing radio buttons.

To resolve this problem, there are two solutions:

  1. For Vitejs users, you can utilize autoprefixer. This package automatically adds required properties for various browsers, including the one mentioned in the previous postcss solution.

  2. The alternative method is to manually add the necessary property within @media print.

.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+ */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unlock the secrets of creating an interactive chat room effortlessly by harnessing the power of J

In search of implementing a unique chat room using PHP and JavaScript (Jquery) offering group chat as well as private chat functionalities. The challenge lies in finding a way to continuously update the interface seamlessly, while also displaying 'X ...

phpjavascriptjqueryajaxajax-polling

Reset the checked state in React JSX to false by using a reset button

After attempting to reset selected radio buttons on this list, it seems like the change I made from {checked} to {user.checked} in input check is causing issues. This modification can be traced back to UserListElement.tsx In an effort to resolve this issu ...

javascriptreactjscheckboxreact-hooksuse-effect

Check for mobile browser without having to refresh the page

Currently, I am facing an issue with closing the sidebar when the user clicks on Click Me button in mobile view using flexbox layout. The problem arises because the page needs to be refreshed for it to recognize if it's in mobile mode or not by utiliz ...

javascriptangularflexbox

Refreshing a model using angular.js

I am attempting to reset values in the following way: $scope.initial = [ { data1: 10, data2: 20 } ]; $scope.datas= $scope.initial; $scope.reset = function(){ $scope.datas = $scope.initial; } However, this code ...

javascriptangularjs

Tips for changing the dimensions of the canvas?

I'm struggling to display a photo captured from the webcam. The sizes are not matching up, and I can't pinpoint where the size is defined in the code. https://i.stack.imgur.com/Is921.png The camera view is on the left, while the photo should be ...

javascripthtmlcss

Troubleshooting Issue: Unable to Retrieve Loaded Record in Ember.js

I am facing an issue with accessing properties to change the header of my RESTAdapter after loading the user. Do you have any ideas why that might be happening? The code snippet in question is as follows: var user = ''; App.MainRoute = Ember.R ...

javascriptember.js

When I incorporate the h-100 class, my content expands beyond the container on mobile devices

Struggling with implementing bootstrap 4.0? I'm attempting to utilize h-100 to ensure that the background stretches to the bottom of the user's screen. I've experimented with clearfix, fluid-containers, and more in an effort to make it work ...

htmlcssbootstrap-4containersgrid-layout

The Controller is encountering an empty child array when attempting to JSON.stringify it

After examining numerous similar questions, I am uncertain about what sets my configuration apart. I've experimented with various ajax data variations and JSON formatting methods, but the current approach seems to be the closest match. This issue is ...

javascriptjqueryjsonajaxasp.net-mvc

What is the best way to render components with unique keys?

I am currently working on a dashboard and would like to incorporate the functionalities of React-Grid-Layout from this link. However, I am facing an issue where the components are only rendered if they have been favorited. In order to utilize the grid layo ...

javascriptreactjsnext.js

A small computation

How can I modify this code to calculate the total price #ttc by multiplying #totalcout with #marge Currently, I am able to add amounts when checkboxes are clicked, but I am struggling with integrating the multiplication for calculating the Total Price (TT ...

javascriptjquery

How can you access the query in Next.js API when req.query is initially set to undefined?

Is there a way to compare the value of req.query with the cookies on the site, even when req.query is undefined upon initial load? How can this be addressed? export default async function handler(req, res) { const { method } = req; const userId = req ...

javascriptnext.js

What is the functionality of require(../) in node.js?

When encountering var foo=require(../), what specific modules does node.js search for? It may appear to look in the directory above the current one, but what exactly is it seeking and how does it function? Is there a comparison with include in C or impor ...

javascriptnode.js

Struggling to update the previousCode state with the useState hook in React

I'm having trouble understanding why the state isn't changing when using setPreviousCode in React and JavaScript. I'm trying to store the previously scanned text in the variable previousCode. import React, { useEffect, useState } from " ...

javascriptreactjsreact-hooks

What is the best way to show only a section of a background in CSS?

Being a novice in HTML and CSS, I am facing the challenge of displaying an image as a banner with text overlay. Despite trying various methods, it seems impossible to achieve this directly with an image element, so I resorted to using CSS's background ...

htmlcssimagebootstrap-4image-size

Show a toast message and reset the form upon submission

Here I have created a contact form using HTML, CSS, and JavaScript. However, I'm facing an issue where the form redirects me to a page displaying the submitted details after clicking the submit button. I want to display a toast message instead and res ...

javascripthtmljquerycssforms

Guide to saving output to a file using node.js and express

I have developed an application using node.js and express.js on top of elasticsearch. The application is quite simple, featuring a search box that returns results in JSON format when querying for a specific keyword. For example, searching for the word "whi ...

javascriptnode.jsexpresselasticsearch

Retrieving information through callback functions

A function I developed checks a list of tags that are submitted to it, sorting the good ones into a "good" array and the bad ones into a "bad" array. This process occurs within a callback, allowing the rest of my code to continue once complete. However, I ...

javascriptjquery

How can I launch five separate instances of Chrome on a Selenium grid, each with a different URL?

I have a list of URLs saved in a JSON file, structured like this: { "urls": [ "http://www.google.com/", "http://www.stackoverflow.com" ] } Currently, these URLs are being opened sequentially by the Selenium WebDriver JavaScript manager on a ...

javascriptgoogle-chromeseleniumselenium-webdriverpromise

An issue occurred in React 16.14.0 where the error "ReferenceError: exports is not defined" was not properly

As the creator of the next-translate library, I have encountered a perplexing issue with an experimental version involving an error specifically related to React 16.14.0. Interestingly, upgrading React to version 17 resolves the issue, but I am hesitant to ...

javascriptreactjstypescriptwebpacknext.js

Tips for hiding a sidebar by clicking away from it in JavaScript

My angular application for small devices has a working sidebar toggling feature, but I want the sidebar to close or hide when clicking anywhere on the page (i.e body). .component.html <nav class="sidebar sidebar-offcanvas active" id="sid ...

javascriptangulartypescript