I would like to have clearly visible visual feedback when and during touching the buttons. When I release the button, the normal state should return after a short time.
Is this possible, and if so, how?
I don’t know of a feature like this in Bootstrap 5. Here are the docs.
It works fine, thank you.
only I use timerRef = SetTimeout(… for 100 ms and not ontouchend(…
So it is better to see.
My only problem is to find out, is the Android Device in Darcmode or not…
That will be better for the different colors.
I override dark mode with this css, so the background stays white and text stays black no matter if in dark mode or light mode.
/* Override dark mode */
html {
background: white;
color: black;
}
thank you.
I do that, but no effect.
Samsung S23+
Set the “backgroundColor” on a per Form basis (in Project Explorer) and in the Project Properties, then try:
html {
background: transparent !important;
}
The Bootstrap 5 buttons darken when you click/tap them, but they don’t in AppStudio.
The Bootstrap 4 buttons in AppStudio do, but the Bootstrap 5 buttons don’t
The exact same scenario goes for when you hover the mouse over a button.
Hope that makes sense.
Is this in the Design Screen, or at run time?
When you run the app in the browser (also in the app after building with VoltBuilder) and click on a button, there is no visual feedback.
When you hover or click a bs5 button it should darken, see here: Buttons · Bootstrap v5.0
But the same button in AppStudio ( run in browser and Voltbuilder app) they don’t.
You’re right - we’ll dig into this.
I think you’re looking at old Bootstrap docs. If you check out latest version, there isn’t any visual feedback:
It seems I was looking at the old docs, however, the new docs states you only need to add your own visual styles if you use “.btn” class on its own, otherwise it should show visual feedback.
I have found the issue, AppStudio automatically adds the class “collapse show“, remove those and the button now ‘dims’ when clicked or when you hover the mouse over it, as expected.
It seems the class “collapse show“ applies the ‘dim” (darkened button). so when you click/hover over a button, it doesn’t dim because its already dimmed.
I did think the b55 buttons looker darker than in bs4 but i assumed that was the new bs5 style.
BS5 css for .btn-danger
--bs-btn-color: #fff;
--bs-btn-bg: #dc3545;
--bs-btn-border-color: #dc3545;
--bs-btn-hover-color: #fff;
--bs-btn-hover-bg: #bb2d3b;
--bs-btn-hover-border-color: #b02a37;
--bs-btn-focus-shadow-rgb: 225,83,97;
--bs-btn-active-color: #fff;
--bs-btn-active-bg: #b02a37;
--bs-btn-active-border-color: #a52834;
--bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
--bs-btn-disabled-color: #fff;
--bs-btn-disabled-bg: #dc3545;
--bs-btn-disabled-border-color: #dc3545;
As a temporary measure I have to run this function to remove those erroneous classes,
document.querySelectorAll('.btn').forEach(btn => {
btn.classList.remove('collapse', 'show');
});
to get the visual feedback to work on the buttons.
Looks like something worth digging into here. Thanks!
There is the root cause of the .show class, it acts the same as .active.
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active
Specificity: (0,3,0)
{
color: var(--bs-btn-active-color);
background-color: var(--bs-btn-active-bg);
border-color: var(--bs-btn-active-border-color);
}
The reason we need to remove .show AND .collapse
.collapse:not(.show)
Specificity: (0,2,0)
{
display: none;
}
Thank you!
We’re not adding the collapse and show classes. Bootstrap is doing this automatically.
Could it be related to this open issue in Bootstrap?
No, that seems to be regarding the border for outline buttons.
Good news! We think we found something that will fix this. Try the beta here:
Windows:
http://nsbasic.com/app/downloads/AppStudio-v9.4.1b7.exe
Mac:
Ok, ill give it a go once i have finished my current project.