Print Button Ignores Dropdown button styling

Hello @mjunes,

There is not way of printing only the form (removing the other tags in the page) without cloning it into an iframe and print only the iframe content, but this action provokes that the choices selected in the DropDown fields and the values entered into the textareas be reset. For this reason the code of the printForm function replace these fields with the corresponding values. So, in the printed version of the form both controls (DropDown fields and Texareas) are replaced by their values.

Best regards.

Hello,

Thanks for the response. But the styling is missing only for the dropdown fields, the text fields (numeric), date fields, calculated fields are displayed perfectly with the styling.

Hello @mjunes,

That is exactly that I said, only the DropDown fields and textareas are replaced by their values, actually, in the printed version of the form it is not a DropDown, it is directly a text corresponding to the value selected.

Best regards.

In that case is it possible to apply the style of calcuated fields to the text of the dropdown fields in the print form?

Hello @mjunes,

If you want to apply a specific appearance to the values of the DropDown fields when the form is printed, you should enter a style definition into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png), similar to:

@media print{
  #fbuilder .cff-dropdown-field .dfield{
    /* The CSS rules here */
  }
}

Replacing the text: /* The CSS rules here */ with the CSS rules you want to apply.

Best regards.

Hello,

Thank you for pointing me in the direction. However applying styles to the .dfield selects the whole field including .uh. But I want apply styles only to select and doing so does nothing in the print form. It still displays as plain text. I can’t even change the color of the select text that appears in the print form. Any help would be highly appreciated.

Thanks

Hello @mjunes,

I need you understand that in the printed version of the form there are not SELECT or TEXTAREA tags, these tags are replaced by the plain texts of their corresponding values. However, you can apply styles to these texts, but the textareas and select tags won’t be there.

If you need additional help customizing these texts, please, send me the link to the page with the form that is being printed, and indicate the appearance you want to apply them, because each website is different and the styles in the active themes and the other plugins, affect too to the form’s fields.

Best regards.

Hello,

I’m sorry if this too confusing. And unfortunately i cannot share the url. I have attached a screenshot differentiating the 2 behaviors, please check the url. I just need the dropdown fields in print window to look identical to the dropdown fields in the actual form.

https://prntscr.com/m6mz6b

Hello @mjunes,

If you want to display the text with a border, a possibility would be enter the following style definition into the “Customize Form Design” attribute:

@media print{
  #fbuilder .cff-dropdown-field .dfield{
    border: 1px solid #DADADA;
    border-radius: 5px;
    padding: 10px;
  }
}

But as I said in other tickets, I cannot help you to modify a website’s design without know the styles that are being applied, I’m sorry.

Best regards.

Thank you. I already tried to style it this way but didn’t get the desired result. Thanks for the help so far.

Hello @mjunes,

I’ve tested the same styles I sent you previously, and they are applied as should, please, look the screenshot below, however, as I said in some tickets, the CSS rules to apply depend on the other styles your website applies to these tags:

Best regards.