WebGrid 10 CSS SVG URL issue due to escaped double quote instead of single quote

3 replies. Last post: December 21, 2016 1:36 AM by Yudi
Tags :
  • (None)
  • New Discussion
  • New Question
  • New Product Feedback
Mike DearmanMember

I’m having an issue with 2 of the SVG background-images used on hierarchical records plus and minus icons.  It looks like the SVG encoding had an issue of some kind, where it changed a single quote to \”

This causes the icons to not display at all. 

From D:\Program Files (x86)\Intersoft Solutions\WebUI Studio for ASP.NET\Themes Source\Modern:

.grid-frame div[ui-part="grid-table"] tr[type="Record"][childExpanded="False"]>td[type="CellExpander"]>div[onclick]{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'          width='32px' height='32px' viewBox='0 0 32 32' %3E%3Cpolygon fill='%231a7cf9' stroke='%231a7cf9\" points='26.689,15.492 16.507,15.492 16.507,5.311 15.492,5.311 15.492,15.492 5.311,15.492 5.311,16.507 15.492,16.507          15.492,26.688 16.507,26.688 16.507,16.507 26.689,16.507 '/%3E%3Cpath fill='none' stroke=\"%231a7cf9' stroke-miterlimit='10' d='M31.458,27.458c0,2.209-1.791,4-4,4H4.542c-2.209,0-4-1.791-4-4V4.542      c0-2.209,1.791-4,4-4h22.916c2.209,0,4,1.791,4,4V27.458z'/%3E%3C/svg%3E")}.grid-frame div[ui-part="grid-table"] tr[type="Record"][childExpanded="True"]>td[type="CellExpander"]>div{background-image:url("data:image/svg+xml;charset=utf8,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'          width='32px' height='32px' viewBox='0 0 32 32'%3E%3Cpath fill='none' stroke='%231a7cf9\" stroke-miterlimit='10' d='M31.458,27.458c0,2.209-1.791,4-4,4H4.542c-2.209,0-4-1.791-4-4V4.542        c0-2.209,1.791-4,4-4h22.916c2.209,0,4,1.791,4,4V27.458z'/%3E%3Crect stroke=\"%231a7cf9' x='5.311' y='15.492' width='21.379' height='1.015'/%3E%3C/svg%3E")}

Looking through the file, it looks like there are several other instances of this issue too like .webui-restore,.scheduler-editor-content [ui-part="restore"] rules, etc.

If you paste in the invalid URL, Chrome reports error on line 1 at column 169: attributes construct error.
But if I change the incorrect \” to ‘ it renders fine.  I attached a screenshot of the messages.

I’m not sure how it encoded wrong, but this is the original webui-bootstrap\scss\webui\icons\_svg-mono-variables.scss

$wi-plus-outlineencode-svg("<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'          width='32px' height='32px' viewBox='0 0 32 32' ><polygon fill='#{$wi-monochrome-color}' stroke='#{$wi-monochrome-color}' points='26.689,15.492 16.507,15.492 16.507,5.311 15.492,5.311 15.492,15.492 5.311,15.492 5.311,16.507 15.492,16.507       15.492,26.688 16.507,26.688 16.507,16.507 26.689,16.507 '/><path fill='none' stroke='#{$wi-monochrome-color}' stroke-miterlimit='10' d='M31.458,27.458c0,2.209-1.791,4-4,4H4.542c-2.209,0-4-1.791-4-4V4.542        c0-2.209,1.791-4,4-4h22.916c2.209,0,4,1.791,4,4V27.458z'/></svg>");

$wi-minus-outlineencode-svg("<svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px'          width='32px' height='32px' viewBox='0 0 32 32'><path fill='none' stroke='#{$wi-monochrome-color}' stroke-miterlimit='10' d='M31.458,27.458c0,2.209-1.791,4-4,4H4.542c-2.209,0-4-1.791-4-4V4.542        c0-2.209,1.791-4,4-4h22.916c2.209,0,4,1.791,4,4V27.458z'/><rect stroke='#{$wi-monochrome-color}' x='5.311' y='15.492' width='21.379' height='1.015'/></svg>");
 

Is there an updated version of webui-bootstrap.min.css ?  I don’t use SCSS in my project, so I can’t regenerate this from the original files.


1 attachment
All times are GMT -5. The time now is 7:41 PM.
Previous Next