I have an issue that's driving me crazy. I want to prevent the focus ring on an uneditable HTML area.
When I create a simple solution (no services, no bootstrap, no nothing) using the same style - it's fine.
When I have a more complex project - the browser is ignoring the CSS to take off the outline on focus. This happens only on Chrome and Opera (webkit) - not on Firefox, IE or Edge.
Here's what happens when I click on the HTML area:
Then I open up the inspector - and this is what I see:
1) The class is clearly "svy-htmlarea" and I have added another class "noselect";
2) I set the "focus" on to see what was going on;
3) You can see it picked up my style on the svy-htmlview.noselect
4) The user agent stylesheet is not applied on the focus
Here's the stylesheet:
- Code: Select all
.svy-body,
body {
font-family: "Roboto","Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight:300;
}
.svy-main-window-container
{
background-color: #fff;
}
*:focus, *:selected {
/* remove all the focus */
outline: none !important;
box-shadow: none !important;
}
.form-control:focus,
.svy-label:focus,
.svy-htmlview:focus,
.svy-textarea:focus {
outline: none !important;
box-shadow: none !important;
}
.svy-field {
font-size: 14px;
}
.svy-field.noborder,
.svy-textarea.noborder,
.svy-label.noborder,
.svy-btn.noborder,
.svy-htmlview.noborder {
border: 0px none;
box-shadow: none;
outline: none;
}
.svy-htmlview.noselect,
.svy-htmlview.noselect:focus {
outline: none !important;
box-shadow: none !important;
}
Anyone know what's gong on?
Servoy 8.3.2
Web Packages Used:
Bootstrap Components
Bootstrap Extra Components
Idle Web Service
Block UI
Browser Fingerprint
Bootstrap 12grid layout