Name length too big for mobile view

[plamen]

Hi,
May be it was discussed already, but couldn't find proper solution/setting.

Is it possible text for download links to be resized according to the width of the bounding box (especially when using Name, since filenames are usually shorter).
When using in mobile view, and if you have several download links close together, big strings span on 2 rows and become displaced.

in css '.phoca-dl-file-box-mod' height is set to 32px, but text overflow below the box.

[Jan]

Hi, hmm, I think, you need to customize it directly in the CSS. In Phoca Download CSS (making e.g. own custom.css) or directly in template css which can then overwrite Phoca Download CSS as it is loaded afterwards.



Jan

[plamen]

May be I will modify php code and will truncate string according to box length.
Or may be css can do that?

[Jan]

Hi, hmm, I think you should do it per CSS, e.g. resizing font size, etc. etc.

Jan

[plamen]

Hi,
I modified \media\com_phocadownload\css\main\phocadownload.css as follows:
row 317:

Code: Select all

.phoca-dl-file-box-mod .pd-document32,
#phoca-dl-file-box .pd-document32,
#phoca-dl-category-box .pd-document32,
#phoca-dl-most-viewed-box .pd-document32,
#phoca-dl-download-box .pd-document32 {
	background: 	url('../../images/icon-document-32.png')  0px center no-repeat;
	height:			32px;
	line-height:	32px;
	padding-left:	36px;
	
	white-space: 	nowrap; 	/*added*/
	text-overflow:	ellipsis;	/*added*/
	overflow:		hidden;	/*added*/
}

Last 3 properties did the trick, now is pretty nice on mobile phone with responsive template ( Icons 32px switched ON ).
These lines should be added for other icon sizes as well: 16, 48, 64px, and may be somewhere else in case icons not used.
I have to see how to make custom.css otherwise my changes will be lost on update.

[Jan]

Hi,

yes, these changes should be done in custom.css, not in phocadownload.css file which will be overwritten when upgrading.

In administration - in Phoca Download Styles, just create new file (add css) and add this code there. You can then set ordering of the CSS files, so this customized file will be loaded after phocadownload.css

Jan

[plamen]

Thank you for advice, I have custom.css in Styles (CSS) and added these lines there.
Unfortunately I can not change ordering of css files there (using ISIS template, Joomla! 3.4.1).
Custom.css is published, checked for errors, but obviously not loaded.
In custom.css options - Ordering is set to 'First' and no other options in drop-down box.
In column Language - 'not defined'. Also can not be changed. Is it important?
Display Specific Layout is set to 'No', changing to 'Yes' do not improve situation.

[Jan]

Hi, you cannot change the ordering of styles which are set in template but you can change the ordering of the Phoca Download styles - so the custom.css will be loaded after default.css (the custom.css should overwrite the default.css so it must be loaded after default.css)

Jan

[plamen]

I'm trying to change order as shown here (using isis and Hathor backend templates), but when I click 3 dots icon all css entries disappear from screen - look like a bug in admin section.
As a result - no change of ordering.

[Jan]

Hi, yes, maybe this can be related to problem which came with Joomla! 3.4:

viewtopic.php?f=31&t=28725&p=105671#p105632

I will make changes regarding this.

Jan