none
請問Modal大小 RRS feed

  • 問題

  • 老師前輩好

    目前遇到一個問題就是在電腦顯示的Modal寬度符合頁面大小不用捲軸再往右邊拉

    但用手機看版面Modal卻佔滿整個手機頁面沒辦法完整顯示,也沒有捲軸再往右邊拉整個動不了

    請問可以怎調整呢? 謝謝

    2020年4月16日 上午 12:35

解答

所有回覆

  • 目前測試如下,手機可以往右拉顯示

    但電腦網頁就無法一次完整顯示所有欄位

    可能我把Modal裡面放了Gridview有太多欄位了,應用可能錯了

    謝謝

    .modal-dialog.modal-800 {
                width: 650px;
                margin: 30px auto;
            }
    
    
    
     <div class="modal" id="detailModal">
                        <div class="modal-dialog modal-800" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h5 class="modal-title">xx明細</h5>
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                        <span aria-hidden="true">&times;</span>
                                    </button>
                                </div>

    2020年4月16日 上午 12:46
  • 您可以考慮使用FooTable調整GridView的樣式, 像這樣:

    Responsive GridView Using Footable

    • 已標示為解答 effor 2020年4月20日 上午 12:13
    2020年4月16日 上午 02:03
  • 謝謝老師,這之前有用過滿適用的

    後來好像class有錯少了個句點,目前已正常了,謝謝您

    .modal-dialog.modal-800 {
                width: 650px;
                margin: 30px auto;
            }
    
     <div class="modal" id="detailModal">
                        <div class="modal-dialog.modal-800" role="document">

    2020年4月20日 上午 12:17
  • 推薦您參考以下這一篇
    透過CSS來讓您的表格,可以依據寬度,判斷是否要自動的產生Scroll

    https://codepen.io/cssgrid/pen/pRXQzW


    topcat(姍舞之間的極度凝聚)
    http://www.dotblogs.com.tw/topcat
    世界上有兩樣東西分享給別人後,不但不會變少,還會變更多:
    一個是快樂,另一個是知識~ 分享...是知識累積的開始...

    • 已標示為解答 effor 2020年4月23日 上午 07:36
    2020年4月20日 上午 01:37
    版主