2016-10-06 203 views
1

我有一些控制在div的底部。我希望這些控件在用戶滾動時保持固定。引導 - 保持div固定在水平滾動滾動

enter image description here

我嘗試: 1)使DIV固定。問題在於,該id會破壞我的引導屬性,也是因爲高度是動態生成的。

<div id="timelineContainer"> 
    <p class="mes">{{mes1}}</p> 
    <div id='chart_div' class="chart"></div> 

    <div class="row fixedcontrols"> 

    <div class="fixed col-md-1 col-lg-1 col-xs-1 form-group-lg"> 
     <button type="button" id="next1" class="btn btn-primary btn-block transback " ng-click="timeline.getPreviousData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load previous 100 records..."> 
     <span id="nextdata1" class="glyphicon glyphicon-arrow-left"></span></button> 
    </div> 

    <div class="col-md-3 col-lg-3 col-xs-3 "> 
     <button type="button" class="btn btn-warning btn-block" class="tt" id="btn_ZoomIn" name="btn_ZoomIn" ng-click="timeline.zoomIn()"><span id="zoomin" class="glyphicon glyphicon-zoom-in"></span> 
     </button> 
    </div> 

    <div class="col-md-3 col-lg-3 col-xs-3 form-group-lg"> 
    <button type="button" class="btn btn-primary btn-block" id="btn_ZoomOut" name ="btn_ZoomOut" ng-click="timeline.zoomOut()"> <span id="zoomout" class="glyphicon glyphicon-zoom-out"></span></button> 
</div> 

    <div class="col-md-4 col-lg-4 col-xs-4 col-sm-4 form-group-md ff"> 
    <button type="button" id="advanced1" ng-click="timeline.searchclick()" class="btn btn-default btn-block">Show Search</button> 
    </div> 
    <div class="col-md-1 col-lg-1 col-xs-1 form-group-lg pull-right"> 
    <button type="button" id="next" class="btn btn-primary btn-block " ng-click="timeline.getNextData();"class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Load next 100 records..."> <span id="nextdata" class="glyphicon glyphicon-arrow-right"></span> 
    </button> 
    </div> 

    </div> 
</div> 



#timelineContainer { 

overflow-x: scroll; 
overflow-y: scroll; 
white-space: nowrap; border: 13px solid #bed5cd; 
width: 100%; 
margin: 0 auto; 
position: relative; 
background-color: #5bc0de; 
    } 

謝謝。

更新: 控件在用戶滾動時移動,如下所示。我希望他們得到修復。

enter image description here

更新:稱圖片 enter image description here

+0

你能解釋一下嗎?你真的想要得到什麼 –

+0

我希望控件在用戶向左或向右滾動時保持固定。目前,當我滾動時,控件滾動並且用戶看不到控制按鈕。請參閱我的更新。 – vladimir999

+0

你有更多的CSS?或者js?你忘了在這裏添加? –

回答

1

我可以從你的問題理解是您希望在頁面下部div來固定於適當位置,

我希望一css中的小改動將解決您的問題

position: fixed !important;

如果它不是你的意思,那麼你可以請解釋更多!

+0

是的,多數民衆贊成我需要的,但問題是,它弄亂了我的引導。我更新了我的問題以顯示結果。 – vladimir999

0

將控件的位置設置爲絕對,並確保它們的祖先是id爲timelineContainer的div。絕對將定位元素相對於它的祖先。無論你移動到哪裏,他們都會被固定在div上。