UIcommons hover font color issues

hossam · December 16, 2015, 8:19pm

in the provider search page when I hover the mouse over one of the results, the font’s color becomes white and disappears into the white background…How can I stop it from doing that?

darius · December 16, 2015, 8:48pm

Generally this behavior comes from table tr:hover as defined here:

github.com

openmrs/openmrs-module-uicommons/blob/master/scss/src/main/resources/sass/reference/fragments/_base.scss#L334


}


tr:nth-child(even) {
  background: $focus;
}


tr:nth-child(odd) {
  background: white;
}


tr.hover{
  background: lighten(desaturate($link, 20%), 20%);
  color: white;
  cursor: pointer;
}


tr.selected{
  background: $link;
  color: white;


  a {

And this is supposed to set the font to white, but the background color to blue. I’m not sure why you aren’t getting the blue background – maybe you can try debugging the css in the browser to see what is happening?

hossam · December 16, 2015, 9:06pm

how to debug CSS in the browser? How do I edit the .highlighted CSS class? Can I Edit the_base.CSS file? When I edit it and restart tomcat it goes back to default

burke · December 16, 2015, 10:20pm

You can edit just about anything in the browser’s inspector by clicking on it.

If you manually add the highlighted class to the tr (and avoid moving your mouse over the row, which would remove it), you can see the background color is not being used for some reason:

Perhaps the table tr:nth-child(even) style is overriding it?

hossam · December 27, 2015, 4:03pm

When I remove the line “color: white;” the problem disappears…can’t I just do this? how can I make this permanent for the server computer and all devices connected to the system? are these CSS files embedded in the WAR file deployed in Tomcat?

What do I do? someone please help? lol this is how it looks with the font color blue can someone please make a screenshot of how it is supposed to look like?

burke · January 25, 2016, 8:34pm

@darius, this provider page on demo looks like it’s messed up to begin with (missing some of the default page styling). And, in fact, providers disappear by turning white, when you hover over them. Is this just a bug on the demo server?

darius · January 25, 2016, 9:08pm

This is a bug everywhere, not just on the demo server.

However: this is a bug in providermanagement module, which is not really a community-supported module, so I don’t see us prioritizing a fix for this. (That module is included in the reference application, but only so we can support different Provider Types, until TRUNK is fixed. This screen isn’t linked to from the Reference Application’s admin pages, though I think you can do the equivalent management of providers from the Manage Accounts page.)

The actual fix to this might be as trivial as replacing this line of code to instead include the standard includes from uicommons instead of uilibrary:

github.com

openmrs/openmrs-module-providermanagement/blob/master/omod/src/main/webapp/fragments/decorator/providerManagementPage.gsp#L1


${ ui.includeFragment("uilibrary", "standardIncludes") }


<% ui.includeCss("providermanagement", "providerManagement.css") %>
<% ui.includeJavascript("jquery.js") %>
<% ui.includeJavascript("jquery-ui.js") %>




<!DOCTYPE html>
<html>
<head>
    <title>${ "OpenMRS" }</title>

(The history of this module is that @mogoodrich wrote the bulk of this module for PIH Rwanda, though I don’t think it was ever deployed, before any work was ever started on Mirebalais or the Reference Application. This module was then included in Mirebalais and the Refapp for one specific feature. It has more functionality, but this is not intentionally exposed in the Refapp, and won’t be supported in future OpenMRS releases.)