Loading...
 
Features / Usability

Features / Usability


Info popup in Gallery shows huge box with longer descriptions

posts: 731 United States

Tiki 15
http://thepatriotwoodwiki.org/HomePage

In our file galleries, we are experiencing the info box popup is over sized when a file description contains lengthy text.
For an example please see this gallery at http://thepatriotwoodwiki.org/tiki-list_file_gallery.php?galleryId=11

Hover your cursor over the "i" icon for info on each file, and you'll see some of the info popups render beautifully, while others render oversize. The ones that do render oversize contain lengthy file descriptions.

Also, please see html for line breaks in the info popup as well for the description field as . I don't think the is supposed to be showing as it is unsightly.

Any advice on moving forward is greatly appreciated.

John

posts: 731 United States

Hey Rick, can you give me a headstart on what line in the Utopia.css to change this?
John

posts: 3625 United States

Well, it looks like the popup table is built with:

<table class="table table-condensed">


So, that's where I'd start. However, I'm not sure if that table class is used elsewhere, so you may need to experiment.

An alternative is to simply not include the description in the popup (since it is already shown in the full listing table).

And yes, I would log a bug... the description is parsed correctly in the table listing but not in the popup.

HTH,

- Rick | My Tiki Blog | My Tiki UserPage

Why be a dummy? Get smarty! TikiForSmarties.com
Tiki for Smarties, your source for the best (and only) Tiki books, guides, and tutorials.
posts: 731 United States
Thanks a million Rick, appreciate it much!

posts: 731 United States

Thanks Rick, would this also be a bug I should report with a "show instance"?
John


posts: 731 United States
Bug reported, but the show instance is not working. Thanks for the help Rick.
posts: 731 United States
I finally got the show instance working the other day, it's up.

posts: 4614 Japan

Hi,

To expand on what Rick said, I believe this will work as a quick fix - add this rule to your Look & Feel custom CSS:

.popover {  max-width: 60% !important; }


You can play with the percentage to see what works best with your site and content.

This popover width has been a problem since the Bootstrap integration. The problem is that the Bootstrap framework normally only uses popovers for small amounts of content. But in Tiki they are used for content-heavy tables and so on, as well as little content bits. It seems to have been hard to get a works-everywhere solution.

-- Gary


posts: 731 United States

Hey Gary, thanks so much!
I applied it to the custom css, and there was not effect. Hmmmm. I am playing with it now, I'll keep you informed.


posts: 731 United States
I played around with it a little bit Gary, to no effect, the custom css seemed to have no effect on the pop up box for the gallery info box. I want to say thank you though, for your grand efforts!
posts: 4614 Japan

Hmm, that's odd, because adding that rule to the custom CSS in my local branch 15 installation does limit the popover width. I added

.popover { max-width: 80% !important; }
and got this result: Popover Test


(If that CSS does work generally, probably adding an overflow: auto would be good in case the contents are even larger.)

-- Gary


posts: 731 United States

Ok Gary, I put the css on my test site and eliminated all custom css but left the popover as you have it in the custom css, and it works wonderfuly. So I have some conflicting custom css I need to figure out which on is conflicting. I will go through each line, delete it and test the popover to find out which one is the problem.

Here is what I have now.

body { 
-webkit-box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
-moz-box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
}
#top_modules,
#topbar_modules,
#pagebottom_modules {
  margin-left: -15px;
  margin-right: -15px;
  background: #000
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #000000;
  background-color: #5C594A;
}
.navbar-default {
  background-color: #000;
  border-color: #000;
}
.panel-default > .panel-heading {
  color: #FFFFFF;
  background-color: #304d66;
  border-color: #304d66;
}
.panel {
  background: #fff;
  border: 0px solid;
}
.panel-title {
  color: #fff;
  font-size: 100%;
}
.modules > .module .sitelogo img,
.sitetitles {
  margin-left: 0px;
}
a,
a:visited {
  font-weight: 200;
}
body.print { background: #fff; } 
}
.popover { max-width: 80% !important; }
}


I will go through each one and find the problem. Thanks, long story short, it does work!


posts: 731 United States

Ok Gary, I got it nailed down to the body custom, there is something in this that is conflicting with the popover custom you provided, but this is as far as I can get, no matter what I change or remove from this custom body, it seems the popover just does not like it as a whole. Any suggestions? Thanks Gary.

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.42857143;
  color: #000000;
  background-color: #5C594A;

posts: 731 United States

I take it back, there is more it does not like, I'll keep plugging away on this.
Thanks again Gary


posts: 731 United States

Ok I fixed it, all I did was put the popover above at the top of the custom css like this. And it works now. Go figure

.popover { max-width: 80% !important; }
body { 
-webkit-box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
-moz-box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
box-shadow: inset 0 195px 0 0 rgba(0,0,0,1);
}