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

Not able to use Advanced margin_padding control multiple times ? #125

Open
SatishKumarPrajapati opened this issue Jun 26, 2018 · 9 comments

Comments

@SatishKumarPrajapati
Copy link

Problem Description

There is no option to use advanced margin padding control to use multiple times as other controls are easy to use multiple times.

Steps To Reproduce

  1. $advanced_fields['margin_padding']['part2'] = [
    'css' => [
    'main' => [
    'margin' => "%%order_class%% .bpd-st-transform-text-title .bpd-st-rest-text",
    'padding' => "%%order_class%% .bpd-st-transform-text-title .bpd-st-rest-text",
    ],
    ],
    'hide_text_align' => true,
    'tab_slug' => 'advanced',
    'toggle_slug' => 'part2',
    ];
@elegantthemes elegantthemes deleted a comment from etstaging Jun 26, 2018
@IvanChiurcci
Copy link

Use custom_margin and custom_padding controls instead, you can use them multiple times in a module.

@SatishKumarPrajapati
Copy link
Author

Yes i can use that but if i use advanced margin_padding then its easy to use and custom_margin or custom_padding issue in render.

@xxtesaxx
Copy link

xxtesaxx commented Jul 8, 2018

I believe the advanced field for margin/padding can only be added once and by default it is used for the whole module (the module wrapper). You can add as many fields of type "custom_margin" and use them for margins and paddings as you desire. It's quiet easy to implement it and you can even get mobile_options "for free". Sure it is a slight effort to implement the function to set the CSS in react and php but thats a one time thing and not too hard to do.

The best advice I can give you when doing this is to use separate top, right, bottm and left settings in ET_Builder_Element::set_style (or static css(props)) because if you just use "margin: %1$s %2$s..." and a value is not set, you end up with wrong values. Instead use "margin-top: %1$s; margin-right: %2$s;...".

@SatishKumarPrajapati
Copy link
Author

yes i have used that but if advanced field for margin/padding can be use multiple times then it will be good and less code to write for css.

@xxtesaxx
Copy link

xxtesaxx commented Aug 4, 2018

yes, absolutely. Ideally you could place the selector for the margin/padding inside the field declaration. That would be so much more convenient. Like

'field' => [
    'label' => 'My Margin',
    'type' => 'custom_margin',
    'selector' => '%%order_class%% .my_selector',
    ...
],

@SatishKumarPrajapati
Copy link
Author

yes @xxtesaxx and it will help to work efficiently

@jamesfosker
Copy link

Use custom_margin and custom_padding controls instead, you can use them multiple times in a module.

How to do you get the value?

@jcdotnet
Copy link

jcdotnet commented Dec 6, 2018

@jamesfosker check the $this->props['your_padding_field']

If empty (undefined in JS) you can output '0px'
else you can call the explode function (split in JS) and output the top, right, bottom and left values:
$values = explode('|', $this->props['your_padding_field']);
$values[0] is padding-top, $values[1] is padding-right and so on.

@xxtesaxx
Copy link

xxtesaxx commented Dec 8, 2018

I wrote myself a php function which utilises et_builder_get_element_style_css:

`public function apply_custom_margin_padding($function_name, $slug, $type, $class, $important = true)
{
$slug_value = $this->props[$slug];
$slug_value_tablet = $this->props[$slug . '_tablet'];
$slug_value_phone = $this->props[$slug . '_phone'];
$slug_value_last_edited = $this->props[$slug . '_last_edited'];
$slug_value_responsive_active = et_pb_get_responsive_status($slug_value_last_edited);

    if (isset($slug_value) && !empty($slug_value)) {
        ET_Builder_Element::set_style($function_name, array(
            'selector' => $class,
            'declaration' => et_builder_get_element_style_css($slug_value, $type, $important),
        ));
    }

    if (isset($slug_value_tablet) && !empty($slug_value_tablet) && $slug_value_responsive_active) {
        ET_Builder_Element::set_style($function_name, array(
            'selector' => $class,
            'declaration' => et_builder_get_element_style_css($slug_value_tablet, $type, $important),
            'media_query' => ET_Builder_Element::get_media_query('max_width_980'),
        ));
    }

    if (isset($slug_value_phone) && !empty($slug_value_phone) && $slug_value_responsive_active) {
        ET_Builder_Element::set_style($function_name, array(
            'selector' => $class,
            'declaration' => et_builder_get_element_style_css($slug_value_phone, $type, $important),
            'media_query' => ET_Builder_Element::get_media_query('max_width_767'),
        ));
    }
}`

In jsx I use the static css(props) function to build the css myself:

`// Apply button margin if necessary
if (props.button_margin) {
const button_margin = props.button_margin.split("|");
const button_margin_last_edited = props.button_margin_last_edited;
const button_margin_responsive_active = button_margin_last_edited && button_margin_last_edited.startsWith("on");

        additionalCss.push([{
            selector: '%%order_class%%.et_pb_module .et_pb_button',
            declaration: `margin-top: ${button_margin[0]}; margin-right: ${button_margin[1]}; margin-bottom: ${button_margin[2]}; margin-left: ${button_margin[3]};`,
        }]);


        if (props.button_margin_tablet && button_margin_responsive_active && props.button_margin_tablet && '' !== props.button_margin_tablet) {
            const button_margin_tablet = props.button_margin_tablet.split("|");
            additionalCss.push([{
                selector: '%%order_class%%.et_pb_module .et_pb_button',
                declaration: `margin-top: ${button_margin_tablet[0]}; margin-right: ${button_margin_tablet[1]}; margin-bottom: ${button_margin_tablet[2]}; margin-left: ${button_margin_tablet[3]};`,
                device: 'tablet',
            }]);
        }

        if (props.button_margin_phone && button_margin_responsive_active && props.button_margin_phone && '' !== props.button_margin_phone) {
            const button_margin_phone = props.button_margin_phone.split("|");
            additionalCss.push([{
                selector: '%%order_class%%.et_pb_module .et_pb_button',
                declaration: `margin-top: ${button_margin_phone[0]}; margin-right: ${button_margin_phone[1]}; margin-bottom: ${button_margin_phone[2]}; margin-left: ${button_margin_phone[3]};`,
                device: 'phone',
            }]);
        }
    }`

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