steven s Well-known member Oct 31, 2010 #1 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 />.
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 Well-known member Oct 31, 2010 #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. Upvote 0 Downvote
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 Oct 31, 2010 #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? Upvote 0 Downvote
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 Well-known member Oct 31, 2010 #4 steven s said: That's the page. I don't necessarily want to create a wider width for all description tips. Click to expand... 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: There may be a custom code solution for this but I don't have one off hand. steven s said: OK, I have one more question. How do you know this stuff of the top of your head? Click to expand... Experience. You get handy with this stuff after you do it for a while. Upvote 0 Downvote
steven s said: That's the page. I don't necessarily want to create a wider width for all description tips. Click to expand... 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: There may be a custom code solution for this but I don't have one off hand. steven s said: OK, I have one more question. How do you know this stuff of the top of your head? Click to expand... Experience. You get handy with this stuff after you do it for a while.
steven s Well-known member Oct 31, 2010 #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? Upvote 0 Downvote
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 Well-known member Oct 31, 2010 #6 steven s said: 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? Click to expand... 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: 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. Upvote 0 Downvote
steven s said: 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? Click to expand... 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: 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 Oct 31, 2010 #7 Jake Bunce said: 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: max-width: 450px; That should work perfectly for what you are trying to accomplish. Click to expand... That works great. Thanks! Upvote 0 Downvote
Jake Bunce said: 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: max-width: 450px; That should work perfectly for what you are trying to accomplish. Click to expand... That works great. Thanks!
steven s Well-known member Oct 31, 2010 #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? Upvote 0 Downvote
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 Well-known member Oct 31, 2010 #9 I tried a bunch of stuff but I can't get that second description to work. Upvote 0 Downvote
steven s Well-known member Oct 31, 2010 #10 Jake Bunce said: I tried a bunch of stuff but I can't get that second description to work. Click to expand... I bet the img is throwing it off. Upvote 0 Downvote
Jake Bunce said: I tried a bunch of stuff but I can't get that second description to work. Click to expand... I bet the img is throwing it off.