:focus CSS not loading - Webkit

Forum to discuss the new web client version of Servoy.

:focus CSS not loading - Webkit

Postby bcusick » Sun Sep 23, 2018 2:01 pm

Hey Guys,

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:

focus-ring.png


Then I open up the inspector - and this is what I see:

inspector.png


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
You do not have the required permissions to view the files attached to this post.
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA

Re: :focus CSS not loading - Webkit

Postby bcusick » Tue Sep 25, 2018 1:43 pm

After quite a few hours of frustration - I figured it out.

Eventhough the .svy-htmlview DID have no outline - the span AFTER THAT did have the outline.

ADDED:
Code: Select all
.svy-htmlview span:focus{
     outline: none !important;
}


DONE and done! :)
Bob Cusick
bcusick
 
Posts: 1255
Joined: Wed Apr 23, 2003 11:27 pm
Location: Thousand Oaks, CA USA


Return to Servoy NGClient

Who is online

Users browsing this forum: No registered users and 10 guests

cron