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

howard8 · ‎08-13-2014

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

Brad Tilton · ‎08-19-2014

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);

View solution in original post

tt-jtw · ‎11-17-2014

Yes, this worked. I didn't realize that the params for insertRule and addRule were different. But all is good in FF now.

Thank you!