<div class="card-media">
<!-- media container -->
<div class="card-media-object-container">
<div class="card-media-object"><img data-original="{{asset($ad->images()->first()->image_path.'/'.$ad->images()->first()->image_name)}}" height="125px" width="100%"></div>
</div>
<!-- body container -->
<div class="card-media-body">
<div class="card-media-body-top">
<span class="subtle">{{$ad->time_elapsed_string($ad->created_at)}}</span>
</div>
<span class="title card-media-body-heading">{{$ad->title}}</span>
<div class="card-media-body-supporting-bottom">
<span class="card-media-body-supporting-bottom-text subtle">
<ol class="breadcrumb">
<li class="categorie">{{$ad->categorie->name}}</li>
<li class="subcategorie">{{$ad->subcategorie->name}}</li>
<li class="type active">{{$ad->type->name}}</li>
</ol>
</span>
<span id="price" style="color: red;" class="card-media-body-supporting-bottom-text subtle u-float-right">{{$ad->price}}</span>
</div>
<div class="card-media-body-supporting-bottom card-media-body-supporting-bottom-reveal">
<span class="card-media-body-supporting-bottom-text subtle">{{$ad->phone}}</span>
ДЭЛГЭРЭНГҮЙ
</div>
</div>
</div>
This is my repeated list and i wanna hide by select value
<select id="test" multiple class="form-control">
<option>1</option>
<option>100</option>
<option>1000</option>
<option>10000</option>
<option>100000</option>
<option>1000000</option>
</select>
$('#test').on('change',function(){
var selected = this.value;
prices = $('#price');
$.each(prices,function(){
if(selected<$(this).text()){
$(this).parent().parent().parent().hide();
}
if(selected>$(this).text()){
$(this).parent().parent().parent().show();
}
});
});
This is my jquery when i select value from select then if #price value < than select hide other list elements in my case card-media is list item.
Related
So, I created this script which works nice:
$(function() {
$(".decorrer").click(function(e) {
x = jQuery('#1').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".Futuras").click(function(e) {
x = jQuery('#2').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".Passadas").click(function(e) {
x = jQuery('#3').clone().attr("id", "dinamics");
jQuery('#dinamics').replaceWith(jQuery(x));
});
$(".2017").click(function(e) {
x = jQuery('#sete').clone().attr("id","something");
jQuery('#something').replaceWith(jQuery(x));
});
<div class="col-md-3" id="status">
<ul>
<li class="decorrer">A decorrer</li>
<li class="Futuras">Futuras</li>
<li class="Passadas">Passadas</li>
<li class="2017">Passadas</li>
</ul>
</div>
<div class="col-md-7" id="dinamics">
</div>
<div style="display:none;">
<div id="1">
<p>content1</p>
</div>
<div id="2">
<p>content2</p>
</div>
<div id="3">
<div class="col-md-1" id="years">
<ul>
<li class="2016">2017</li>
<li class="2015">2016</li>
</ul>
</div>
</div>
<div class="col-md-6" id="pastExpos">
<div id="something">
<h3>something</h3>
</div>
</div>
<div id="sete">
<div class="col-md-6">
<h3>dezassete</h3>
</div>
</div>
</div>
But as soon as I change the li class="2017" from the ul under div class="status" to the ul under div class="years" (which is its intended placement), it stops working. Can you help?
Thank you
When you change the <li> class, you have to change in your Jquery too :
$(".2017").click(function(e) {
x = jQuery('#sete').clone().attr("id","something");
jQuery('#something').replaceWith(jQuery(x));
});
Because you're selecting the 2017 class, if you change in HTML and not in Jquery, the selector will point to nothing.
I am trying to include Semantic-UI dropdowns inside a table with many columns, which has a horizontal scroll bar.
When clicking a dropdown, the options are hidden inside the div.
fiddle:
http://jsfiddle.net/rotemx/n0azk0jc/
code:
<div id="wrapper">
<div id="content">
<div style="width: 500px">
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
<div class="inline-block">
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
</div>
</div>
</div>
</div>
screenshot:
quesiton:
How can I make the dropdowns visible ?
With your current setup, you can't. Anything inside the element with overflow: none cannot be shown outside the element boundaries.
In my use case I would like append elements to the respective object in each iteration which is generated dynamically. It is appending to the end of all objects. Here is my code,
HTML:
<div class="comment-list-new" style= "max-height: 660px !important;overflow-y: scroll;">
<h5>Discussion Board</h5>
<ol class="question_ol" >
{{ if .ViewData.Questions }}
{{ range .ViewData.Questions }}
<li>
<input type="hidden" id="question_id" class="question_id_val" value="{{.QuestionId}}"/>
<div class="q-comment">
<div class="qanda questiondiv" id="questionarea" name="questionarea">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">3</span>
<a class="downvote"></a>
</div>
<div >
<div class="qanda-info">
<h6><p id="quest_title">{{.QuestionTitle}}</p></h6>
</div>
<p id="quest_text">{{.QuestionText}}</p>
</div>
</div >
<div class="qanda-info">
<div class="user-info">
<img src="/resources/img/team-small-2.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
<a id="answertext" name ="answertext" type="submit" class="link-text answerbutton">Answer</a>
</div>
</div>
</div>
</li><!--end of individual question-->
{{ if .Answers }}
<div class="form-input">
<label for="answers">{{len .Answers}} Answer(s)</label>
</div>
{{ range .Answers }}
<ul class="children">
<li>
<div class="q-comment">
<div class="qanda">
<div>
<div id="topic" class="upvote pull-left">
<a class="upvote"></a>
<span class="count">{{.Upvotes}}</span>
<a class="downvote"></a>
</div>
<div >
<p>{{.AnswerText}}</p>
</div>
</div>
<div class="qanda-info">
<div class="user-info">
<img alt="User" src="/resources/img/team-small-4.png" />
</div>
<h6>{{.UserId}}</h6>
<span class="date alt-font sub">{{.DateCreated}}</span>
</div>
</div>
</div>
</li><!--end of individual comment-->
</ul>
{{ end }}
{{ end }}
{{ end }}
{{ end }}
</ol>
</div><!--end of comments list-->
** And my JS code: **
$('.questiondiv').on('click', '.submitanswerbutton', function() {
console.log("In submit button");
date = "17 June 2015"
var howtiId = $('#howti_id').text();
var question_id = $(this).closest('li').find('.question_id_val').val();
var answer_text = $('.answertext_val').val();
console.log(howtiId);
console.log(question_id);
console.log(answer_text);
$.getJSON("/submitanswer?howti_id="+howtiId+"&question_id="+question_id+"&answer="+answer_text, function(data) {
console.log("answer Response "+data);
newAnswer = "<ul class='children'><li><div class='q-comment'><div class='qanda'><div><div id='topic' class='upvote pull-left'><a class='upvote'></a><span class='count'>3</span><a class='downvote'></a></div><div><p>"+answer_text+"</p></div></div><div class='qanda-info'><div class='user-info'><img alt='User' src='/resources/img/team-small-4.png' /></div><h6>{{.UserId}}</h6><span class='date alt-font sub'>"+date+"</span></div></div></div></li></ul>"
$('ol').append(newAnswer);
//$(this).closest('.comment-list-new').find('.question_ol').append(newAnswer);
});
$(this).closest('.answersectiondiv').remove();
});
I am trying append answer to the respective question. But it is appending to the last question.
Could someone help me with this?
Firstly add a container div under the questions_ol div to include every question with its answers, give it the class question_and_answers, make sure it's under the loop.
Then use jquery selectors with $(this) to reach the relative answers list. Instead of:
$("ol").append (...
Use:
$(this).closest ('.question_and_answers ').append (...
I'm using a Semantic UI Search Selection and am using a very simple implementation of .dropdown() to convert static markup into a searchable country input.
The problem is that this input automatically focuses and the menu drops down on page load. If I wait until $(window).load(), I can remove the active and visible classes from the element (and its children), but I'd rather instantiate the menu without these to begin with.
My markup looks something like the following:
$('.ui.modal').modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
There are no other instances of .dropdown() in my code. Thoughts?
EDIT: I've discovered that this is happening because the form is included within a modal. The issue doesn't occur when the form is outside of the modal.
As of April 2015, there is an undocumented Modal setting which is responsible for focusing the first input element contained within the Modal:
autofocus: function() {
if(settings.autofocus) {
var
$inputs = $module.find(':input:visible'),
$autofocus = $inputs.filter('[autofocus]'),
$input = ($autofocus.length > 0)
? $autofocus
: $inputs
;
$input.first().focus();
}
},
This setting is available to us under the $.fn.modal.settings. As a result, the following will prevent this search input from focusing when the Modal opens:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
And a runnable example:
$('.ui.modal').modal({
autofocus: false,
}).modal('show');
$('.ui.dropdown').dropdown();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.8/semantic.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.12.0/semantic.min.css">
<div class="ui modal">
<i class="close icon"></i>
<div class="content">
<div class="ui form">
<div class="field">
<label>I am a:</label>
<select class="ui dropdown" name="homeowner_type">
<option value="">--</option>
<option value="Homeowner">Homeowner</option>
</select>
</div>
<!-- The dropdown in question -->
<div class="field">
<label>Country:</label>
<div class="ui fluid search selection dropdown">
<input type="hidden" name="country">
<i class="dropdown icon"></i>
<div class="default text">Select Country</div>
<div class="menu">
<div class="item" data-value="us"><i class="us flag"></i>United States</div>
<div class="item" data-value="uy"><i class="uy flag"></i>Uruguay</div>
<div class="item" data-value="uz"><i class="uz flag"></i>Uzbekistan</div>
<!-- additional countries -->
</div>
</div>
</div>
</div>
</div>
</div>
I am using twitter bootstrap version 3 and for some reason the width of the columns don't add up right.
Take a look at this shot: http://i.imgur.com/LhgqL12.png
The right column doesn't line up with the end of the carousel and I cannot figure out why!
Here's the html for the page:
<!-- navbar -->
<div class="col-md-12">
<div class="container">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><span class="glyphicon glyphicon-home"></span></li>
<li>Donate</li>
<li>Sales</li>
<li>Submit Tip</li>
<li>Gaming Wiki</li>
<li>About Us</li>
<li class="dropdown">
Community <b class="caret"></b>
<ul class="dropdown-menu">
<li>Forum</li>
<li>IRC Chat</li>
<li>Twitter</li>
<li>Sales Twitter</li>
<li>Google+</li>
<li>Links</li>
</ul>
</li>
<li class="dropdown">
<span class="glyphicon glyphicon-user"></span> liamdawe <b class="caret"></b>
<ul class="dropdown-menu">
<li>View Profile</li>
<li>User CP</li>
<li>Private Messages</li>
<li>Admin CP <span class="badge badge-important">3</span></li>
<li>Logout</li>
</ul>
</li>
</ul>
<form method="get" action="/index.php?module=search" class="navbar-form navbar-right" role="search">
<input type="hidden" name="module" value="search">
<input type="text" class="form-control" name="q" placeholder="Search Articles">
<input type="submit" style="position: absolute; left: -9999px; width: 1px; height: 1px;"/>
</form>
</nav>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<!-- logo -->
<img src="/templates/default/images/logo.png" height="120" width="600" alt="logo" class="logo-center" />
</div>
</div>
<div class="row">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="/uploads/carousel/1294630814id6gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Join our Minecraft server!</h3>
</div>
</div><div class="item">
<img src="/uploads/carousel/882399500id7gol.jpg" class="logo-center" alt="" />
<div class="carousel-caption">
<h3>Natural Selection 2 Out on the 30th for Linux!</h3>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
</a>
</div><!-- /.carousel -->
</div>
<!-- main content -->
<div class="row">
<!-- Articles -->
<div class="col-md-9">
<!-- notification -->
<div class="row">
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div>
<!-- new sales -->
<div class="row">
<div class="alert alert-success text-center">
<strong>Latest Games On Sale:</strong> <span class="label label-info">Steam</span> Sparkle 2 Evo, <span class="label label-info">Steam</span> Shadow Warrior Classic Redux, <span class="label label-info">Steam</span> Redshirt, <span class="label label-info">Steam</span> Gravity Badgers - See all
</div>
</div>
<ul class="nav nav-tabs">
<li class="active">Our News</li>
<li >Featured Videos</li>
<li >News Elsewhere</li>
</ul>
<div id="maincontent">
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/sdasd-asdasdasdasdasdasdasdasd.2121" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/549850194id2121gol.jpg">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Sdasd Asdasdasdasdasdasdasdasd</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:56 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 1 Comments</p>
</div>
</div>
<div class="seperator"></div>
<!-- Article -->
<div class="row gol-news-article">
<!-- Image -->
<div class="col-md-5">
<a href="/articles/test-hhhhhhhhhhhhhhhhhhhh.2120" class="thumbnail">
<img data-src="holder.js/350x220" alt="article-image" src="/uploads/articles/topimages/5407865id2120gol.">
</a>
</div>
<!-- Text -->
<div class="col-md-5">
<h4>Test Hhhhhhhhhhhhhhhhhhhh</h4>
<p class="small muted">by liamdawe January 17, 2014 at 1:52 pm</p>
<p>
Your text here, use the uploader for an image!Your text here, use the uploader for an image!Your text here, use the uploader for an image!
<p class="small muted">In: <span class="label label-info">Interview</span> </p>
<i class="icon-pencil"></i><strong>Edit</strong> <i class="icon-heart"></i><strong>Make Editors Pick</strong>
</p>
<p class="small muted"><span class="glyphicon glyphicon-comment"></span> 0 Comments</p>
</div>
</div>
<div class="seperator"></div>
</div>
<div class="row">
<div class="span3">
<div class="pagination">
<ul><li class="disabled previouspage">Prev</li><li class="disabled">1</li><li class="disabled">/</li><li>99</li><li class="nextpage">Next</li></ul></div></div>
<div class="span2" style="padding-top: 18px; padding-bottom: 18px;">
<form name="form2" class="form-inline">
Pick Page: <select class="input-mini" name="jumpmenu" onchange="window.open(this.options[this.selectedIndex].value, '_self')"><option value="/home/page=1">1</option><option value="/home/page=2">2</option><option value="/home/page=3">3</option><option value="/home/page=4">4</option><option value="/home/page=5">5</option><option value="/home/page=6">6</option><option value="/home/page=7">7</option><option value="/home/page=8">8</option><option value="/home/page=9">9</option><option value="/home/page=10">10</option><option value="/home/page=11">11</option><option value="/home/page=12">12</option><option value="/home/page=13">13</option><option value="/home/page=14">14</option><option value="/home/page=15">15</option><option value="/home/page=16">16</option><option value="/home/page=17">17</option><option value="/home/page=18">18</option><option value="/home/page=19">19</option><option value="/home/page=20">20</option><option value="/home/page=21">21</option><option value="/home/page=22">22</option><option value="/home/page=23">23</option><option value="/home/page=24">24</option><option value="/home/page=25">25</option><option value="/home/page=26">26</option><option value="/home/page=27">27</option><option value="/home/page=28">28</option><option value="/home/page=29">29</option><option value="/home/page=30">30</option><option value="/home/page=31">31</option><option value="/home/page=32">32</option><option value="/home/page=33">33</option><option value="/home/page=34">34</option><option value="/home/page=35">35</option><option value="/home/page=36">36</option><option value="/home/page=37">37</option><option value="/home/page=38">38</option><option value="/home/page=39">39</option><option value="/home/page=40">40</option><option value="/home/page=41">41</option><option value="/home/page=42">42</option><option value="/home/page=43">43</option><option value="/home/page=44">44</option><option value="/home/page=45">45</option><option value="/home/page=46">46</option><option value="/home/page=47">47</option><option value="/home/page=48">48</option><option value="/home/page=49">49</option><option value="/home/page=50">50</option><option value="/home/page=51">51</option><option value="/home/page=52">52</option><option value="/home/page=53">53</option><option value="/home/page=54">54</option><option value="/home/page=55">55</option><option value="/home/page=56">56</option><option value="/home/page=57">57</option><option value="/home/page=58">58</option><option value="/home/page=59">59</option><option value="/home/page=60">60</option><option value="/home/page=61">61</option><option value="/home/page=62">62</option><option value="/home/page=63">63</option><option value="/home/page=64">64</option><option value="/home/page=65">65</option><option value="/home/page=66">66</option><option value="/home/page=67">67</option><option value="/home/page=68">68</option><option value="/home/page=69">69</option><option value="/home/page=70">70</option><option value="/home/page=71">71</option><option value="/home/page=72">72</option><option value="/home/page=73">73</option><option value="/home/page=74">74</option><option value="/home/page=75">75</option><option value="/home/page=76">76</option><option value="/home/page=77">77</option><option value="/home/page=78">78</option><option value="/home/page=79">79</option><option value="/home/page=80">80</option><option value="/home/page=81">81</option><option value="/home/page=82">82</option><option value="/home/page=83">83</option><option value="/home/page=84">84</option><option value="/home/page=85">85</option><option value="/home/page=86">86</option><option value="/home/page=87">87</option><option value="/home/page=88">88</option><option value="/home/page=89">89</option><option value="/home/page=90">90</option><option value="/home/page=91">91</option><option value="/home/page=92">92</option><option value="/home/page=93">93</option><option value="/home/page=94">94</option><option value="/home/page=95">95</option><option value="/home/page=96">96</option><option value="/home/page=97">97</option><option value="/home/page=98">98</option><option value="/home/page=99">99</option></select></form></div></div>
</div>
<!-- Sidebar -->
<div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
<!-- Articles Sidebar -->
<ul class="list-group">
<li class="list-group-item"><i class="icon-heart"></i> Editor's Picks</li>
<li class="list-group-item"><i class="icon-star"></i> Popular this week</li>
<li class="list-group-item"><i class="icon-th-large"></i> View by Category</li>
<li class="list-group-item">
<form name="form1">
<select onchange="window.open(this.options[this.selectedIndex].value, '_self')" class="form-control">
<option>Pick One</option>
<option value="/articles/category/17">Coming Soon</option>
<option value="/articles/category/14">Competition</option>
<option value="/articles/category/7">Crowdfunding</option>
<option value="/articles/category/13">Desura</option>
<option value="/articles/category/1">Editorial</option>
<option value="/articles/category/20">FPS</option>
<option value="/articles/category/16">First Look</option>
<option value="/articles/category/9">Free Game</option>
<option value="/articles/category/8">Game Bundle</option>
<option value="/articles/category/4">Game Sale</option>
<option value="/articles/category/6">Indie Game</option>
<option value="/articles/category/18">Indie Game</option>
<option value="/articles/category/3">Interview</option>
<option value="/articles/category/10">MMO</option>
<option value="/articles/category/0">No Category</option>
<option value="/articles/category/11">Open Source</option>
<option value="/articles/category/21">RTS</option>
<option value="/articles/category/2">Review</option>
<option value="/articles/category/5">Steam</option>
<option value="/articles/category/12">Unity3D</option>
<option value="/articles/category/15">Wine</option>
</select>
</form>
</li>
<li class="list-group-item">Article Search</li>
<li class="list-group-item">Submit Article</li>
</ul>
<!-- twitter Sidebar -->
<div class="well well-sm">
<a class="twitter-timeline" href="https://twitter.com/gamingonlinux" data-widget-id="381375312019218432" height="400">Tweets by #gamingonlinux</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
<!-- Footer -->
<div class="row">
<div class="col-md-12">
<div class="well text-center">
<strong>GamingOnLinux</strong> the Linux Games website, Copyright © GamingOnLinux.com 2009-2014.
<br />Page generated in 0.025 seconds, MySQL queries: 10<br />
</div>
</div>
</div>
</div>
</div>
What I want is for the right panels width to extend to the end of the carousel, currently it falls short as you can see there is a gap on the right of blank space after the sidebar.
I think that the problem is not the right hand panel but a couple of other things.
First, the carousel is inside a .row but not inside a .col-md-12 mean there'll be a negative margin to the sides, but no padding on the col to negate that.
So add that in here:
<div class="row">
<div class="col-md-12">
<!-- image carousel -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
...
</div>
</div>
</div>
Second, you've nested some rows (.row) for your alert boxes. That's causing them to be pulled out of line because of the negative margin that rows have. You either need to add a col-md-12 around each alert (because the padding on cols negates the rows negative margin) or you remove the .row completely. That works because the div is just 100% width of the parent column which is fine.
So remove the row below:
<!-- notification -->
<div class="row"> <!-- REMOVE THIS -->
<div class="alert alert-warning text-center">
You have <span class="badge badge-important">3</span> admin items needing review!
</div>
</div> <!-- REMOVE THIS CLOSING DIV TOO -->
Demo
Try to define your col-md-3 boostrap is a grid of 12, you have defined mid to be 9
also to avoid the padding of container / row create a .nopadding { padding:0 !important }