Google comments: Default Value for width is set to 100px instead of 100%

[paulmassen]

Might be because of the twig replace function ?

data-width="{{ width|default('100%')|replace({'px':'','%':''})|e('html_attr') }}"

[Sommerregen]

Hi @nepomuk13,

setting a width for Google comments is somewhat complicated. As you can see from the lines googleplus.html.twig#L12-L18 additional CSS is required in order to adjust Google comments.

In your case, did you set a width? Or did you set it to 100%? If yes, then probably the Google comments HTML has changed and requires new rules. I will test it in the next days and try to reproduce your issue.

[Sommerregen]

Update: I tested JSComments v2.0.1 with Grav v1.1.8 and cannot recreate the issue. I used the following settings:

Can you try the same and report back?

[paulmassen]

Hi Sommeregen and thanks for your investigation.

Here is what I have: When width is left empty, the output is 100px wide, and taking a look at the inspector confirm this:

<div id="widget_bounds" class="Upa r3" style="width: 100px;" o

Same happen when I fill width with 100%: output is 100px

Actually any value with the percent is converted to px. I will try on other grav install and will let you know.

Thanks again

Edit: Same problem on other grav install. I will do some other test. Might be related to external js concatenation or twig caching maybe. I will let you know

[Sommerregen]

Hi @nepomuk13 ,

by default Google comments cannot be resized and always have a width of 100px. This is the width you see in the browser (it is loaded as an iframe). In order to allow different widths, styles are overridden googleplus.html.twig#L12-L18 (be aware, this is a HACK!). As you can see from there, the width you set in the admin page is printed without any changes. However those styles require !important attributes. Since it is working locally on my install Grav + Antimatter on Firefox (latest), I guess you use a different theme or a browser that don't understand the CSS rules (I think it must know CSS3). Therefore, you may adjust the styles for your needs.

[Sommerregen]

@nepomuk13 Any updates on this?

[Sommerregen]

Closed due to inactivity. Feel free to open it again.