search

Megabit / Blazorise

Blazorise is a component library built on top of Blazor with support for CSS frameworks like Bootstrap, Tailwind, Bulma, AntDesign, and Material.
https://blazorise.com/
Other
3.29k stars 530 forks source link

`<Button Block=true></Button>` not working in Bootstrap5 #4347

Closed Jinjinov closed 1 year ago

Jinjinov commented 1 year ago

In Blazorise.Bootstrap5 <Button Block=true></Button> the button has the deprecated btn-block class that does nothing, because it doesn't exist anymore: https://getbootstrap.com/docs/5.1/migration/#buttons

stsrki commented 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.

Jinjinov commented 1 year ago

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;
}
stsrki commented 1 year ago

That's weird. We already have that same CSS

image

Do you have other CSS with a higher specific in your project?

Jinjinov commented 1 year ago

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
Jinjinov commented 1 year ago

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" />