C
C#•16mo ago
XD

❔ Is there a way to make this more cleaner?

<div class="buttons">
    <div class="dropdown">
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Add a new habit
    </a>
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Log a habit
    </a>
    @*<div class="dropdown">*@
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Today">Today</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Yesterday">Yesterday</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="DateAdded">Date added</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="AddedOrder">Added order</a>
        <a class="dropdown-item search-link" asp-page="./Index">Search for date</a>
    </div>
    <br />
    <form id="search" style="display: none;">
        <p> Title: <input type="text" id="searchInput" asp-for="SearchString" /> <input type="submit" value="Filter" /> </p>
    </form>
    @*</div>*@
        @{
            if (Model.SumMessage != null)
            {
                <br />
                    <span style="white-space: pre-line">@Model.SumMessage</span>
            }
        }
    </div>
</div>

@{
    if (Model.SumMessage != null)
    {
        <br />
    }
}
<br />
<table id="records" class="table">
    <thead>
        <tr>
        ...
<div class="buttons">
    <div class="dropdown">
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Add a new habit
    </a>
    <a button type="button" class="btn btn-success">
        <svg>
            <path></path>
        </svg>
        Log a habit
    </a>
    @*<div class="dropdown">*@
    <button class="btn btn-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown button
    </button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Today">Today</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="Yesterday">Yesterday</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="DateAdded">Date added</a>
        <a class="dropdown-item" asp-page="./Index" asp-route-sorttype="AddedOrder">Added order</a>
        <a class="dropdown-item search-link" asp-page="./Index">Search for date</a>
    </div>
    <br />
    <form id="search" style="display: none;">
        <p> Title: <input type="text" id="searchInput" asp-for="SearchString" /> <input type="submit" value="Filter" /> </p>
    </form>
    @*</div>*@
        @{
            if (Model.SumMessage != null)
            {
                <br />
                    <span style="white-space: pre-line">@Model.SumMessage</span>
            }
        }
    </div>
</div>

@{
    if (Model.SumMessage != null)
    {
        <br />
    }
}
<br />
<table id="records" class="table">
    <thead>
        <tr>
        ...
As you can see, if 
Model.SumMessage
Model.SumMessage
is not null, I will add a span that will contain that message. I need two <br> tags in case I show the message. One above my span, and the other one above my <table> tag. Problem is, I feel those if statements I added don't look very clean. What do you think?
33 Replies
Mayor McCheese
Mayor McCheese•16mo ago
I'm sure you can likely simplify the html; that aside razor is never clean beyond a certain point.
XD
XDOP•16mo ago
how?
Mayor McCheese
Mayor McCheese•16mo ago
I'm seeing it on my phone Hard to read Is your question about razor formatting? Or simplifying html?
XD
XDOP•16mo ago
my question is about how can i simplify those two razor if statements because the code doesn't look very clean imo
Mayor McCheese
Mayor McCheese•16mo ago
Mayor McCheese
Mayor McCheese•16mo ago
Oops
XD
XDOP•16mo ago
its okay
Mayor McCheese
Mayor McCheese•16mo ago
Driving
Mayor McCheese
Mayor McCheese•16mo ago
This for instance; looks more like css itching to happen
No description
Mayor McCheese
Mayor McCheese•16mo ago
There's no need for it
Mayor McCheese
Mayor McCheese•16mo ago
Why not have some bottom padding here?
No description
XD
XDOP•16mo ago
this is why I implement it
No description
XD
XDOP•16mo ago
with a <br> it looks cleaner
Mayor McCheese
Mayor McCheese•16mo ago
Css can add that white space
XD
XDOP•16mo ago
No description
XD
XDOP•16mo ago
which way? i've tried margin-top and bottom and it didnt work for some reason
Mayor McCheese
Mayor McCheese•16mo ago
I'd have to play with it You might need a display:block on the span
XD
XDOP•16mo ago
that worked! but only margin-top worked
Mayor McCheese
Mayor McCheese•16mo ago
Try margin: 5m 0 5m 0
XD
XDOP•16mo ago
like this? 
margin: 5m 0 5m 0;
margin: 5m 0 5m 0;
sorry i'm not really good at css
Mayor McCheese
Mayor McCheese•16mo ago
Err Em Not m My bad 5em is probably large
pox
pox•16mo ago
em
XD
XDOP•16mo ago
nothing and also i get this warning
No description
pox
pox•16mo ago
I tend playaround in the brower using inspect, and find something that works
Mayor McCheese
Mayor McCheese•16mo ago
Did you do 5em?
XD
XDOP•16mo ago
yeah that seems better than editing the tag in visual studio it worked but its too big now
Mayor McCheese
Mayor McCheese•16mo ago
Dial it back Also try rem
XD
XDOP•16mo ago
it worked thank you @.mayormccheese !
Mayor McCheese
Mayor McCheese•16mo ago
Css sizes are usually done badly; you can't mix px, em, rem, % unless you know what you're doing But like @poxy1 said ; use the inspector to find out what works and save it back
XD
XDOP•16mo ago
yeah will try that from now on thank you guys
Mayor McCheese
Mayor McCheese•16mo ago
https://css-tricks.com/
CSS-Tricks
CSS-Tricks
CSS-Tricks is a website about websites.
XD
XDOP•16mo ago
Thank you!!!
Accord
Accord•16mo ago
Was this issue resolved? If so, run /close - otherwise I will mark this as stale and this post will be archived until there is new activity.

Did you find this page helpful?