ParamQuery grid support forum

General Category => Help for ParamQuery Pro => Topic started by: RedBully on January 08, 2015, 03:00:53 pm

Title: Glyphicon not rendering
Post by: RedBully on January 08, 2015, 03:00:53 pm

Hello,

I'm trying to render a glyphicon in a table cell by using the render function to set the cell content to
 

Code: [Select]

<span class='glyhicon glyphicon-search'></span>
On loading the page and inspecting the code, the grid cell looks ok:

Code: [Select]

<td class="pq-grid-cell " pq-col-indx="0">

    <span class="glyphicon glyphicon-search">
    </span>

</td>

But the icon is not rendering correctly.  I get a square block with E00E in it which is the type of icon I would get if the glyphicon library was not being referenced correctly.  The icons display correctly in the rest of the web page so I was wondering why they are not showing correctly here.

(I'm using both font-awesome and glyphicons in my webiste and have the same problem with both)

Any ideas?

Title: Re: Glyphicon not rendering
Post by: paramvir on January 08, 2015, 05:21:11 pm

It works fine. Please check this jsfiddle.

http://jsfiddle.net/b6b710mz/29/

Title: Re: Glyphicon not rendering
Post by: RedBully on January 08, 2015, 06:33:35 pm

Hello

Thanks for that.  I updated the jsFilddle to put in some additional icons in the call to render:

Code: [Select]

        var test = "<span class='glyphicon glyphicon-pencil'></span>";
        test += "<span class='glyphicon glyphicon-envelope'></span>";
        test += "<span class='glyphicon glyphicon-glass'></span>";
        test += "<span class='glyphicon glyphicon-music'></span>";
        test += "<span class='glyphicon glyphicon-search'></span>";
        test += "<span class='glyphicon glyphicon-heart'></span>";
        test += "<span class='glyphicon glyphicon-star'></span>";
        return test;

This is interesting because only pencil and envelope get displayed and also they don't look like the right icons as shown here:
http://getbootstrap.com/components/#glyphicons (http://getbootstrap.com/components/#glyphicons)
or here:
http://glyphicons.com/ (http://glyphicons.com/)

It looks like the grid is just rendering the default UTF-8 character from its built in character set
http://www.utf8icons.com/character/9999/pencil (http://www.utf8icons.com/character/9999/pencil)

It implies that the underlying font files are not being referenced correctly.
The bootstrap css references the font files with a relative URL

Code: [Select]

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), .......
}

Could the relative URL be wrong in the context of the grid?

Title: Re: Glyphicon not rendering
Post by: paramvir on January 09, 2015, 10:07:17 pm

yes, you are right. glyphicons do not work properly in pqgrid.

That doesn't seem to be a url related issue. I'm looking for a workaround and would share the solution ( if found ) with you.

Title: Re: Glyphicon not rendering
Post by: RedBully on January 10, 2015, 01:29:43 am

I did some testing using the FireFox Inspector and noticed that the following CSS is being picked up:

Code: [Select]

div.pq-grid *{
font-family:Arial;
font-size:12px;
margin:0;
padding:0;
line-height:normal
}

Using the inspector ability to turn of CSS features, I turned off the font-family and this fixed the problem.

Do you have any ideas on how to best resolve this without impacting on the grid at all?

Title: Re: Glyphicon not rendering
Post by: RedBully on January 10, 2015, 01:55:57 am

I have implemented a workaround to this problem by adding the following CSS to one of my CSS files:

Code: [Select]

div.pq-grid .glyphicon {
    font-family: "Glyphicons Halflings";
}

Do you have a better solution because this fix is coupled to both the implementation of Bootstrap/Glyphicons AND the implementation of ParamQuery.

Title: Re: Glyphicon not rendering
Post by: paramvir on January 11, 2015, 07:10:57 pm

Thanks for sharing the workaround. The other way could be to remove font-family and font-size from the pqgrid css and let it pick them from the page default style similar to JQueryUI widgets. That would avoid any conflict.