Spans Created in Jquery Overlap Existing Span

Question

I have a div with a span in it, which contains a button. When you click the button, jquery adds a new span to the div. The span should sit next to the first span, but as you can see the new span is behind the first. It is added properly in the source code but they aren't lining up properly. The span is also as small as possible instead of the same height, and 3 times longer than the first span. Why is the span not behaving as expected?

EDIT 1: Ok so making them position: absolute means that they aren't in the flow anymore. So removing that fixes the positioning. But it doesn't solve the issue of why the spans are minimally thin, even though I specify the height. Source

EDIT 2: Height issue has been resolved by making both spans display: inline-block;, but as show in the picture below all is not well. There is something pushing the second span down. Source

enter image description here

HTML:

<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="style.css" type="text/css"/>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="index.js"></script>

    </head>
    <body>
        <div class="container">
            <span class="menu">
                <button class="add_button">+</button>
                <button class="minimize_button">m</button>
            </span>
        </div>
    </body>
</html>

CSS:

  /*----------------*/
 /*----Main Page---*/
/*---------- -----*/
.container {
    background-color:grey;
    position:relative;
    height:20%;
    width: 100%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
}
.menu {
    background-color:lightblue;
    position:absolute;
    height:90%;
    width: 60px;
    margin: 1%;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
    border-radius:5px;
}
button {
    background-color:blue;
    height: 50px;
    width: 50px;
    margin: 5px;
    font-size: 20px;
    color: white;
    border: 0px;
    border-radius:7px;
}

 /*-----------------*/
 /*Timeline Element*/
/*----------------*/
.timeline_element {
    height:90%;
    width: 360px;
    background-color:red;
    border: 2px black;
    margin: 1% 0%;
     -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box; 
    border-radius:5px;

}
.text_area {
    height: 50%;
    width: 50%;
}

JS:

$(function(){
$(".add_button").click(add_timeline_element);

function add_timeline_element() {
    debugger;
    var timeline_element = $('<span></span>').addClass('timeline_element')
    $('<button>/', {
      text: '-',
      click: function() {(".timeline_element").remove();}
    }
    ).appendTo(timeline_element);
    var text_area = document.createElement("textarea").className ="text_area";
    $(timeline_element).append(text_area);
    $(".menu").after(timeline_element);
}
});

Actually, it's the other way around. Your other spans are overlapping the span appended by jquery because they are absolutely positioned by your css. — Kevin B, Feb 06 '14 at 22:48
@KevinB but if I remove the position: absolute the size changes drastically, and adding it to the new span fixes it's size issue but does not place it next to the original span; — EasilyBaffled, Feb 06 '14 at 23:37
@ChristopherMarshall The z-index won't fix the left right issue as far as I know. — EasilyBaffled, Feb 06 '14 at 23:38
@EasilyBaffled that is to be expected. But, the fact remains. The absolute positioning is why it's happening. — Kevin B, Feb 07 '14 at 00:41

score 0 · Answer 1 · answered Feb 07 '14 at 00:31

I have done some modifications in your code to achieve the solution (added draggable to the timeline_element for example).

I would like you to see and verify if the transformations change your project more than you wold like. I think it is possible to have the same behaviour other way.

FIDDLE

HTML:

    <div class="container">&nbsp;
        <span class="menu">
            <button class="add_button">+</button>
            <button class="minimize_button">m</button>
        </span>
    </div>

JS:

$(".add_button").click(add_timeline_element);

function add_timeline_element() {

    var timeline_element = $('<span></span>');
    $(timeline_element).addClass('timeline_element');

    $('<button/>', {
      text: '-',
      click: function() {$(".timeline_element").remove();}
    }).appendTo(timeline_element);

    var text_area = document.createElement("textarea");
    $(text_area).className ="text_area";

    $(text_area).appendTo(timeline_element);
    $(timeline_element).draggable({containment: '.container' });

    $(".menu").after(timeline_element);
}

CSS:

     /*----------------*/
     /*----Main Page---*/
    /*---------- -----*/
    .container {
        background-color:grey;
        position:relative;
        height:300px;
        width: 100%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
        z-index:0;
    }
    .menu {
        background-color:lightblue;
        position:absolute;
        height:90%;
        width: 60px;
        margin: 1%;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
        border-radius:5px;
    }
    button {
        background-color:blue;
        height: 50px;
        width: 50px;
        margin: 5px;
        font-size: 20px;
        color: white;
        border: 0px;
        border-radius:7px;
    }

     /*-----------------*/
     /*Timeline Element*/
    /*----------------*/
    .timeline_element {
        height:70%;
        width: 360px;
        background-color:red;
        border: 2px black;
        margin: 1% 0%;
         -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box; 
        border-radius:5px;
        display: block;
        z-index:1000;
    }
    .text_area {
        height: 50%;
        width: 50%;
    }

I'm not sure I understand the purpose of your changes. While I've never seen draggable before, so thank you for that, it doesn't achieve what I want it to I need the two spans side by side inside the container, and I'd rather not have to drag it there myself every time. — EasilyBaffled, Feb 07 '14 at 01:23
I took the drggable off. What about changing the margin. Would you look http://jsfiddle.net/nizamabreu/3bExJ/1/ pls. — Nizam, Feb 07 '14 at 01:27
Will it be possible to add more than one span by side? I am asking because your script is removing them all (all have the timelien_element class) — Nizam, Feb 07 '14 at 01:52

Spans Created in Jquery Overlap Existing Span

1 Answers1