Can you left align labels on forms in Eureka? CSS?

[howard8]

Hi,

I am setting up Eureka for the first time and the new UI14 does a right alignment of labels so they are now right next to the inputbox. We are not really happy with this because labels that sit on their own line (like a description field label), are completely left aligned. see below:

This is not a good look in my opinion

I have found no admin settings to get the labels to left align.   In the CSS, I can see that original left alignment is still their but it over-ridden by a right alignment (presumably UI14 CSS). Even though I have custome CSS themes turned on, we can't see to touch this value (we can in developer mode in the browser).   My last resort was to use a client script, which works but is so slow that you see the page load with right aligned text before moving it to the left (not a good look either).   The code is below:

function onLoad() {
     //Change the color of all form section headers


     $$('.label').each(function(elmt) {
           elmt.style.textAlign = 'left';
     });
}

in browser development mode the CSS in quesition is this:

HTML[data-doctype=true] TD.label, HTML[data-doctype=true] TD.foreign {text-align: right;}

Does anyone know how I can address this issues please?   I am running out of ideas.

Thanks,

Howard Elton

Senior ITSM Solution Architect

[hyena]

Looking for the same answer...any luck?

[Brad Tilton · Accepted solution]

I'm not sure of a way to do it through css, but you could optimize your javascript a bit to make the page load faster. Instead of iterating through every label and changing the style you could use your onLoad client script or a global ui script inject a style tag into the page that styles everything all at once. I think it's the iterating through that is causing your slowdown. I've lightly tested this and it appears to work:

var sheet = (function() {

   // Create the <style> tag

   var style = document.createElement("style");



   // Add a media (and/or media query) here if you'd like!

   // style.setAttribute("media", "screen")

   // style.setAttribute("media", "@media only screen and (max-width : 1024px)")



   // WebKit hack 

   style.appendChild(document.createTextNode(""));



   // Add the <style> element to the page

   document.head.appendChild(style);



   return style.sheet;

})();



sheet.addRule("TD.label", "text-align: left !important;", 0);

[howard8]

Thanks Brad! That is brilliant. It works perfectly. It's interesting to note that UI14 is now ignoring label styles that UI11 didn't.   The   "background-position:" style used for the VIP icon placement is now ignored in field style and overridden in U14. Basically UI14 is less customisable than UI11 without resorting to client scripts. As a result of left aligning the label, we have to right align the icon to avoid overlap, using:

sheet.addRule("TD.label", "background-position: 95% 45% !important;", 0);  

So the final Client script looks like this:

function onLoad() {

   var sheet = (function() {

   // Create the <style> tag

   var style = document.createElement("style");



   // Add a media (and/or media query) here if you'd like!

   // style.setAttribute("media", "screen")

   // style.setAttribute("media", "@media only screen and (max-width : 1024px)")



   // WebKit hack

   style.appendChild(document.createTextNode(""));



   // Add the <style> element to the page

   document.head.appendChild(style);



   return style.sheet;

   })();



   sheet.addRule("TD.label", "text-align: left !important;", 0);

   sheet.addRule("TD.label", "background-position: 95% 45% !important;", 0);

}

Thank you very much for your solution.

Howard.

[Jim Coyne]

I've actually disabled the new UI14 in our development environment.   I'm hoping they come up with a better solution to incorporate some of the new features along with the older UI.

Here are the details from the Wiki article - Administering the User Interface - ServiceNow Wiki

To disable UI14:

1. Enter sys_properties.list in the navigation filter.
2. Locate the glide.ui.doctype property in the System Properties list.
3. Set the property to false.
4. Log out and log back in.

   This disables UI14 for the instance. UI14 is disabled in individual user sessions when the user logs out and logs back in.