C
C#•2y 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•2y ago
I'm sure you can likely simplify the html; that aside razor is never clean beyond a certain point.
XD
XDOP•2y ago
how?
Mayor McCheese
Mayor McCheese•2y ago
I'm seeing it on my phone Hard to read Is your question about razor formatting? Or simplifying html?
XD
XDOP•2y 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•2y ago
Mayor McCheese
Mayor McCheese•2y ago
Oops
XD
XDOP•2y ago
its okay
Mayor McCheese
Mayor McCheese•2y ago
Driving
Mayor McCheese
Mayor McCheese•2y ago
This for instance; looks more like css itching to happen
No description
Mayor McCheese
Mayor McCheese•2y ago
There's no need for it
Mayor McCheese
Mayor McCheese•2y ago
Why not have some bottom padding here?
No description
XD
XDOP•2y ago
this is why I implement it
No description
XD
XDOP•2y ago
with a <br> it looks cleaner
Mayor McCheese
Mayor McCheese•2y ago
Css can add that white space
XD
XDOP•2y ago
No description
XD
XDOP•2y ago
which way? i've tried margin-top and bottom and it didnt work for some reason
Mayor McCheese
Mayor McCheese•2y ago
I'd have to play with it You might need a display:block on the span
XD
XDOP•2y ago
that worked! but only margin-top worked
Mayor McCheese
Mayor McCheese•2y ago
Try margin: 5m 0 5m 0
XD
XDOP•2y 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•2y ago
Err Em Not m My bad 5em is probably large
pox
pox•2y ago
em
XD
XDOP•2y ago
nothing and also i get this warning
No description
pox
pox•2y ago
I tend playaround in the brower using inspect, and find something that works
Mayor McCheese
Mayor McCheese•2y ago
Did you do 5em?
XD
XDOP•2y ago
yeah that seems better than editing the tag in visual studio it worked but its too big now
Mayor McCheese
Mayor McCheese•2y ago
Dial it back Also try rem
XD
XDOP•2y ago
it worked thank you @.mayormccheese !
Mayor McCheese
Mayor McCheese•2y 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•2y ago
yeah will try that from now on thank you guys
Mayor McCheese
Mayor McCheese•2y ago
https://css-tricks.com/
CSS-Tricks
CSS-Tricks
CSS-Tricks is a website about websites.
XD
XDOP•2y ago
Thank you!!!
Accord
Accord•2y 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?