Divider in Bootstrap 5

[stevenlupo]

The Divider in Bootstrap5 does not display properly.

Try:

<Divider DividerType=@DividerType.TextContent Text="some text goes here" />

and you will get the line but the text blurred in the middle of the page.

[muratyuceer]

Same here

[stsrki]

It should be fixed in the latest 0.9.5.2. https://github.com/Megabit/Blazorise/commit/32a62d5f0d01fab1af9cb82b8311929a8ae57f76

Can you check your project references? Also, clear the cache with Ctrl+F5.

[stevenlupo]

This is not fixed. I'm using 0.9.5.2. I emptied the cache and did a hard reload.

I'm not sure what you mean by check project references, what should I be checking?

[stsrki]

@stevenlupo By project reference, I meant to check that all your projects are using 0.9.5.x version. We got a lot of folks coming from the ABP framework with similar issues and problems often that ABP internally is still using an older version of Blazorise. If that is not the case you can ignore it.

BTW, can you post the screenshot of the divider?

[stevenlupo]

I only use Blazorise in one project, so project references are okay.

Here's a screenshot that shows the text in the center of the page, yet the horizontal line is at the top.

Here's the entire code for the page:

[stsrki]

That's weird truly. Can you inspect in dev tools to see what else in your CSS might affect the divider position?

[stevenlupo]

I'm not seeing anything leap out at me.

Are you saying if you use the exact code, it displays correctly?

[stevenlupo]

here's a screenshot of the generated html.

here's a snapshot of the css on the hr element, maybe you can see something:

[stsrki]

You're right there is something wrong. In my tests, it worked well. But if I write only those same components as you have then it breaks.