Font size problem in live-preview

Beaver Builder
1

Hi,

I’ve added a font-size property to one of my modules:

Let’s assume that’s the HTML:

<div class="percent">
  <p style="visibility: visible;">
  <span class="percent-value">25</span>%</p>
</div>

In frontend.css.php, I add the following:

..
.fl-builder-content .fl-node-<?php echo $id; ?>  {
  font-size: <?php echo $settings->fontsize; ?>px !important; 
}
..

Note that !important was placed here because otherwise it will take the Theme’s defaults and I cannot control the theme.

In style.css: .percent p { font-size: 40px; }
In POST-ID-layout-draft.css: .percent p { font-size: [input]px; }

For some reason, the CSS setting of style.css is considered. (SUGGESTIONS?).

Therefore I had the add !important.

But, the problem when I add important is the following stops working:

                        'preview'       => array(
                            'type'          => 'css',
                            'selector'      => '.percent p',
                            'property'      => 'font-size',
                            'unit'          => 'px',
                        )

Ideas?

2

Hmm… I thought about it, if I can delay the inclusion of POST_ID-layout-draft.css & PSOT_ID-layout-css files that would be great.

However, this works on file dependency as far as I know and not priority as in hooks.
Do you have ideas?

Thanks

3

Hi Elemento,

Maybe try…

'unit' => 'px !important',

If that doesn’t work, you might need to look at adjusting the theme CSS so you don’t need to use !important.

Justin

4

This is a third party theme we use and not our own.

I thought about it, if you add an optional filter to the POST_ID-layout.css and POST_ID-draft-layout.css that controls the dependency, that would be an awesome solution.

Something like this:

wp_enqueue_style(‘fl-builder-layout-’ . $post_id, $asset_info[‘css_url’], array() /* add_filter here */, $asset_ver);

5

Hi Elemento,

Sure thing. I’ll look into that for the next release.

Justin

6

That’s awesome, it will great capabilities of your awesome tool =)

I tried this:

                        'preview'       => array(
                            'type'          => 'css',
                            'selector'      => 'h3',
                            'property'      => 'font-size',
                            'unit'          => 'px !important',
                        )

It only modifies the text the first time I insert the input.
Say the size was 40 and I changed to 32, I see the change, but then to 36 => NOTHING.

Any explanation?

Note that this element is styled in frontend.css.php using “font-size: [size] px”.

7

If that helps, I got a real example (69-layout-draft.css - added by frontend.css.php):

.fl-builder-content .fl-node-558af0fc3af2f .elm_cc_module h3 { font-size: 25px; }

What we should do after all is make the live-preview selector override the frontend.css.php one, that’s weird why !important does not solve it (it does only one time).

How does the live-preview modify the element? where does it load the css to?

8

Hi Elemento,

The live preview modifies the element using a JavaScript StyleSheet object, so it’s possible that !important isn’t well supported there.

It’s really hard for me to debug any of this without working with the code. Can you provide FTP access?

Justin

9

Hi Elemento,

We just pushed out a minor update (1.6.0.1) that includes a new filter called fl_builder_layout_style_dependencies that you can read about here…

http://forum.wpbeaverbuilder.com/knowledge-base/filter-reference/

I hope that helps!

Justin