Working JSFiddle with related Divs (display side-by-side), but when in development in asp:panel no alignment

Question

I have a working demo on jsfiddle of 2 related divs where you click on a listitem on the left div, and this changes the listitems on the right div.

I cannot get this working in my asp application when I try to put it in a asp:panel:

It comes out really bad:

I then updated the JSFiddle to include an asp:panel, but now it is even worse.

Can I please ask how the HTML is supposed to be used in the asp:panel so that it renders properly as in the first jsfiddle link please.

Answer 1

There are quite a few changes I would recommend making:

• asp:panel is not a standard HTML element, it will render in HTML as a div so in the fiddle it should be a div
• lis need to be contained in a ul
• Inline styles are valid but not optimal, it's best to move the styles into the stylesheet
• borderTopColor:yellow; is not a valid CSS property, this should be border-top-color: yellow;
• div:not(.container) is a very broad rule, it seems to be used to target .sort-me so it would be best to set it up this way

The main issue seems to be with the div:not(.container) rule, it was set to target any div without the class container so it was also applying the styles to the panel causing the undesired layout.

$(function () {
    // $('.sort-me').sortable({connectWith: '.sort-me, #also-sort-me'});
});

$(".x").click(function () {
    $('li').removeClass('selectedItem');
    $(this).addClass('selectedItem');
    var x = $(this);
    //alert($( this ).attr("data-value"));
    $("li").not(".x").each(function () {
        $(this).find('input').val(x.attr("data-value"));
    });
});

$("#pnl1").dialog({
    modal: true,
    zIndex: 9000,
    beforeClose: function () {
    }
});

$("#pnl1").show();

#pnl1 {
    display: none;
}
.sort-me {
    background-color: #00274c;
    list-style-position: inside;
    margin: 10px;
    min-height: 30px;
    padding: 10px;
    vertical-align: top;
    width: 390px;
}
li {
    background-color: #ffcb05;
    cursor: move;
    margin: 5px;
    padding: 5px;
}
.sort-me-input {
   float: right; 
}
.selectedItem {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<form id="form1">
    <div id="pnl1">
        <div class='container'>
            <ul class='sort-me'>
                <li class="x" data-value="1">First</li>
                <li class="x" data-value="2">Second</li>
                <li class="x" data-value="3">Third</li>
            </ul>
            <ul class='sort-me'>
                <li>Lorem
                    <input class="sort-me-input" />
                </li>
                <li>ipsum
                    <input class="sort-me-input" />
                </li>
                <li>dolor
                    <input class="sort-me-input" />
                </li>
                <li>dolor
                    <input class="sort-me-input" />
                </li>
                <li>dolor
                    <input class="sort-me-input" />
                </li>
            </ul>
        </div>
    </div>
</form>

JS Fiddle: http://jsfiddle.net/evrqeu7d/1/