1. 首頁
  2. 問答
  3. 格是全寬，但列表框裏面會不會擴大

格是全寬，但列表框裏面會不會擴大

2017-06-13 70 views
0

我只是希望我的listboc擴大屏幕的整個寬度，這種形象格是全寬，但列表框裏面會不會擴大

enter image description here

所以在文本高亮顯示的列表框中的「選擇或一倍單擊....「是不擴展屏幕的整個寬度的那個。內聯或顯示：內聯塊到每個3行和設置寬度：

標記

<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

添加顯示後100％現在的圖像是enter image description here

enter image description here

enter image description here

來源

2017-06-13 Samra

+0

你能告訴我們一個演示鏈接，或codepen –

+0

「@ Html.ListBoxFor（）'生成的實際HTML是什麼？什麼是'row'和'col-xs-9'類？有沒有其他可以應用於該元素的CSS？ – nnnnnn

回答

0

你可以嘗試將下面的屬性添加到列表框的父div嗎？

顯示：內聯或顯示：內聯塊

<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>

來源

2017-06-13 04:24:44 GaAd

+0

我已經添加style =「display：inline」到3行中的每一行並設置寬度：100％..但寬度相同。儘管每行的頁邊距有一些變化 – Samra

+1

max-width：100％。這可能有幫助，我認爲有些父元素覆蓋你的CSS。你可以運行開發人員的工具和dom資源管理器，以找到確切的CSS在該列表框？ – GaAd

+0

是的，我附上了快照 – Samra

0

添加display: inline-block屬性到每個.row

來源

2017-06-13 04:28:28 Ethernetz

+0

請參閱更新的圖像 – Samra

0

的選擇元件通常是由一個內聯塊元件默認。
您是否嘗試過在列表框樣式中設置width: 100%;？

來源

2017-06-13 04:32:57

+0

不要選擇通常默認顯示最長選項文本所需的寬度的元素？ – nnnnnn

相關問題

 相關問題