Closed HTML widget will not show in Forum list: Sidebar if in Advanced mode

[frm]

Affected version

2.3.2

2.3.2/replicated on XF demo

HTML widget will not show in Forum list: Sidebar if in Advance Mode (not tested in other positions).

Advanced mode off:


Advanced mode on:

 

[Deleted member 184953]

Yes, but what is the code you used for this HTML widget?

 

[Deleted member 184953]

This one?


Where are the basics and necessary block??
If you want to use the Advanced mode you need to build manually blocks... For example:

<div class="block">
    <div class="block-container">
        <div class="block-row">
            YOUR CODE
        </div>
    </div>
</div>

 

[frm]

Using this new code as the block:

<div class="block">
  <div class="block-container" data-widget-id="19" data-widget-key="inviteFriends" data-widget-definition="html">
    <div class="block-row">
        .
      <a class="shareButtons-button shareButtons-button--share is-hidden" data-xf-init="web-share" data-text="
                <xf:if is=" $xf.visitor.Profile.custom_fields.userRealName">
        {{ $xf.visitor.Profile.custom_fields.userRealName }} (@{{ $xf.visitor.username }})
        <xf:elseif is="$xf.visitor.username" /> @{{ $xf.visitor.username }}
        <xf:else /> Someone </xf:if> thought that you would enjoy {{ $xf.options.boardTitle }} — {{ $xf.options.boardDescription }}. {{ $xf.options.boardTitle }} can be found at: {{ $xf.options.homePageUrl }} However, they might think that you would be more interested in this:" data-hide=".shareButtons-button:not(.shareButtons-button--share)"> <img src="{{ $xf.homePageUrl }}/invite.png">
      </a>
    </div>
  </div>
</div>

And this CSS in {ICODE}extra.less[/ICODE]

@media (max-width: @xf-responsiveNarrow)
{
    .block[data-widget-key="inviteFriends"]
    {
      display: none;
    }
}

Still doesn't want to get rid of it on a larger viewport using this in extra.css

D

XF 2.2 Thread 'can't remove HTML widget with display: none;'

Feb 23, 2022

Hello,
I created a HTML widget named top_home
In extra.less template i put this code

@media (max-width: 900px) {
    [data-widget-key="top_home"] {
        display: none;
    }
}

But it doesn't work, the widget is still displayed under 900px screen.
The same code with non html widgets works...

• Deleted member 184953
• Replies: 2
• Forum: Styling and customization questions

• 

 

[Deleted member 184953]

Remove data-widget-id="19" data-widget-key="inviteFriends" data-widget-definition="html" from the block-container div and add this {{ widget_data($widget) }} to the block div instead

 

[frm]

Remove data-widget-id="19" data-widget-key="inviteFriends" data-widget-definition="html" from the block-container div and add this {{ widget_data($widget) }} to the block div instead

Thanks for the help! I’ve updated the tutorial to now support XF 2.3, XF 2.2.9 and newer, as well as XF 2.2.8 and older.

The discussion of the tutorial explains how to skip the CTA method (image) and simply update the Share Font Awesome link to include such a personalized message as mentioned in this XF suggestion.

 

[frm]

This is not a bug, please close.