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

cpenta · ‎10-07-2014

I tried this out and it seems like it only works on Chrome? Is this true? It would not work in Firefox.

howard8 · ‎08-19-2014

Actually, there is still a noticeable movement of the labels from right to left. I will raise a ticket on HI

hblair · ‎09-29-2014

Howard - Did you receive any update from HI to this alignment issue?

Thanks

Hank

tt-jtw · ‎11-17-2014

Was anyone able to get the solution presented working in Firefox. It seems to work find in Chrome and IE (v10 at least).

Brad Tilton · ‎11-17-2014

Looks like FF doesn't support addRule(), so try this to work across Chrome/IE/FF/Opera:

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;


})();




if (sheet.insertRule) {


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


} else {


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


}