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

Help with popup width

steven s

Well-known member
#1
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 />.
 

Jake Bunce

XenForo moderator
Staff member
#2
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.
 

steven s

Well-known member
#3
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?
 

Jake Bunce

XenForo moderator
Staff member
#4
That's the page.
I don't necessarily want to create a wider width for all description tips.
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.

OK, I have one more question.
How do you know this stuff of the top of your head?
Experience. You get handy with this stuff after you do it for a while.
 

steven s

Well-known member
#5
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?
 

Jake Bunce

XenForo moderator
Staff member
#6
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?
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

Well-known member
#8
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