Clarity

Expand all | Collapse all

The Input CSS has validation errors. Please resolve.

Jump to Best Answer
  • 1.  The Input CSS has validation errors. Please resolve.

    Posted 10-14-2015 04:09 PM

    Hi there!

      I recently installed CA PPM 14.3 and as usual I would take one of the UI themes to customize it, so I decided to go with "Teal and Grey" this time because it looks nicer.  But when I copy the css into a new theme (so I can freely modify it) I get this message "The Input CSS has validation errors. Please resolve.".  I don't know why am I getting this message since I'm using the exact same css code as the original Teal and Grey.

     

    Any ideas?

    Thanks!

    Kind regards

    Patricio

    Attachment(s)

    css
    tealandgrey.css   154K 1 version


  • 2.  Re: The Input CSS has validation errors. Please resolve.

    Posted 10-14-2015 05:28 PM

    Ok, we discovered that it's an user interface issue that's not allowing to save all of the css (it as a characters number limit?).  We tried overriding the css via SQL and it works!

     

    update CMN_UI_THEMES

    set css = (select css from CMN_UI_THEMES where code = 'tealgrey')

    where code = 'test'

     

    Still after this, we cannot change it using the user interface... it's not ideal to use sql to update neither...

     

    any ideas?

    Thanks!



  • 3.  Re: The Input CSS has validation errors. Please resolve.
    Best Answer

    Posted 10-15-2015 06:17 PM

    This had been reported (recently) as the following defect in 14.3:

     

    CLRT-79002 Can not save new UI Theme using the Teal and Grey UI Theme CSS Code

     

    Steps to Reproduce:
    1. Create a new UI Theme
    2. Copy the Teal and Grey UI Theme CSS Code
    3. Paste the Teal and Grey UI THeme CSS Code into the new UI Theme
    4. Click save
    Expected Result:Saves correctly
    Actual Result:Receive Error "The Input CSS has validation errors. Please resolve.". The CSS Code is filled up with \t \n \r text and the css fails.

     

     

     

    I carried out some analysis on this once I saw it, and determined it was this one entry that was tripping it up:

     

    .caui-ganttBarLabelBkgrnd-IE{

      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ui/uitk/tngtheme/images/gantt/gantt_bg_title_30-75.png', sizingMethod='scale');

    }

     

    Everything else saves as expected via the UI.

     

    Specifically it doesn't like 'src' followed by a parameter in single quotes.

     

     

    So the workaround would be to remove this entry or provide an alternative.

     

    Possible alternatives might include:

     

    .caui-ganttBarLabelBkgrnd-IE{

      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=ui/uitk/tngtheme/images/gantt/gantt_bg_title_30-75.png, sizingMethod='scale');

    }

     

    (quotes around the src attribute have been removed - I've seen examples of this elsewhere but not certain on the browser support).

     

    Or maybe it's possible to drop the 'named arguments' by just describing the entry like this:

     

    .caui-ganttBarLabelBkgrnd-IE{

      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(true, 'scale', 'ui/uitk/tngtheme/images/gantt/gantt_bg_title_30-75.png');

    }

     

    (Here I've supplied the parameters in the order they are defined on the page https://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx but I'm not sure if they are just listed alphabetically here and maybe a different order is required).

     

    .caui-ganttBarLabelBkgrnd-IE{

      filter:progid:DXImageTransform.Microsoft.AlphaImageLoader('ui/uitk/tngtheme/images/gantt/gantt_bg_title_30-75.png', 'scale');

    }

     

    (If a different order can work, this would be the one I would try, dropping the 'Enabled' property).

     

    One of these options may work, but I have only gone as far as checking the CSS then saves correctly in the theme, not seeing how it affects the rendering of the gantts on all our supported browsers to see if that is correct.  Hopefully this helps though, otherwise further saves can still error out, and unfortunately you do want the UI to validate your CSS and not just do it via database updates because when the CSS is bad enough it has been able to bring the application down or make it otherwise unusable - better to be safe.

     

    I hope that helps.



  • 4.  Re: The Input CSS has validation errors. Please resolve.

    Posted 10-16-2015 01:38 AM

    Thanks for sharing this tip, Nick

     

    Happy Friday ! Have a nice weekend

     

    Regards

    NJ



  • 5.  Re: The Input CSS has validation errors. Please resolve.

    Posted 10-22-2015 04:55 PM

    Thanks Nick & Patricio - you just saved my day.