Modal: Custom CSS acts weirdly

Beta
#1

Hi @alexander!

I have a modal that contains a text element (I have tried DIV+Raw as well).

That text element contains a Gravity Forms shorcode:

[gravityform id=31 title=false description=false ajax=true]

The text element has this custom CSS:

$el .gform_body input {
    border:0px !important;
    border-bottom:1px solid rgba(48,55,56,0.5) !important
}

This is where it gets wired.

I see this inside the Content editor:
image

The CSS is applied, but the button is red, despite the Theme option of blue color, for all default buttons.

This is the front end:

image

The button is now blue as it should be, but the custom CSS is not being applied.

I have deleted the old Modal to replace it with the new one. The old one had both CSS and the button working.

Thanks!

EDIT: having the CSS as a page or global solves the issue. It is just not working as an element CSS.

#2

I have something weird as well re: css where in the global css an ID is being ignored, where previously this worked

#3

Sorted my issue, it appears my contact form ID changed for some reason beyond my understanding

#4

Hi @Misho,

Thanks for the heads up on this, and good to hear you got something working in the meantime. The current Element CSS system in particular is problematic because if you have any syntax errors it will potentially corrupt any CSS that comes after it. For example, if you forget a closing brace on an element, child elements might lose styling altogether. For responsive styling we’re writing a whole new CSS engine so for now we’re holding off on looking into any bugs of that nature unless they reoccur in the new system. We’re hoping to overcome limitations like this and the possibility for Element CSS to get you into situations that can be hard to troubleshoot.

1 Like