1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Help with popup width

Discussion in 'XenForo Questions and Support' started by steven s, Oct 31, 2010.

  1. steven s

    steven s Well-Known Member

    screen.png
    I am using a <br /> after each line.
    I don't necessarily want all popups to be wider, but I don't want the lines to wraparound when there is a <br />.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That is the forum description tooltip from this page right?

    http://www.bavforums.com/community/categories/3/

    You can adjust the width of the tooltip by editing this template:

    Admin CP -> Appearance -> Templates -> node_list.css

    Code:
    .nodeDescriptionTip
    {
    	@property "nodeDescriptionTip";
    	padding: 4px 10px;
    	margin-top: -22px;
    	margin-left: 10px;
    	line-height: 1.5;
    	width: 350px;
    	height: auto;
    	@property "/nodeDescriptionTip";
    }
    
    I copied your forum description to test this and it works once the width is increased.
     
  3. steven s

    steven s Well-Known Member

    That's the page.
    I don't necessarily want to create a wider width for all description tips.

    OK, I have one more question.
    How do you know this stuff of the top of your head?

    Added: I removed the width and it works fine.
    Do you think there is harm in removing the width code?
     
  4. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Well I tried some other solutions including applying nowrap to your description. For example:

    Code:
    <div style="white-space: nowrap;">
    <img src="images/description_icons/1series.png" height="100" width="134" align="left" hspace="5">E81 - (2007 - 2011) 1 Series 3 Door Hatchback<br />
    E82 - (2007 - 2011) 1 Series Coupe<br />
    E87 - (2004 - 2011) 1 Series 5 Door Hatchback<br />
    E88 - (2007 - 2011) 1 Series Convertible
    </div>
    
    But that just created an overflow situation like this:

    Screen shot 2010-10-31 at 2.51.59 PM.png

    There may be a custom code solution for this but I don't have one off hand.

    Experience. You get handy with this stuff after you do it for a while.
     
  5. steven s

    steven s Well-Known Member

    I may have added this after you replied.

    Added: I removed the width and it works fine.
    Do you think there is harm in removing the width code?
     
  6. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    That works. But be aware that without a width long descriptions won't wrap until they reach the end of the page. For example:

    Screen shot 2010-10-31 at 3.08.07 PM.png

    You gave me an idea though. My brain must not be awake yet because I didn't think of this at first. Specify a max-width like this:

    Code:
    .nodeDescriptionTip
    {
        @property "nodeDescriptionTip";
        padding: 4px 10px;
        margin-top: -22px;
        margin-left: 10px;
        line-height: 1.5;
        max-width: 450px;
        height: auto;
        @property "/nodeDescriptionTip";
    }
    
    That should work perfectly for what you are trying to accomplish.
     
    steven s likes this.
  7. steven s

    steven s Well-Known Member

    That works great. Thanks!
     
  8. steven s

    steven s Well-Known Member

    I might have jumped the gun.
    I've tried max-width: 450px, 1000px and removed width altogether.
    Top image fits, bottom wraps. That should be the same code, no?

    screen.png
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I tried a bunch of stuff but I can't get that second description to work. :(
     
  10. steven s

    steven s Well-Known Member

    I bet the img is throwing it off.
     

Share This Page