Closed Jinjinov closed 1 year ago
This was intentional from our side. We have added .btn-block
with some CSS styles so that the blocked Button would work as expected. Otherwise, users would have to wrap the button with some extra element, which would kinda of break the API of Blazorise syntax.
But my buttons with Block=true
don't work as expected. They are not block, they are inline.
I had to add this to make my buttons the same as in Bootstrap 4:
.btn-block {
display: block !important;
width: 100%;
}
.btn-block + .btn-block {
margin-top: 0.5rem;
}
That's weird. We already have that same CSS
Do you have other CSS with a higher specific in your project?
Ah, I see the difference - you are showing me https://blazorise.com/_content/Blazorise.Bootstrap5/blazorise.bootstrap5.min.css?v=1.1.4.1
and I am using:
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/zephyr/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/yeti/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/vapor/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/united/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/superhero/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/spacelab/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/solar/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/slate/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/sketchy/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/simplex/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/sandstone/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/quartz/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/pulse/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/morph/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/minty/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/materia/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/lux/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/lumen/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/litera/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/journal/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/flatly/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/darkly/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/cyborg/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/cosmo/bootstrap.min.css
https://cdn.jsdelivr.net/npm/bootswatch@5.1.3/dist/cerulean/bootstrap.min.css
No, that is not it. I forgot to upgrade <link href="_content/Blazorise.Bootstrap/blazorise.bootstrap.css" rel="stylesheet" />
to <link href="_content/Blazorise.Bootstrap5/blazorise.bootstrap5.css" rel="stylesheet" />
In Blazorise.Bootstrap5
<Button Block=true></Button>
the button has the deprecatedbtn-block
class that does nothing, because it doesn't exist anymore: https://getbootstrap.com/docs/5.1/migration/#buttons