0

I have a ServerApp (Blazor .net6). And I have a window with 1 or more buttons.

  • If the window (browser-window) is large than there will be shown max 3 buttons shown on one row.
  • If the window is small, than there will be shown 1 button on one row.
  • There at the end of the row has a rounded end.
  • The buttons has a border. So I can't use overflow-hidden.

How can I give the first button a rounded end by a small window, the second by a medium-large window and a third button a rounded end by a large window?

<h3>Component</h3>

@if (model != null)
{
    bool isStatusX = model.Status == StatusEnum.Description(StatusEnum.X);
    bool isStatusY = model.Status == StatusEnum.Description(StatusEnum.Y);
    bool hasRoundEnd = false;
    int index = 0;

    <div id="buttons">
        <ul class="nav col-12 col-md-auto mb-md-0 justify-content-md-end">
            @if (isStatusX)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 1" OnClick=@EventOne />
                </li>
            }

            @if (isStatusY)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 2" Url=@url OnClick=@EventTwo />
                </li>
            }

            @if (isStatusX)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 3" OnClick=@EventThree />
                </li>
            }

            @if (isStatusX || isStatusY)
            {
                index++;
                hasRoundEnd = index == indexhasRoundEnd;
                <li class="ms-3 mb-3 d-block">
                    <Button HasRoundEnd=@hasRoundEnd Index=@index Title="title 4" OnClick=@EventFour />
                </li>
            }
        </ul>
    </div>
}

@code {
    private int indexhasRoundEnd = 0;
    protected override void OnInitialized()
    {
        // Something like this?
        if (@media(min-width:481px) == true)
            indexhasRoundEnd = 1;
        if (@media(min-width:961px) == true)
            indexhasRoundEnd = 2;
        if (@media(min-width:1200px) == true)
            indexhasRoundEnd = 3;
    }
}

Any suggestion is appreciated. Thank you!

enter image description here

or

enter image description here

user1531040
  • 2,143
  • 6
  • 28
  • 48
  • You can probably use plain css for this right? There are selectors like `:first-child` and `:last-child` – Axekan Dec 19 '22 at 13:40
  • What exactly is your thought about how do you do that? In this example I have a minimum of 1 button and a maximum of 4 buttons. The first, second, or third button has a rounded end. – user1531040 Dec 19 '22 at 13:47

1 Answers1

0

As Axekan said. You're probably going to need something similar as calling your Child:parent. You call your css class and change it depending on size of the screen

@media (min-width: 1200px) {
    h1 (old code), .h1(new code) {
        font-size: 2.5rem;
    }
}
Rojhat
  • 79
  • 7
  • Such like this? @media (min-width:481px) { .radius-end ::first-child { border-radius: 0px 50px 0px 0px !important; } – user1531040 Dec 19 '22 at 13:54
  • ... and this @media (min-width:1200px) { .radius-end ::third-child { border-radius: 0px 50px 0px 0px !important; } – user1531040 Dec 19 '22 at 13:57
  • Well depends on what your changing, if you want to change a certain part of the code or all code you do it like you did. My example changes all the code with .h1 when the screen goes smaller then 1200px – Rojhat Dec 19 '22 at 14:09
  • I have added two pictures. Maybe it's more clear, what I want. – user1531040 Dec 19 '22 at 14:21