topic Disable Styling for Div when no content in CMS Development

Disable Styling for Div when no content

tlorang — Fri, 03 Nov 2017 18:52:26 GMT

I'm not sure if anything can be done for this but here is the issue.

My client wanted a page with videos posted about thier product. I used Rich Text modules where we could put a video and some text. I styled it with a boarder and a drop shadow. They look fine unless there is no content then I get a long narrow box:

This is the css code i used:

/*===== video resource box ====*/
.videoresource > div {
border-style: solid;
border-width: 2px;
border-radius: 10px;
border-color: #BCBEC0;
box-shadow: 10px 10px 20px #888888;
padding: 5px;
margin-bottom: 15px;
}

Once the template has been made and I use it on a page, I cannot take out the Rich Text box or change the styling on the indifividual box.

Any suggestions?

Thank you,

Tim

Re: Disable Styling for Div when no content

TRooInbound — Sat, 04 Nov 2017 10:04:13 GMT

Hi @tlorang,

Please Try this CSS.

.videoresource > div:empty {
     display:none;
}

if above CSS want work than providing us page URL for better understanding?

Thanks

Team TRooInbound

Re: Disable Styling for Div when no content

tlorang — Sat, 04 Nov 2017 22:45:44 GMT

Thank you @TRooInbound

I see where you are going with this but it did not work.

Here is a link to a page:

https://blog.letsgoaero.com/silent-towing-video-resources?hs_preview=IrjWNfyN-5419804654

https://preview.hs-sites.com/_hcms/preview/template/multi?is_buffered_template_layout=true&portalId=422265&tc_deviceCategory=desktop&template_layout_id=5418540902

I appreciate your help.

Tim

Re: Disable Styling for Div when no content

TRooInbound — Sun, 05 Nov 2017 11:08:37 GMT

Hi @tlorang,

I have found there is some issue with targeting CSS classes,

Please replace your code with below code that will solve your problem.

.videoresource > div >  span.hs_cos_wrapper_type_rich_text {
    border-style: solid;
    border-width: 2px;
    border-radius: 10px;
    border-color: #bcbec0;
    box-shadow: 10px 10px 20px #888;
    padding: 5px;
    margin-bottom: 15px;
  display:block;
}

.videoresource > div >  span.hs_cos_wrapper_type_rich_text:empty {
  display:none
}

Thanks,

Team TRooinbound

Re: Disable Styling for Div when no content

tlorang — Mon, 06 Nov 2017 05:25:59 GMT

@hank you @TRooInbound

That is amazing! It did the trick.

I did not think to ad the span.hs_cos_wrapper_type_rich_text code, But now that I see it, it makes sense.

Thank you,
Tim

Re: Disable Styling for Div when no content

TRooInbound — Mon, 06 Nov 2017 06:39:37 GMT

Hi @tlorang Cool, cheers
more help please visit at www.trooinbound.com or email at hello@trooinbound.com

TRooInbound Team!