Search…

X3 Photo Gallery Support Forums

Search…
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Is it possible to still center Panorama primary label, even if it has too much text in it?

30 Dec 2022, 21:04

Hello again, Karl,

I have a few dozen panorama folders which are fine, but I have one particular panorama folder that this question applies to.

On the panorama popup that appears when a user clicks on an image's title in the top-left corner, the primary label that is displayed in the popup for all my OTHER panoramas are fine & nicely centered horizontally (because I've limited the amount of text in the label).  However, for this 1 particular panorama folder, the information that I need to include in the primary label is too much (too wide) for the label to fit nicely horizontally centered in the popup window.

In the screenshot below, as an example, you can see 3 primary labels, for illustration.
Image
The 1st primary label is nicely centered horizontally in the popup.  However, it fits nicely centered, only because I removed Rheinmünster at the beginning of the 2nd line.

But I do wish to include Rheinmünster at the beginning of the 2nd line, and when I add it, notice how the 2nd primary label is no longer horizontally centered in the popup, but shifted to the right, almost up against the right edge of the popup.  I have also already noticed that if I have way too much text in the primary label, that the label will run way past the right edge of the popup, so I need to be careful & limit my text so that it does not.

Which brings me to my question: I would like to accomplish what is shown in the 3rd primary label (which incidentally is not an actual label, but a copy/shift/paste into the screenshot image): I would like to be able have that label slightly wider, so that Rheinmünster fits on the line, but for the label to be centered horizontally in the popup, as show in the 3rd primary label.

A few days ago, you showed me HERE how to widen the popup window itself, but I do not wish to use that Custom CSS, because the wider popup window causes the map to also enlarge, which I do not wish to do.

Is there a way for me to have X3 keep the same width of the popup, but to allow the primary label (with the extra text) to still be horizontally centered, as in the sample 3rd primary label in the screenshot?

Thank you in advance & have yourself a splendid day.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Is it possible to still center Panorama primary label, even if it has too much text in it?

30 Dec 2022, 21:19

Also, you had initially helped me HERE with the below code, to horizontally center everything in the Panorama popup window, and that has been working beautifully, thank you again.

Code
/* Centers the text in the Panorama text box overlay */
.pano-info-modal {
  text-align: center !important;
}
.pano-info-map-container {
  text-align: left; /* map must remain left */
}
Today's question is, if it is possible to somehow still keep the label horizontally centered, even if it has a few extra text characters beyond some limit.

Thanks again in advance.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Is it possible to still center Panorama primary label, even if it has too much text in it?

30 Dec 2022, 23:52

To summarize a bit here, I think you are complicating things a bit with the "label" class. This class is initially designed to be used as a short label, like [warning] or [info]. Amongst other things, it utilizes a style "white-space: nowrap", which tells the browser to NOT wrap the text on multiple lines, because this would make the label rather unpleasant when combined alongside normal text. In your case, you are simply getting two lines because you have added the <br> tag inside.

As you can see in the screenshot below, the label and the text inside the label actually remains centered, but because the second line is told NOT to wrap to new line, it will instead need to OVERFLOW the parent container, which means it will protrude to the right.



In my opinion, I would probably ask what the point of using label for this longer multi-line text is, as it's surely as easy to read the text without additional styling. In your case, it seems you are simply seeking a "background color" without the additional constraints enforced by the "label" class. If need be, you could create your own label class to define exactly how you want this background-color element to work.

Simple fix (although now are over-hacking it a bit). Add this inline-style:
Code
<span class="label primary" style="white-space: normal;">Text here</span>
 
User avatar
JMM
Experienced
Topic Author
Posts: 154
Joined: 02 Aug 2021, 11:18

Re: Is it possible to still center Panorama primary label, even if it has too much text in it?

31 Dec 2022, 10:26

as it's surely as easy to read the text without additional styling
I disagree.
In your case, it seems you are simply seeking a "background color" without the additional constraints enforced by the "label" class.
I agree, that is what I was trying to do.
you could create your own label class to define exactly how you want this background-color element to work.
I don't know the first thing about CSS, which is 99% of X3.  Hence my questions about if something can be done, and if it can be done, how to do it.

My X3 sites are hobby-sites only, and are of absolutely no interest to anyone else at all except me.  I put my images on my X3 sites in order for me to reminisce in my retirement, and for no other reason.

So going forward I will just add images alone, without such things as titles & descriptions.

Thanks anyway for the help you've given me to date.
Location: Burlington (Toronto-ish), Ontario, Canada
Self-hosted using Abyss Web Server:   AuroraWings.me   |   GalleryWings.com   |   PanAurora-Studio.com   |
Externally-hosted using LiteSpeed/Apache Web Server:   GenealogyWings.com/galleries   |
 
User avatar
mjau-mjau
X3 Wizard
Posts: 13993
Joined: 30 Sep 2006, 03:37

Re: Is it possible to still center Panorama primary label, even if it has too much text in it?

31 Dec 2022, 10:34

mjau-mjau wrote:Simple fix (although now are over-hacking it a bit). Add this inline-style:
Code
<span class="label primary" style="white-space: normal;">Text here</span>
The solution is above anyway. It allows text to WRAP, in which case it the labels will look center-aligned.