Hello,
I would like to print a page in my reactive application and would like to hide the border for input widget / textarea widget / dropdown widget.
I am able to do so for both the input and text area widget but I cant seem to hide the border&icon for the dropdwon widget. Any suggestions? Thank you!
alternatively,
if you want to target and override the styling of individual widgets, that's a matter of finding with chrome dev tools how it is styled. This will have to be done again and again for every widget you want to style, and is subject to future changes in those widgets.
For the dropdown, in current version of OutSystems UI it would be :
@media print {
.dropdown-container:after{
display:none;
}
.dropdown-container > div.dropdown-display,
.dropdown-container > select.dropdown-display{
border-bottom-width: 0px;
border-right-width: 0px;
border-top-width: 0px;
border-left-width: 0px;
Hi @Low Nico ,
one thing you can do, and can avoid having to tinker with the individual css rules of each element, and also not be dependant on the individual css rules of elements changing in th future, is to just have dedicated alternative content in your screen to be shown in case of print, styled exactly how you want it in print.
So in it's simplest form, this is enclosing your widget in a container with class "not-in-print" and adding under it a container with class "only-in-print", and in that second container, for example an expression bound to the same data as your widget.
what you need in your CSS is :
Dorine
small correction : better to use display:unset; instead of display: block;
Hello Dorine,
Thank you for your suggestion. Maybe i wasnt clear in my post but, I would show the content of the dropdown widget but hide the border of the widget so that it looks like a normal text widget when printing. Setting its display to none will just hide the entire widget completely
well yes,
my suggestion is to have the other content, that you want to display on print, normally hidden, and showing on print.
so your dropdown is hidden, but your alternative content is shown. I thought about an expression, but you could make your alternative content an input, I guess.
Thank you so much Dorine, this worked great. Your other suggestion on hiding and showing the alternative content will work too but for my use-case I would prefer to override the styling of individual widgets. I appreciate the help!
Thanks for sharing