How can I make the width of the content in my vertical slider 100%?

Question

I have been stuck on this for hours (nearly 5 already), I found a really good horizontal slider tutorial that I tried to implement into my website, it seems to work fine in every way except that I can't get the content to go full width in the slider. it only goes about 70% of the width. I've specified width: 100%; for the content and it doesn't do anything.

.panel-group .panel div.survey {
    margin-left: 400px;
    margin-top: 400px;
    position: relative;
    width: 100%;
    right: 0px!important;
    border: 1px solid red;
}

Here is what I have that's almost perfect, basically my goal is to get the content bordered in red to take up the entire width of the slide

jsfiddle Am I missing something extremely simple here? Any help is appreciated

Answer 1

What you are referring to as "width" is actually the height of the panel.

The panel has been rotated 90 degrees. You need to adjust the height of the panel to take up the full width of the screen.

First get the width of the screen, then adjust your panel height, and finally adjust your survey height. After playing around with various window sizes I found that the following works:

var width = $(window).width();
$(".panel-body").height(width);
$(".survey").css("width", width - 60);
$(".survey").css("margin-top", width - 70);

Also include a resize function so that if the user changes the screen resolution the panel will adjust:

$(window).resize(function(){
    var width = $(window).width();
    $(".panel-body").height(width);
    $(".survey").css("width", width - 60);
    $(".survey").css("margin-top", width - 70);
});

JS Fiddle Demo