Here's a sample of the code my view is generating:
<button class="keyboard-button bg-success" type="button">t</button>
Here's what it looks like in the inspector (both Firefox and Chrome):
<button class="keyboard-button bg-success" type="button" style="background-color: white;">t</button>
The problem is that the inline style attribute takes precedence over the bg class, so it's overriding my desired styling.
When I search for style= in my app code I have no hits.
Is it possible something is happening in the way I've configured the app? Here's the package.json:
{
"name": "arthur",
"private": true,
"dependencies": {
"@rails/actioncable": "^6.0.0",
"@rails/activestorage": "^6.0.0",
"@rails/ujs": "^6.0.0",
"bootstrap": "3.4.1",
"jquery": "3.4.1",
"turbolinks": "^5.2.0",
"webpack": "^4.46.0",
"webpack-cli": "^3.3.12"
},
"version": "0.1.0",
"devDependencies": {
"@babel/plugin-proposal-private-methods": "^7.18.6",
"@babel/plugin-proposal-private-property-in-object": "^7.21.11",
"@rails/webpacker": "^5.4.4",
"webpack-dev-server": "^3"
}
}
you can add a "breakpoint" on attribute changes in the chrome inspector. make sure your JS stops very early, e.g. by adding
at the bottom of your
<body>, and then add a breakpoint to attribute modifications:let it continue and wait for the breakpoint to be hit