iT邦幫忙

0

想請問這個畫面該如何做調整

https://ithelp.ithome.com.tw/upload/images/20190731/20110132binZHQApUX.jpg

這個是我先前完成的表單

目前在調整畫面問題,最後調整成這樣
https://ithelp.ithome.com.tw/upload/images/20190731/20110132hqmjYP7nQF.jpg

現在遇到一個問題,如果我網頁縮小時,會變成這樣
https://ithelp.ithome.com.tw/upload/images/20190731/20110132rqYpIeBMj8.jpg

想請問這個該如何處理?

這是我的HTML

<!--查詢條件-->
<div class="row">
    <div class="col-md-12 ca">
        @using (Html.BeginForm("DrScheduleList", "DrSchedule", new { area = "Center" }, FormMethod.Post, new { id = "queryForm", @class = "form-inline" }))
        {
            <div class="box box-primary">
                <div class="box-body form-flex-container">
                    <div class="col-inner-wrapper">
                        <div class="row-flex">
                            <div class="col-input">
                                @Html.CTextBoxFor(m => m.YeartoString, hStatus, new { @class = "form-control" })
                            </div>
                            <div class="col-label">
                                <label class="control-label">年</label>
                            </div>
                        </div>
                        <div class="row-flex">
                            <div class="col-input">
                                @Html.CTextBoxFor(m => m.MonthtoString, hStatus, new { @class = "form-control" })
                            </div>
                            <div class="col-label">
                                <label class="control-label">月</label>
                            </div>
                        </div>

                        <button type="submit" class="btn btn-default pull-right  next">下個月</button>
                        <button type="submit" class="btn btn-default pull-right  previous">上個月</button>
                        <button type="submit" class="btn btn-primary pull-right">查詢</button>
                        <button type="button" class="fn-del-week-sch btn btn-default btn-right-margin pull-right">清除當月所有排程</button>
                    </div><!--form-flex-container-->
                </div><!-- /.box-body -->
            </div><!-- /.box -->
        }<!-- /BeginForm -->
    </div>
    <!-- /.col -->
</div>
<div style="height:580px;width:900px;overflow:auto;background:#EEEEEE;">
    <div class="container-fluid">
        <div class="row">
            <!--床位排程資訊-->
            <div class="col-md-10 panel-right panel-20 cal">
                <div class="box box-primary ">
                    <div class="box-header">
                    </div><!-- /.box-header -->
                    <div id="schTable">
                        <table id="dataTable" class="table table-bordered table-hover caltable" style="margin: 0px 0px;">
                            <tbody id="dataTbody">
                                @foreach (var row in @Model.result)
                                {

                                    <tr>
                                        <th class="sch-left-th"></th>
                                        @foreach (string text in row)
                                        {
                                            var arr = text.Split('&');

                                            if (!String.IsNullOrEmpty(text))
                                            {
                                                <th colspan="3" class="th-weekday"><span class="th-date">@arr[0] @arr[1]</span></th>
                                            }
                                            else
                                            {
                                                <th colspan="3" rowspan="3" class="th-weekday"></th>
                                            }
                                        }
                                    </tr>
                                    <tr>
                                        <th class="sch-left-th">時段</th>
                                        @foreach (string text in row)
                                        {
                                            if (!String.IsNullOrEmpty(text))
                                            {
                                                <th>早</th>
                                                <th>午</th>
                                                <th>晚</th>
                                            }
                                        }
                                    </tr>
                                    <tr>
                                        <th class="sch-left-th">排班醫師</th>
                                        @foreach (string text in row)
                                        {
                                            if (!String.IsNullOrEmpty(text))
                                            {
                                                var arr = text.Split('&');
                                                if (arr.Length > 0)
                                                {
                                                    DateTime getDateTime;
                                                    bool IsTryParseDT = DateTime.TryParseExact(arr[0],
                                                        "yyyy/M/d", System.Globalization.CultureInfo.InvariantCulture,
                                                        System.Globalization.DateTimeStyles.None,
                                                        out getDateTime);
                                                    if (!IsTryParseDT)
                                                    {
                                                        <td colspan="3">日期格式錯誤,請聯絡管理員</td>
                                                    }
                                                    else
                                                    {

                                                        //model.DrEmp = svc.FindDrsch(user.CID);
                                                        var data = Model.DrEmp.Where(x => x.SCH_DATE.Date == getDateTime);
                                                        //獲取今天的日期
                                                        <td id="spell-1" data-id="@arr[0]" class="fn-putbox">
                                                            @{
                                                        var spell1 = data.Where(x => x.SCH_SPELL == "1").OrderBy(x => x.CRE_DATE).ToList();
                                                        foreach (var item in spell1)
                                                        {
                                                            @*<p>@item.EMP_NAME</p>*@
                                                                <label id="@item.GUID" data-id="@item.GUID" class="fn-del lstItem" onclick="del('@item.GUID');return false;">@item.EMP_NAME</label>
                                                        }
                                                            }
                                                        </td>
                                                        <td id="spell-2" data-id="@arr[0]" class="fn-putbox">
                                                            @{
                                                        var spell2 = data.Where(x => x.SCH_SPELL == "2").OrderBy(x => x.CRE_DATE).ToList();
                                                        foreach (var item in spell2)
                                                        {
                                                            @*<p>@item.EMP_NAME</p>*@
                                                                <label id="@item.GUID" data-id="@item.GUID" class="fn-del lstItem" onclick="del('@item.GUID');return false;">@item.EMP_NAME</label>
                                                        }
                                                            }
                                                        </td>
                                                        <td id="spell-3" data-id="@arr[0]" class="fn-putbox">
                                                            @{
                                                        var spell3 = data.Where(x => x.SCH_SPELL == "3").OrderBy(x => x.CRE_DATE).ToList();
                                                        foreach (var item in spell3)
                                                        {
                                                            @*<p>@item.EMP_NAME</p>*@
                                                                <label id="@item.GUID" data-id="@item.GUID" class="fn-del lstItem" onclick="del('@item.GUID');return false;">@item.EMP_NAME</label>
                                                        }
                                                            }
                                                        </td>
                                                    }
                                                }
                                                else
                                                {
                                                    <td id="spell-1" data-id="@arr[0]"></td>
                                                    <td id="spell-2" data-id="@arr[0]"></td>
                                                    <td id="spell-3" data-id="@arr[0]"></td>
                                                }
                                            }
                                        }
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                    <!-- /.box-body -->
                </div>
                <!-- /.box -->
            </div>
        </div>
    </div>
</div>

<!--醫師資訊-->
<div class="col-md-2 panel-right panel-20 doc">
    <div class="box box-primary">
        <div class="box-header">
        </div><!-- /.box-header -->
        <div class="box-body">
            <div class="lstdiv">
                <table id="NameTable" class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th>醫師名單</th>
                        </tr>
                    </thead>
                    <tbody id="NameTbody">
                        @if (Model.DrEmpList.Count > 0)
                        {
                            foreach (var item in Model.DrEmpList)
                            {
                                <tr>
                                    <td class="fn-item td-draggable name" id="@item.DR_EMPNO" name="@item.EMP_NAME" draggable="true">@item.EMP_NAME</td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>
        </div>
        <!-- /.box-body -->
    </div><!-- /.box -->
</div>  <!-- /.col -->

相關CSS 設定

    .cal {
        width: 1700px;
    }

    th {
        text-align: center;
    }

    .fn-item {
        text-align: center;
    }

    #spell-1 {
        background-color: #fff;
        width: 120px;
        height: 60px;
    }

    #spell-2 {
        background-color: #fffff1;
        width: 120px;
        height: 60px;
    }

    #spell-3 {
        background-color: #f1f9ff;
        width: 120px;
        height: 60px;
    }

    td {
        text-align: center;
    }

    .sch-left-th {
        width: 120px;
    }
       .doc {
        position: relative;
        left: 900px;  
        bottom: 550px;
    }
dragonH iT邦大師 1 級 ‧ 2019-07-31 12:04:34 檢舉
其實我看不出來第三張圖 table 有什麼問題

是指被蓋住嗎
tenno081 iT邦新手 4 級 ‧ 2019-07-31 13:10:32 檢舉
就是最下面那一片黑黑的是什麼?視窗拉最大就沒有那東西,可是縮小卻有
dragonH iT邦大師 1 級 ‧ 2019-07-31 13:12:45 檢舉
用 f12 console 去看囉

1 個回答

0
浩瀚星空
iT邦大師 1 級 ‧ 2019-07-31 16:10:43

不知道是不是我猜的那樣。
這是我曾經遇過的問題,跟你的HTML無關。而是跟CHROME瀏覽器有關。

你可以先試試其它瀏覽器看看該現象是否有存在。
如果連其它瀏覽器也有同樣的情況。那才是你的CSS的問題了。

如果不是的話,那跟我一樣去碰上搞怪問題了。

我那時有在網路上查過了,是因為CHROME有一個硬體加速的設定。預設是打開的。
將其給關掉該現象就會消失了。

當然啦,我這只是猜測而已。如果不是的話就當我沒說吧

PS:不要問我為何有這樣的原因,我當初有四處想找到問題的本質,不過都沒一個確定的答案。有人說其實並不能怪CHROME。這是驅動廠商的問題。有人說這是CHROME的BUG。
也有人說是WIN系統的問題。所以我也無法確定該問題點。

tenno081 iT邦新手 4 級 ‧ 2019-07-31 17:00:44 檢舉

感謝你,這個我後來解掉了

我後來是在醫師名單外面再加一層

就沒這問題了

我能否離個題問一下關於JQUERY與IE11相容性的問題
就是我這表單有做一個拖拉功能,IE11無法運作,Chrome卻可以
JQUERY好像不支援IE11,所以只能用JS來處理嗎?

JQUERY在1.11版之後的版本,就有宣告不支援ie了。
好像1.09之前的還ok。但能否相容插件就是一個很大的問題就是了。

不過你可以找找jquery ie修正插件。
我曾經有處理過。

原則上其實出問題的很多並不是jquery本身的問題。而是插件上的應用處理問題。

但大家都會推往jquery為禍首。所以後期才會宣告不支援ie。
拖拉的話,我想你因該是遇到瀏覽器判斷的錯誤問題。因該是拖拉插件本身的問題。要改一下瀏覽器的判斷。要不然會直接在那邊出錯。

tenno081 iT邦新手 4 級 ‧ 2019-08-01 09:22:13 檢舉

了解

我的JQUERY是用1.10.4版本

就不清楚這樣算是哪部分的問題

我在IE使用時是遇到這錯誤

https://ithelp.ithome.com.tw/upload/images/20190801/20110132ai2aj6CEXD.jpg

我要發表回答

立即登入回答