Samra Samra -3 years ago 92
HTML Question

div is full width but the listbox inside would not expand

I just want my listboc to expand the whole width of screen, in this image

enter image description here

So the highlighted list box under text "select or double-click...." is the one which is not expanding the whole width of screen.

Markup

<div class="row" style="margin-left: 5px; margin-right: 5px; margin-top:10px;" id="divCommentBank">
<div class="table">
<div class="row" style="margin-top:0px; padding-top:0px;">
<div class="col-xs-5" style="width:200px; border:groove; margin-left: 20px">
<label style="width:100%">Comment Categories</label>
@Html.ListBoxFor(m => m.cM.CategoryList, new SelectList(Model.cM.CategoryList, "CategoryID", "Description"), new { @id = "listCommentCategory", @style = "height:168px; margin-top:5px; margin-bottom: 5px; width:190px" })

</div>
<div style="float: right; width:900px; border:groove; margin-right: 20px">
<div class="row" style="margin-top:5px; padding-top:0px;">
<div class="col-xs-4" style=" margin-left: 5px">
@Html.DropDownListFor(m => m.cM.HeaderList, new SelectList(Model.cM.HeaderList, "CommentID", "Comment"), new { @id = "ddlCommentHeaders", @style="width: 100%" })
</div>
<div class="col-xs-4">
Search:
@Html.TextBox("txtSearchHeader")
<button id="clear">X</button>
</div>
<div class="col-xs-1">
<button id="refresh">Refresh</button>
</div>
</div>
<div class="row" >
<div style="margin-left:5px" class=" col-xs-9">
Select or double-click on a comment to insert:
</div>
</div>
<div class="row" style="margin-top:5px">
<div style="margin-left:5px; " class=" col-xs-9">
@Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px;" })
</div>
</div>
</div>
</div>
</div>
</div>


UPDATE

After adding display:inline OR display:inline-block to each of the 3 rows and setting width: 100% now the image isenter image description here

enter image description here

enter image description here

Answer Source

Could you try adding the below attribute to the parent div of listbox?

display: inline or display: inline-block

<div class="row" style="margin-top:5px;display:inline;">
                <div style="margin-left:5px; " class=" col-xs-9">
                    @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px;" })
                </div>

OR

  <div class="row" style="margin-top:5px;display:inline-block;">
                <div style="margin-left:5px; " class=" col-xs-9">
                    @Html.ListBoxFor(m => m.cM.CommentsList, new SelectList(Model.cM.CommentsList, "CommentID", "Comment"), new { @id = "listComments", @style = "height:105px; margin-bottom:5px;" })
                </div>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download