3

I'm having trouble inserting style block inside a display template.

See code below:

<a class="articleListing" href="_#= linkURL =#_" title="_#= $htmlEncode(carouselHeading) =#_">
      <style type="text/css">
        @media all and (max-width:767px){
            .carouselImage {
                background: url("_#= carouselImage =#_?RenditionID=5") no-repeat center center transparent;
            }       
        }      
       </style>

    <div class="carouselImage"> </div>
</a>

The style block get's like this

  <style>
  //<![CDATA[               
  @media all and (max-width:767px){                 
      .carouselImage{                       
          background: url("../466175.JPG?RenditionID=5") no-repeat center center transparent;                   
      }   
  }                    
  //]]>
  </style>

How can I insert a style block without

//<![CDATA[ 
5
  • This is a long shot, but it's not something to do with the $htmlencode in the anchor's attributes, right ? That he's eating up everything and encoding it ? Maybe it needs a ";" at the end. Mar 4, 2014 at 9:14
  • - Maybe it needs a ";" at the end? Where exactly do you mean
    – Plexus81
    Mar 4, 2014 at 9:40
  • Just a guess, but I meant this: title="#= $htmlEncode(carouselHeading); =#" -> after carouselheading) Mar 4, 2014 at 10:08
  • Didn't make any difference. Probably I need to find some javascript that render out the style block
    – Plexus81
    Mar 4, 2014 at 15:48
  • Check link for solution that may work [sharepoint-2013-display-templates-media-queries-to-get-image-rendition][1] [1]: sharepoint.stackexchange.com/questions/91758/…
    – Plexus81
    Mar 11, 2014 at 12:41

2 Answers 2

1

Solution found here..

check this link

<!--#_
AddPostRenderCallback(ctx, function()
{    
     var width = $(window).width();
     var rendition = '?RenditionID=2'; 
     if(width <= 320){
         rendition = '?RenditionID=1';
     }
     jQuery('.image-to-fix').each(function(){
           jQuery(this).css('background-image', jQuery(this).attr('data-image') + rendition);
     });
});
_#-->
1

This should work. I faced same issue in custom Page layout and fixed it with this.

<!-- MS: <style type="text/css">-->
<!--
#pageContentTitle {display:none;}
-->
<!-- ME: </style>-->
1
  • Worked perfectly in my case to add custom CSS. Thanks! Sep 22, 2016 at 13:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.