Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 16
  1. #1
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post

    how to overide overflow property

    Hi,
    well i was wondering how to overide a overflow = hidden in css, let me give you an example
    e-g: i have some items in a div with class="monkeybo" and monkeybo has overflow hidden, so whatever is inside that div they can't escape out. The items that are inside that div have a tooltip that appears below items so they appear outside the area of div and as overflow is hidden of that div so the tooltip doesn't appear.
    Now the question is how to make the tooltip appear as tooltip and everything is inside that div which has class= monkeybo ^_^

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Please post some sample code to understand your issue.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Please post some sample code to understand your issue.
    Asalam o alikum
    Well this is the style (css)
    <style type="text/css">
    .gamecolumns {
    overflow:hidden;
    }
    </style>

    and this is the example,if you go towards the last items and hover it, you will realize the parent elements overflow hidden has take the power of tooltip to appear, i have used javascript dynamic for height purpose which changes the height everytime accordingly to the buttons pressed, so you can say the height is fixed. The only way out i think of is to add extra padding to the bottom but i didn't wanted to do that, that's why i came to ask css masters ^_^

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    if you go towards the last items and hover it
    Va alaikum assalam
    How could I go? Please post a link to your page.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Va alaikum assalam
    How could I go? Please post a link to your page.
    I guess there is no limit to stupidity sorry for that, here is the link http://bloghutsbeta.blogspot.com/201...ting-2_04.html

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Can't you just remove either that class attribute from the HTML or the overflow:hidden from the CSS?

    If the above is not possible, add
    Code:
    #data {
        overflow: visible;
    }
    into your CSS to override that.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #7
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Can't you just remove either that class attribute from the HTML or the overflow:hidden from the CSS?

    If the above is not possible, add
    Code:
    #data {
        overflow: visible;
    }
    into your CSS to override that.
    Well that overflow hidden in class "gamecolumns" is added by me as i want it to have overflow hidden but at the same time i want the tooltip to appear, so its like i want the tooltip to fight against the parent element that is not letting it, as parent has overflow = hidden
    All i want is that the tooltip over ride the parent element.
    is there any way out to it?

  • #8
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    as i want it to have overflow hidden
    How can you expect overflow of the tooltip out of the container when it's set as hidden? What's the reason to set overflow:hidden; there?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #9
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    How can you expect overflow of the tooltip out of the container when it's set as hidden? What's the reason to set overflow:hidden; there?

    well that's one awesome question to ask, well the reason is simple, i am using a script known as quicksand its for sorting. And when you click those buttons the height of the div gets smaller or bigger automatically as its with the help of javascript "adjust height *dynamic*" i set it to dynamic so things are done automatically but for that i have to use overflow hidden, if its not set to overflow hidden the comment area of disqus it overlaps the sorting area items, which makes the feel ugly, it happens only in the first time later its okay but still it always happens at first time.

    If you remove the overflow hidden and then click the buttons you will see what's going on and what i am talking about, otherwise i don't like to create issues for myself. ^_^
    btw i am in afghanistan and from afghanistan where are you from?

  • #10
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    if its not set to overflow hidden the comment area of disqus it overlaps the sorting area items, which makes the feel ugly,
    Could you post a screen shot of that?
    Can't you set a top margin, say margin-top: 100px;, to #disqus_thread avoid the overlap?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #11
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    Could you post a screen shot of that?
    Can't you set a top margin, say margin-top: 100px;, to #disqus_thread avoid the overlap?
    its not there is not solution to it, if i just give .gamecolumn padding of 100px to the bottom, the we can see the tooltip, its not that we can't work out ^_^
    the thing that i was trying to do was to win from this overflow property that i gave to the parent as most of the time, if one item is saying blue and you want it not to listen to it we use !important and then make him red, but in this case that didn't work.
    So i guess we have to add padding and live with it, we can't force parent

  • #12
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    we can't force parent
    There "will" be a parent selector in CSS4, see http://www.red-team-design.com/meet-the-css4-selectors
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #13
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by abduraooft View Post
    There "will" be a parent selector in CSS4, see http://www.red-team-design.com/meet-the-css4-selectors
    Well my friend you know too much, and as far as css4 is concern still we are having issues with css3 due to some fu*king explorers like IE, sometimes it really annoys me, i hate ie without a doubt. So css4 is a talk about like atleast 5 years
    Even now when it comes to css3 i always think of various options, like other day i was working on svg.
    My main aim for my site is speed, otherwise if i play dirty jquery and images are the best option to make a sexy site but a slow loading one too ^_^
    At the end i would say, thanks alot for your time and those quick replies, i wonder if we could become friend ? :P

  • #14
    New Coder
    Join Date
    Mar 2012
    Location
    Somewhere over the Rainbow
    Posts
    96
    Thanks
    7
    Thanked 5 Times in 5 Posts
    Quote Originally Posted by cryoffalcon View Post
    Hi,
    well i was wondering how to overide a overflow = hidden in css, let me give you an example
    e-g: i have some items in a div with class="monkeybo" and monkeybo has overflow hidden, so whatever is inside that div they can't escape out. The items that are inside that div have a tooltip that appears below items so they appear outside the area of div and as overflow is hidden of that div so the tooltip doesn't appear.
    Now the question is how to make the tooltip appear as tooltip and everything is inside that div which has class= monkeybo ^_^
    options:

    1.change hidden to visible
    2.change hidden to auto (if anything is "hidden" the box will get a scroll bar).
    3.set an (invisible) anchor point for the tool tip to attach to that is not within the hidden area.

  • #15
    Regular Coder
    Join Date
    Oct 2010
    Posts
    157
    Thanks
    2
    Thanked 1 Time in 1 Post
    Quote Originally Posted by achira View Post
    options:

    1.change hidden to visible
    2.change hidden to auto (if anything is "hidden" the box will get a scroll bar).
    3.set an (invisible) anchor point for the tool tip to attach to that is not within the hidden area.
    well the above first two options i tried them, they didn't work. And the 3rd one is what i am not able to understand


  •  
    Page 1 of 2 12 LastLast

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •