Can I Apply a Display Breakpoint to a MadCap Condition?

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
Arthur_cl
Jr. Propeller Head
Posts: 6
Joined: Wed Nov 10, 2021 3:49 am

Can I Apply a Display Breakpoint to a MadCap Condition?

Post by Arthur_cl »

Hi everyone,

My question is the following: is it possible to apply a display breakpoint to a condition I created in MadCap?

What would I like to achieve? When I apply the condition "Mobile" to some content, I would like this condition to be linked with "@media only screen and (max-width: 769px)" in order for that content to be displayed only when the size of the screen is 769px or smaller.

Thanks in advance.
Regards,
Arthur
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Can I Apply a Display Breakpoint to a MadCap Condition?

Post by NorthEast »

I think it should be possible, but it's not really what conditions are intended for, and it might make more sense to use a CSS class.

This is some quite basic CSS to implement a class that you could use to make things visible in mobile, but not at higher resolutions.

Code: Select all

@media mobile
{
   .mobile-only
   {
      display: initial;
   }
}

.mobile-only
{
   display: none;
}
You could use your own @media statement here, but I thought it made more sense to use the mediums and responsive breakpoints that are built in to Flare.
The element display is set to "none" by default (hidden on large screens), and the display is set to "initial" for mobile displays. It uses "initial" to get the original display type of the element - since we don't know if the element should be displayed as "block", "inline", "table", or whatever.

---

In Flare, conditions can't really be combined with CSS, but for HTML5 the condition attributes are visible in the output (for majority of tags), so you can use some hacky CSS to style the conditions.
The main drawback is that the condition attributes are not preserved in the output for everything - e.g. setting a condition on some MadCap proxies might not work, so you may need to put the proxy inside a div and then set the condition on the div.

Anyway, this is the same code, for a condition called "mobile-only":

Code: Select all

[data-mc-conditions*=".mobile-only"]
{
   display: none;
}

@media mobile
{
   [data-mc-conditions*=".mobile-only"]
   {
      display: initial;
   }
}
Most frameworks have these sort of "visibility classes" built-in, but unfortunately when MadCap created their custom version of the Foundation framework for Flare, they didn't include visibility classes.
It's a shame, because it's quite a common thing you might want to do, and writing robust CSS to do this yourself is very tricky.
Arthur_cl
Jr. Propeller Head
Posts: 6
Joined: Wed Nov 10, 2021 3:49 am

Re: Can I Apply a Display Breakpoint to a MadCap Condition?

Post by Arthur_cl »

Hello Dave Lee,

Thanks a lot for your answer. I don't know why in my mind it sounded a good solution to modify the style of a condition by adding breakpoints to it. I think I will stick to changing my desktop CSS styles and make them responsive for smaller screens. Lots of work ahead indeed.

Best regards
Post Reply