Highchart container does hold inner div

Question

I have a container with title and chart displayed. I want two dropdowns should be placed after the title and before the chart. But, that does not seem to work. If it does work, I need auto adjust on all title dropdowns and chart, like if the title grows large the other parts of the container should grow or shrink along.

I am facing problem now that does not seem to work. Can any one help me? You can find the fiddle here http://jsfiddle.net/BETBk/105/

    <script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px">
    <div id='some'>
    <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="opel">Opel</option>
        <option value="audi">Audi</option>
    </select>
    <select>
        <option value="more">More</option>
        <option value="lidl">Lidl</option>
        <option value="coop">COOP</option>
        <option value="ICA">IKA</option>
    </select>
</div>

</div>

Chart definition =======

$(function () {
    $('#container').highcharts({
        chart: {
            plotBorderWidth: 1,
            marginLeft: 80
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        title: {
            useHTML:true,
            text: '<div class="lhsTitle">My custom  some sata do become dight title fdskfsdkjl fhdsfhdskf dsfhsdfsoinf lfsdlfadsofs  dsfl skjldfjdsfjdsklfjdsklfjadskl ljklf dsklf dsklaf ddddd dd   ddddd  dd ddd   ddddddd adsklfadsklfj</div>',
            align: 'left',
            x: 70
        },
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});

CSS============

   .lhsTitle {
    float:left;
}
.rhsTitle {
    float:right
}

.highcharts-title {
    overflow:hidden;
}
#some{
    top : -360px;
    margin-left: 40px;
    position: relative; 
    height : auto;
    overflow:auto;
    display: inline-block;
   }
#container{
    overflow:hidden;   
}

Thanks

Answer 1

First of all, your select boxes are removed after the chart is rendered, since you placed them inside the chart container.

You could try to place the select-boxes directly in the text-attribute of the title. This brings in some problems with the click-event of the container div (which prevents that the select boxes can open). This could be solved, but maybe you get side effects you don't want.

Another (maybe better) way to go would be to position the div with the select-boxes programmatically where you want them.

Here is an example which places the select-boxes always under the title (no matter how long/short the title is). The essential code lines are the following:

var offset = $(".lhsTitle").offset();
$("#some").offset({ top: offset.top +$(".lhsTitle").height(), left: offset.left})

http://jsfiddle.net/BETBk/108/

One important point here is that you have to set an z-index > 0 in the container-div with the select-boxes, otherwise they won't be visible. Also don't forget to give the title-div some bottom padding to maintain some space for the select-box-div.