I'm building a popover in jQuery, HTML & CSS3.
You can check it out here:http://themelandia.com/lib/pages/templates/popover.htmlCurrently I place the popover right after the trigger.
The trigger and the popover are wrapped with a \[code\]div.popover-wrapper\[/code\].\[code\]<div class="popover-wrapper"> <a class="popover-trigger" href="http://stackoverflow.com/questions/14558355/#">The Trigger</a> <div class="popover"> This is the popover! </div></div>\[/code\]My problem is that the popover get's merged down by the parent of the popover-wrapper.Although there are no problems with the layout if I add a long string like\[quote\] AReallyLongLineWithoutASpaceWhichGetsDisplayedCorrectly\[/quote\]The following string gets a line break after each new word.\[quote\] A really long line With space which doesnt get displayed correctly\[/quote\]You can also see this in the link above.
The first popover is working correctly, while the second one isn't because it's wrapped in a \[code\]div\[/code\] with a smaller width.LESS\[code\]div.popover-wrapper { position: relative; div.popover { position: absolute; z-index: 200; width: auto; }}\[/code\]Thanks a lot!
You can check it out here:http://themelandia.com/lib/pages/templates/popover.htmlCurrently I place the popover right after the trigger.
The trigger and the popover are wrapped with a \[code\]div.popover-wrapper\[/code\].\[code\]<div class="popover-wrapper"> <a class="popover-trigger" href="http://stackoverflow.com/questions/14558355/#">The Trigger</a> <div class="popover"> This is the popover! </div></div>\[/code\]My problem is that the popover get's merged down by the parent of the popover-wrapper.Although there are no problems with the layout if I add a long string like\[quote\] AReallyLongLineWithoutASpaceWhichGetsDisplayedCorrectly\[/quote\]The following string gets a line break after each new word.\[quote\] A really long line With space which doesnt get displayed correctly\[/quote\]You can also see this in the link above.
The first popover is working correctly, while the second one isn't because it's wrapped in a \[code\]div\[/code\] with a smaller width.LESS\[code\]div.popover-wrapper { position: relative; div.popover { position: absolute; z-index: 200; width: auto; }}\[/code\]Thanks a lot!