Loading...
 
Features / Usability

Features / Usability


Info popup in Gallery shows huge box with longer descriptions

posts: 681

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: 681

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

posts: 3585 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: 681
Thanks a million Rick, appreciate it much!

posts: 681

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


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

posts: 4521 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: 681

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: 681
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: 4521 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: 681

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: 681

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: 681

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


posts: 681

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);
}

Why Register?

Register at tiki.org and you'll be able to use the account at any *.tiki.org site, thanks to the InterTiki feature. A valid email address is required to receive site notifications and occasional newsletters. You can opt out of these items at any time.