Loading...
 
Skip to main content

Features / Usability

Forum List Topic List

Forums » Features / Usability » Info popup in Gallery shows huge box with longer descriptions
 
Thread actions
Print this page
  • Print all pages

    • Info popup in Gallery shows huge box with longer descriptions

    Posted by John Morris posts: 758 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

    Reads: 2621
    Posted by John Morris posts: 758 United States

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

    Posted by Rick Sapir / Tiki for Smarties posts: 3665 United States

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

    Copy to clipboard
    <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.
    Posted by John Morris posts: 758 United States
    Thanks a million Rick, appreciate it much!

    Posted by John Morris posts: 758 United States

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


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

    Posted by Gary Cunningham-Lee posts: 4664 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:

    Copy to clipboard
    .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


    Posted by John Morris posts: 758 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.


    Posted by John Morris posts: 758 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!
    Posted by Gary Cunningham-Lee posts: 4664 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

    Copy to clipboard
    .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


    Posted by John Morris posts: 758 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.

    Copy to clipboard
    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!


    Posted by John Morris posts: 758 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.

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

    Posted by John Morris posts: 758 United States

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


    Posted by John Morris posts: 758 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

    Copy to clipboard
    .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);
}