Display detail button - modal box : css bug ?

[fabio42]

Hey there !
As I'm a bit of a prefectionist, could you tell me how I could have no truncated names of files in the modal box ?

As you can see the title of the file is cut. I saw in the css that the width is set to auto but here it doesn't work (still connected to this bootstrap thing I guess) ...
Any idea ?
Thanks in advance !

[christine]

Hi Fabio,

hmm, it's difficult, as it belongs to the modal box. I don't really know yet.

Does it belongs to h3.pd-ctitle? And which CSS Code did you find with above width?
It seems, that the title is too long. It's also not possible to use e.g: https://www.w3schools.com/cssref/pr_tex ... -space.asp (nowrap).

Kind regards
Christine

[fabio42]

Hello Christine !
Well, to say the least, I have absolutely no idea.
Here is a link to the page where you can replicate this.
I tried using "firebug" but there are some many elements to check and I'm not tech-savvy enough...
Here's a screen capture of the element I saw (width is set to "auto", and yet, the title is cut) but is it the one you told me about ?


You said :

It's also not possible to use e.g: https://www.w3schools.com/cssref/pr_tex ... -space.asp (nowrap)

What do you mean ? I can't use what in a title ?

Can you help ?
Fabio

[christine]

Hi Fabio,

OK, above link is general info. You can test there for other cases.

Checked your site, but under: Details, there is no title.
So, the only one you can try now: Use the blue marked CSS (it's inline) and put it in your custom.css

Code: Select all

.modal-dialog, #phModalDetail, .modal-content {
min-width: 800px;  
}

Code: Select all

.modal-dialog #phModalDetailDialog {formatting}
			

don't know, if all segments are needed.

Kind regards
Christine

[fabio42]

oups ! forgot to give you the access rights for the file called "Mandela - correction" ! Fixed ! Does it help you in grasping the situation better ?

[christine]

Ah, I see

Code: Select all

.modal-dialog {
min-width: 500px;  
}

Temporary it works. As there is compiled CSS etc. etc. e.g. to a custom.css.

Kind regards
Christine

[fabio42]

That did the trick !!! Thanks !!
Now, could you explain to me, how come :

Code: Select all

width: auto;

does not work ? It should read just to all sizes of titles , no ?
Fabio

[fabio42]

BY fiddling in the template (Gantry) options, I was able to have the detail popup window work
I selected in the phoca download options :
- DISPLAY DETAIL BUTTON : standard popup window
- DISPLAY BOOTSTRAP : No

One question : by configuring the style like this, the buttons which show up are those ones :


But I would like to have those (smaller and more modern) buttons :

Are these buttons only available when you choose Bootstrap ? Is there a way to have them integrated ?
Thanks in advance !

[christine]

That did the trick !!! Thanks !!
Now, could you explain to me, how come :

Code: Select all

width: auto;

does not work ? It should read just to all sizes of titles , no ?

There are so many dependencies - results of different CSSen, Template etc. In your example, it was an Inline segment.

One question : by configuring the style like this, the buttons which show up are those ones ... 1st image

it comes from bootstrap 3

But I would like to have those (smaller and more modern) buttons ... 2nd image

Only General info:

1) if your template uses the bootstrap, then you can disable it in Phoca (Gallery) styles, so no two bootstrap libraries are displayed.
Unfortunately as everywhere, there are two (three will be) versions of Bootstrap.

2) Your template has many Bootstrap CSS (libraries) this can trigger conflicts.

Try following:
PD > Control Panel > Styles(CSS) button.css > disable it.
Of course, it (could) have effects to (other) buttons.

Kind regards
Christine

[fabio42]

Well, it worked for the buttons but now I click on one button, I got 2 popup windows opening :
- one standard popup
- one classic popup (browser-style popup)

Your template has many Bootstrap CSS (libraries) this can trigger conflicts.

I'd love to disable some boostrap css libraries ... but how to ? Is it possible ?
Thanks !