Flexbox Div Help

This forum is for all Flare issues related to the HTML5, WebHelp, WebHelp Plus, and Adobe Air Targets
Post Reply
Flare00
Propeller Head
Posts: 12
Joined: Thu Dec 21, 2017 7:46 am

Flexbox Div Help

Post by Flare00 »

Hi,
Looking for code (and explanation) that makes a flexbox div clickable, so the entire div box is selectable (linking it to file in project).
I can insert a text hyperlink or hyperlink an image inside the flexbox div, but the selectable area is limited to that area only, I cannot figure out how to make the whole div selectable on its own.

Tried wrapping the div in a (a href) but that breaks the div box and wont display correctly.

I looked at CSS tricks link, but not finding what I need.

Thanks for any help!
Roelof
Jr. Propeller Head
Posts: 3
Joined: Wed Jun 02, 2021 4:24 am

Re: Flexbox Div Help

Post by Roelof »

https://www.madcapsoftware.com/blog/tec ... ing-pages/

Making Entire Tile Selectable
One way to make the entire area within the border of a tile selectable is to include all the content of the tile (including link text, icon, and any additional detail) within the link, and then to change the display property of the link from its default value of “inline” to “block”. As a result, the link fills the entire tile. You will also want to make sure that the div representing the tile has no padding, as that would cause an inactive zone within the border of the tile.

I have done this using the following sample CSS code:

div.home-tiles > div > a
{
display: block;
padding: 1em;
}

…and HTML mark-up of this form:

<a href=”destination_topic.htm”>
<h2>Tile Heading</h2>
<p><img src=”tile_icon.png” /></p>
<p>Tile description text</p>
</a>

Using Flare’s XML Editor, it is not possible to insert a link that spans more than one block, so you will need to edit the topic using the Text Editor tab in order to place the opening and closing a (link) tags around the content of the tile.
Flare00
Propeller Head
Posts: 12
Joined: Thu Dec 21, 2017 7:46 am

Re: Flexbox Div Help

Post by Flare00 »

YES!...this works...Thank you very much!
The devil is in the details.
Post Reply