Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Selected radio options don't render when printed

See original GitHub issue

Describe the bug

Selected form radio inputs are not visible when printed without background colours, the default for most browsers.

Steps to reproduce the bug

Go to a page with a radio button it, such as https://bootstrap-vue.org/docs/components/form-radio
Click on a radio button
Print out the page
See that the radio button is not visible

Expected behavior

The selected option has a radio button that’s visually distinct from the unselected one.

Versions

Libraries:

BootstrapVue: 2.4.1
Bootstrap: 4.4.1
Vue: 2.6.11

N.B: The bug happens on https://bootstrap-vue.org as well.

Environment:

Device: [Mac]
OS: [macOS Catalina]
Browser: [Safari 13.0.5, Firefox 74 (16 bit)]
Version: [See above]

Demo link

Screenshot

Additional context

Print styles similar to this can be used as a workaround:

@media print {
  input[type='radio'] {
    &:checked + label {
      &::after {
        visibility: hidden;
      }
      &::before {
        top: 17px;
        border-width: 4px;
      }
    }
  }
}

Issue Analytics

State:
Created 3 years ago
Comments:8 (5 by maintainers)

Top GitHub Comments

1reaction

tunaranchcommented, Mar 26, 2020

Looks like it’s been fixed for v5, and there’s an outstanding issue to get it back ported to v4: https://github.com/twbs/bootstrap/issues/28483

1reaction

jacobmllr95commented, Mar 26, 2020

@tunaranch BootstrapVue defaults to the custom Bootstrap form inputs. When printing those on the Bootstrap website I get the same issue as BootstrapVue has.

So it is definitely an upstream issue.