Increase Category View Width to Accommodate Padding

[cmb]

I am using Phoca Gallery version 4.0.4 on a Joomla version 3.2.0 Website. One menu item of the site is configured for a Category View. In Phoca Gallery > Control Panel > Options > Thumbnails, the Medium Image Width is 200 (pixels) and the Medium Image Height is 200 also. All thumbnails have been regenerated.

When the frontend page is rendered, images that are 200 pixels wide are displayed to the right of center within the surrounding box. They are offset by the width of the left padding (10 pixels) of the wrapping division with the class of pg-cv-box. The right side of the image falls outside the enclosing box.

The CSS selector for the box width is created at line 1936 of \components\com_phocagallery\views\category\view.html.php. Apparently no allowance is made for the padding within the box. If I increase the width of class pg-cv-box from 200px to 220px, the box size is increased and the image displays in the correct position.

Is there a workaround so that the correct box width is calculated?

[Jan]

Hi, can I see some screenshot what you exactly mean? (can you paste a screenshot with standard template).

Are you using bootstrap3? ( viewtopic.php?f=1&t=24472&start=10#p92806 )

Jan

[cmb]

Are you using bootstrap3? ( viewtopic.php?f=1&t=24472&start=10#p92806 )

Yes, the site uses Twitter Bootstrap version 3.0.3.

I added the suggested CSS selector in the forum posting cited above to my template.css file with a few changes. I deleted the extra semicolon near the end of the CSS code. Also, I'm allergic to the !important declaration so I just increased the specificity of my CSS selector.

Code: Select all

#main #phocagallery *,
#main #phocagallery *:before,
#main #phocagallery *:after {
	-webkit-box-sizing: content-box;
	-moz-box-sizing: content-box;
	box-sizing: content-box;
}

That corrects the problem. Thank you, Jan.

[Jan]

Hi, yes, !important is very problematic (normal people usually don't like it) but if you have a system which is built by many parts and some part which renders as last can influence the previous part, this rule can help to not e.g. destroy the layout.

If the changes work without !important, this is great message and of course you should not use this rule.

Jan