With ASP.NET Blazor and Blazorise, how do I use that to show content only on mobile?

Question

Same question w/o an answer I like.... and since the following allows me to show the contents of Container only on desktopy env.

    <Container Display="Display.None.Block.OnFullHD">
        <AppHelpMenu />
    </Container>

How do I use that to show a Container only on mobile?

    <Container Display="Display.None.Block.Mobile">
        <AppHelpMenu />
    </Container>

That doesn't work :(

score 2 · Accepted Answer · edited Mar 04 '21 at 12:39

2

Should be

<Container Display="Display.None.OnFullHD.None.OnTablet.Block.OnMobile">
    <NavHelp />
</Container>

First, you define how to show it (None), and then where to show it (OnMobile).

edited Mar 04 '21 at 12:39

kenny

answered Mar 04 '21 at 08:26

Mladen Macanović

I edited your answer with what worked for me, but the description of HOW it works is perfect. Thanks! – kenny Mar 04 '21 at 12:40

score 0 · Answer 2 · answered Feb 26 '21 at 16:19

0

The following CSS works good enough

@media (min-width: 641px) {
    .show-mobile-only {
        /* don't show on mobile */
        display: none;
    }

<div class="show-mobile-only" >
    <NavHelp />
</div>

answered Feb 26 '21 at 16:19

kenny

Though I find something w/ working w/ Display.Blah would be cleaner and blazorising. – kenny Feb 26 '21 at 16:55

2 Answers2