Too much to type out, please see the following screen cast: https://youtu.be/VYuVK-BR22I
ISSUES:
Background image of component shows in component page and front end but does not show in regular CS page.
Opacity param setting is reflected in CS but not on frontend. Inspector shows variable not defined.
Hey @threeoten,
The background image shows in Cornerstone when I checked.
Regarding the opacity, I’ll queue this for further investigation by our development team.
Please stay tuned.
The background image is showing because there is an element inside the column. As demonstrated in the video that I linked, the background image does not show when the column is empty. Remove the text element from column two and the background image will stop displaying.
Hello @threeoten,
When the Column is empty, you will have to set a minimum height so that there is enough space for the background image to display. Be advised that the background image is set to cover the Column area. If there is 0 height, there is no area for the background image to display.
Thanks.
On the opacity part. You have conflicting opacity settings and due to the !important your top level Custom CSS is affecting the slot opacity settings you have set.
@ruenel That makes sense, but even when I set a Min Height (or even a Height value) in the primary tab of the component, it still does not show the selected background image when using an instance of the component in CS builder. If I set the min height, it should show the background image when using an instance in the builder, right?
@charlie Sorry, I don’t fully understand what the conflict is. Could you give me an idea of how I can set it up so that it is not conflicting?
On Section 2 you have custom CSS that targets .x-bg-layer-lower-image which conflicts with the inner background image because it’s using !important. That was why the opacity setting on your inner layer was not working in my testing. I would try not using !important or try using $el > .x-bg > .x-bg-layer-lower-image as a the CSS selector.
Thanks, yeah I forgot about the inner row bg image CSS. Got it now.
Wondering about my other question still in response to Reunel, regarding the chosen bg image of col 2 not showing in the component builder unless there is an element placed in the column:
…even when I set a Min Height (or even a Height value) in the primary tab of the component, it still does not show the selected background image when using an instance of the component in CS builder. If I set the min height, it should show the background image when using an instance in the builder, right?
Also, why would this be true for my component but not true for the default CS column element, which displays the chosen background image even when the column is empty and also has no set Min Height?
Still curious about the above question
…Anyone?
Hey @threeoten,
Please make sure to set the minimum height in your Column 2.
If the left column is empty, it will display since the builder has set a default preview height for the columns. I have created a demo test page.
Thanks.
The solution you’re providing doesn’t work (see #2 in screenshot). Even with a min height set in the primary tab in the component builder, it still does not show the background image when using an instance of the component on a CS page. It only reflects the min height when viewing on the front end. (see #2 in screenshots)
Same page viewed on the front end, #2 has a min height of 100px:
Either way, I’m not wanting to have to set a min height on all instances of this component just to show that there is a background image when working with it in CS builder. The default behavior that we’re all used to is just like the default CS columns, where the bg image is shown as soon as it is chosen, regardless of whether a min height is set, even for an empty col element. How can I make it so that my component shows the bg image in the same way that the default CS cols do?
Hey @threeoten,
I now see the issue.
I believe that this is a bug. I will be reporting this to our developers.
Please bear with us. Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
