Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Checkbox Printing Issue #28483

Closed
scottkuhl opened this issue Mar 13, 2019 · 10 comments
Closed

Custom Checkbox Printing Issue #28483

scottkuhl opened this issue Mar 13, 2019 · 10 comments

Comments

@scottkuhl
Copy link

Formatting of a custom checkbox in Bootstrap 4.3.1 is not working.

Chrome: it is not shown at all when checked or shows only an outline when not checked.
Edge: boxes are always unchecked.
Firefox: it is not shown at all when checked or shows only an outline when not checked.
IE11: boxes are always unchecked.

Example:

<div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" checked />
  <label class="custom-control-label">This is checked.</label>
</div>
<div class="custom-control custom-checkbox">
  <input class="custom-control-input" type="checkbox" />
  <label class="custom-control-label">This is not checked.</label>
</div>

  • Operating system and version: Windows 10 1709
  • Browser and version: Google Chrome Version 72.0.3626.121 (Official Build) (32-bit)
  • Browser and version: Microsoft Edge 41.16299.967.0
  • Browser and version: Mozilla Firefox Version 60.5.1esr (32-bit)
  • Browser and version: Internet Explorer Version 11.967.16299.0
  • https://codepen.io/scottkuhl/pen/mopKQE
@jipexu
Copy link
Contributor

jipexu commented Mar 14, 2019

you need an id for your input and a for attribut for your label ... to work

@scottkuhl
Copy link
Author

you need an id for your input and a for attribut for your label ... to work

I have updated the codepen based on your suggestion and it did not make a difference.

@jipexu
Copy link
Contributor

jipexu commented Mar 14, 2019

it's work for me with YOUR fiddle (with id and for) ??? (
safari (12.03) ==> ok
Chrome Version 72.0.3626.121 (Build officiel) (64 bits) ==>ok
FF 65.0.1 (64 bits) ==> ok
)
on mac ....
but sorry can not test for your system

@mdo
Copy link
Member

mdo commented Mar 14, 2019

The problem is with printing, correct? This is likely due to printing with background-images disabled in the browser's print dialog.

@scottkuhl
Copy link
Author

The problem is with printing, correct? This is likely due to printing with background-images disabled in the browser's print dialog.

Yes, that is the issue. I would assume that is going to be a common problem for a lot of users. Should Bootstrap be rendering these some other way when printing by default? Such as reverting back to the browser defaults?

@jipexu
Copy link
Contributor

jipexu commented Mar 14, 2019

oups sorry i was outside the answer ...(dont see printing ...)

@patrickhlauke
Copy link
Member

even though in future we're likely to scale back/drop print support, this is something that should be tackled as we don't want things outright broken. easiest here would likely be to drop the customisation in print media and just display the regular checkbox at least

@XhmikosR
Copy link
Member

PRs welcome which target v4-dev.

@mdo
Copy link
Member

mdo commented May 14, 2020

Closing since #29714 was merged months ago.

@mdo mdo closed this as completed May 14, 2020
@XhmikosR
Copy link
Member

@mdo it seems #29714 was never backported though.

@MartijnCuppens please backport #29714 to the v4-dev-xmr branch

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

6 participants