overflow-x not working in dynamically generated DIV in Jquery?

Question

Hi guys i am new to jquery and i have two doubts to ask from my coding..

here is my XHTML coding along with my JQUERY and CSS

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://xmlns.jcp.org/jsf/html">
    <h:head>
        <title>Test</title>
        <script src="//code.jquery.com/jquery-1.10.2.js"></script>
        <meta name="viewport" content="width=device-width"/>
        <style>           
            #filterpanel{
                position: absolute;
                top: 50%;
                left: 0;
                width: 99%;
                height: 20%;
                background-color: azure;
                border: 4px solid black;
                border-radius: 12px;
                overflow-x: scroll;    
           }
        </style>
    </h:head>
    <h:body>
        <div id="filterpanel"></div>
        <script>
            $(document).ready(function(){

                for (var i = 0; i &lt; 6; i++) {     

                    var s=$('<div id="filterinfo'+i+'" ><div id="imgclose'+i+'" style="position: absolute; right:0;top: 0;cursor: pointer;" ><img src="images/close.png" width="20px" height="20px"/></div></div>').css({"text-align":"center","background-color":"black","color":"white","position":"relative","width":"16%","height":"98%", "border-radius":"16px","top":"1%","float":"left","left":"0.5%","margin-left":"1%"});
                   s.appendTo("#filterpanel");  
                   $("imgclose"+i).click(function(){
                       alert("clicked");
                       $("filterinfo"+i).hide();
                   });
               }

           });
        </script>
    </h:body>
</html>

The thing is all my div's are generated successfully with particular id's as i require ,but what happens is if my value goes above 5 for i , the generated div (i.e) filterinfo6 gets displayed below filterinfo1 instead of right side of filterinfo5 in my main div filterpanel, though i have given overflow-x as scroll for the main div.

My second doubt is that when i click on the imgclose div, the click function does not work ... i really need to close the particular div (i.e) if user clicks on the imgclose4 then the particular div filterinfo4 should be removed from my main div filterpanel .... so far what i have tried is not working .... can anyone help me with this please .

Here's a demo: http://jsfiddle.net/3XwpG/

Thanks in advance.

@VijayakumarSelvaraj thanks for the fiddle bro makes it easier for them to understand what i am trying to convey... — Vicky
– Vicky, Commented Feb 12, 2014 at 10:55

ducdhm · Accepted Answer · 2014-02-12 11:30:44Z

2

The first thing is change css of filterinfo to:

{
    "text-align": "center",
    "background-color": "black",
    "color": "white",
    "display": "inline-block",
    "width": "16%",
    "height": "98%",
    "border-radius": "16px",
    "margin-left": "1%"
}

The second thing is you must define the height of #filterpanel and make white-space: nowrap.

#filterpanel{
    position: absolute;
    top: 50%;
    left: 0;
    width: 99%;
    height: 100px;
    position: relative;
    background-color: azure;
    border: 4px solid black;
    border-radius: 12px;
    overflow-x: scroll;
    white-space: nowrap;
}

DEMO

edited Feb 12, 2014 at 11:30

answered Feb 12, 2014 at 11:12

ducdhm

1,95215 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Praxis Ashelin Over a year ago

Your fiddle is linking to the original, unchanged code. Did you forget to press Update?

Lenka Pitonakova Over a year ago

In my experience, white-space: nowrap is not required, only specifying height. If you use white-space: nowrap, any text inside the div will not automatically break line when it's longer than the div's width, which is most of the times undesirable.

Praxis Ashelin · Accepted Answer · 2014-02-12 11:19:17Z

1

As we discussed in the chat, you should add white-space: nowrap; to the parent div. You are probably also looking for an outcome with overflow-y: hidden;

Finally, you should avoid using inline CSS. See my fiddle below for a "clean" version.

Fiddle: http://jsfiddle.net/3XwpG/9/

answered Feb 12, 2014 at 11:19

Praxis Ashelin

5,2472 gold badges22 silver badges46 bronze badges

Collectives™ on Stack Overflow

overflow-x not working in dynamically generated DIV in Jquery?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related