CODEWITHSUNDEEP
htmlblazor
Mark Grecco
Mark Grecco

Reputation: 63

Blazor HTML Rendering Issue

I'm not sure how to best explain this because I'm a desktop app developer just starting in web. It seems that Blazor is turning carriage returns in the .razor file into elements in the html rendering. I've noticed this for a while now but these elements didn't seem to affect anything. Well I came across a situation where they are affecting my layout. If you look at my screenshot you will see in this page control I made there is a space between the Next and Last buttons. My other screenshot shows the html elements that get rendered and you see a < !-- !--> between those buttons. Also those elements seem to be all over the place. Through some testing I realize that it's the carriage return in the html code in the .razor file. As you can see I put the First and Prev buttons on one line of code but the Next and Last buttons are on 2 lines.

Page Control

Html Elements

<div class="my-2">
<button disabled="@(CurrentPage==1)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="First_Click">&#57;</button><button disabled="@(CurrentPage==1)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Prev_Click">&#51;</button>

@for (int i = 1; i <= TotalPages; i++)
{
    int x = i;
    <button disabled="@(CurrentPage==i)" class="btn btn-sm @(CurrentPage==i ? "btn-primary" : "btn-outline-primary") py-0 px-1" style="font-size: small; font-family: Courier;" @onclick="()=>Page_Click(x)">@i</button>
}

<button disabled="@(CurrentPage==TotalPages)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Next_Click">&#52;</button>
<button disabled="@(CurrentPage==TotalPages)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Last_Click">&#58;</button>

Upvotes: 0

Views: 294

Answers (1)

MrC aka Shaun Curtis
MrC aka Shaun Curtis

Reputation: 30036

As you appear to be using Bootstrap, try using a ButtonGroup link here as a wrapper for the buttons. I have seen a similar issue before.

I've included an image of buttons within a button group in action in one of my applications

enter image description here

If you want some more detail come back to me and I'll point you to some code in a repository.

Upvotes: 1

Related Questions