Bootstrap Buttons Have Border Which Is Unclickable and Disappears When Clicked

Wappler General Need Help
1

I have created a page in my app with what I believe to be very vanilla Bootstrap 4. Here is the stylesheet:

<link rel="stylesheet" href="bootstrap/4/sandstone/bootstrap.min.css" />

The solid style buttons on the page appear to have a border which often disappears when the button is clicked making it suddenly look thinner, and isn't clickable which means you can sometimes click what looks like the button and nothing happens.

I can fiddle around with CSS to fix this, but I wondered if I have missed some simple Wappler setting for the button which prevents this from happening as it isn't a great user experience!

The button settings are below.

Best wishes,
Antony.

<button id="b_complete_booking_v2" class="btn btn-success" dmx-show="DETAILS" dmx-on:click="RUN_A_FLOW">Complete Booking</button>

button

2

Can you please post a screenshot of what exactly do you mean?
I see you are using the sandstone bootswatch theme, so it maybe styled like that there.

3

Thanks for the quick reply Teodor!

Here is a video of what I mean… so can some of the bootswatch themes create odd behaviour as well as just different visual styles?

button

4

I’ve just noticed that I have ‘none’ set as my Design Framework… could this be something to do with it?

none

The whole Bootstrap Theme Manager came out in Wappler after I’d started my project so I’ve never had the need to use it!

5

No.

I checked the sandstone theme: Bootswatch: Sandstone and it doesn't do what you show in your gif, so it's something in your CSS causing this.
Maybe you can provide a test page link so i can tell what's wrong.

6

I found the problem… it was a line of CSS which doesn’t show up in the Wappler Styles menu as it is in a CSS file referenced by the main design file specified in the project settings.

So if you have such a CSS structure, best to use Chrome Dev Tools to find the answer to this kind of question!