Help with popup width

[steven s]

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]

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

.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]

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]

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:

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



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]

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]

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:



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:

.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]

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:

    max-width: 450px;

That should work perfectly for what you are trying to accomplish.

That works great. Thanks!

 

[steven s]

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?

 

[Jake Bunce]

I tried a bunch of stuff but I can't get that second description to work.

 

[steven s]

I tried a bunch of stuff but I can't get that second description to work.

I bet the img is throwing it off.