css - 如何使面板控件响应？

Question

我有以下代码来显示三个 devexpress 下拉菜单、日历控件和一个 devexpress 时间表。这些控件是通过 Bootstrap 应用的。这是我的 MVC 的 View ，它具有这些控件。我试图标记日历控件，但这使得它更难阅读，所以我删除了评论。请在 DateNavigator() 控件部分搜索日历

@{
    ViewBag.Title = "Scheduler";
}
<style>
    .label-text 
    {
        font-size: 12px;
        font-weight: normal;
        padding-top: 10px;
    }

    .left {
      float: left;
      width: 125px;
      text-align: left;
      margin: 2px 10px;
      display: inline
    }

    .right {
      float: left;
      text-align: left;
      margin: 2px 10px;
      display: inline
    }
</style>
<style>
    /*.form-control {

    }*/
</style>
<script>
    $(document).ready(function () {

    //    $('#accordion').css('position', 'relative');
      //  alert('ready');
            $("#demo").on("hide.bs.collapse", function () {
                $(".btn").html(' <span style="float:left;">Calendar</span><span class="glyphicon glyphicon-menu-down" style="float:right"></span>');
            });
            $("#demo").on("show.bs.collapse", function () {
                $(".btn").html('<span style="float:left;">Calendar</span><span class="glyphicon glyphicon-menu-up" style="float:right"></span>');
            });
    });

    $(document).load(function () {

      //  alert('ready');
    });
</script>
<script type="text/javascript"> 

    var SelectedResources = "";
    var SelectedResourcesLookup = "";
    function OnBeginCallback(s, e) {
        //alert('called');this gets called selected date, months, year changes, when new appointment and other contextmenu items changes
        //        scheduler.GetVisibleIntervals()[0].start
        //        Thu Jan 07 2016 00:00:00 GMT-0600 (Central Standard Time)
        //(index):42 NewAppointment
        //        e.command
        //        "MNUVIEW|NewAppointment"
        //        (index):42 NewAppointment
        //        scheduler.GetActiveViewType()
        //        "Day"
        //if (args.Contains())
        //    
        //if (args.Contains("OFFSETVISI"))
        //    selectedDate = Convert.ToDateTime(args.Split(',')[args.Split(',').Length - 1]);
        var dt = new Date();
        var selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();

        //if ((e.command.indexOf("NewAppointment") > -1) || (e.command.indexOf("Month") > -1) || (e.command.indexOf("APTSAVE") > -1)) {
        //    dt = new Date(scheduler.GetVisibleIntervals()[0].start);
        //    selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
        //}
        if ((e.command.indexOf("SETVISDAYS") > -1))
            selectedDate = e.command.split('|')[1];
        else if ((e.command.indexOf("OFFSETVISI") > -1))
            selectedDate = e.command.split(',')[e.command.split(',').length - 1]
        else if ((e.command.indexOf("Month") > -1)) {
            dt = new Date(scheduler.GetVisibleIntervals()[0].start);
            selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
        }
        else if ((e.command.indexOf("WorkWeek") > -1)) {
            dt = new Date(scheduler.GetVisibleIntervals()[0].start);
            selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
        }
        else {
            dt = new Date(scheduler.GetVisibleIntervals()[0].start);
            selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
        }

        //dateNavigator.GetFirstDate() dateNavigator.GetLastDate()  gridLookup.gridView.GetSelectedFieldValues("FacID", OnGetSelectedFieldValues)
        //e.customArgs['SelectedResources'] = checkListBox.GetSelectedValues().join(';'); SelectedResourcesLookup  SelectedResourcesLookup

        e.customArgs['SelectedResources'] = SelectedResources;
        e.customArgs['SelectedDate'] = selectedDate;
        e.customArgs['SelectedResourcesLookup'] = SelectedResourcesLookup.toString();
        e.customArgs['timeZoneId'] = $('#timeZoneEdit_cmd_VI').val();
    }    

    function validateAppointment(s, e) {

        /*
        $.ajax({
            url: '/Home/ValidateAppointment',
            type: 'POST',
            dataType: 'json',
            data: { startTime: new Date().toUTCString(), scheduleDetailID : 2030   },
            success: function (result) {
                if (result == false)
                    alert('appointment not exits');
                else
                    alert('appointment exits');
            }
        });*/
        AppointmentType.HideDropDown();
    }
    //function disableMenuItems(menu, args) {
    //    var item = menu.GetItemByName("GotoToday");
    //    if (item) {
    //        item.SetEnabled(false);
    //    }
    //}
    //  ------------------------------------Resource select Lookup-------------------------------------------

    function CloseResourceGridLookup() {
        gridLookupResource.ConfirmCurrentSelection();
        gridLookupResource.HideDropDown();
    }
    function OngridLookupResourceSelectionChanged(s, e) {
        //gridLookupResource.gridView.GetSelectedFieldValues("PartyRoleID", OnResourceGetSelectedFieldValues);
        SelectedResourcesLookup = gridLookupResource.GetValue();
        scheduler.PerformCallback();
    }
    //function OnResourceGetSelectedFieldValues(selectedValues) {
    //    SelectedResourcesLookup = "";
    //    if (selectedValues.length == 0) {
    //        scheduler.PerformCallback();
    //        return;
    //    } else {
    //        alert(selectedValues.length);
    //        for (i = 0; i < selectedValues.length; i++) {
    //            SelectedResourcesLookup = SelectedResourcesLookup + selectedValues[i] + ";";
    //        }
    //        scheduler.PerformCallback();
    //    }
    //}
    ////  ------------------------------------Resource select Lookup-------------------------------------------
    //  ------------------------------------Patient Multiselect Lookup-------------------------------------------
    function SelectedPatient(s, e) {
        var g = patientgridLookup.GetGridView();

        //if (g.GetFocusedRowIndex() >= 0) {
        //    alert("rows selected");
        //}
        //else {
        //    alert("rows NOT selected");
        //}
        var valor = g.GetRowKey(g.GetFocusedRowIndex());
       // alert('selected by mouse:'+valor);
        $('#PatientPartyRoleID').val(valor);
        ClosePatientGridLookup();
    }

    function TestSelection(s, e) {
        alert('hello');
    }

    function OnValueChange(s, e) {
        alert('selected by auto select: '+s.getValue());
    }

    function ClosePatientGridLookup() {
       // alert('close patient grid');
        patientgridLookup.ConfirmCurrentSelection();
        patientgridLookup.HideDropDown();

    }
    //  ------------------------------------Patient Multiselect Lookup-------------------------------------------

    //  ------------------------------------Multiselect Lookup-------------------------------------------
    function ResourcePerformCall(s, e)
    {
        ResourceDataLoad();
        CloseGridLookup()

    }
    function CloseGridLookup() {
        gridLookup.ConfirmCurrentSelection();
        gridLookup.HideDropDown();
        //alert('close patient grid');
    }
    function OnGridLookupSelectionChanged(s, e)
    {
        gridLookup.gridView.GetSelectedFieldValues("FacID", OnGetSelectedFieldValues);
    }
    function OnGetSelectedFieldValues(selectedValues) {

        SelectedResources = "";
        if (selectedValues.length == 0) {
            scheduler.PerformCallback();
            return;
        } else {
            for (i = 0; i < selectedValues.length; i++) {
                SelectedResources = SelectedResources + selectedValues[i] + ";";
            }
            scheduler.PerformCallback();
        }
        //ResourceDataLoad();
    }

    function ResourceDataLoad()
    {
        var grid = gridLookupResource.GetGridView();
        grid.PerformCallback();
}
    //  ------------------------------------Multiselect Lookup-------------------------------------------
    function OnAppointmentFormSave(s, e) {
        if (IsValidAppointment())
            scheduler.AppointmentFormSave();
    }
    function IsValidAppointment() {
        $.validator.unobtrusive.parse('form');
        return $("form").valid();
    }

    function OnInplaceCloseButtonClick(s, e) {
        scheduler.InplaceEditFormCancel();
    }
    function OnSaveInplaceFormData(s, e) {
        if (IsValidAppointment())
            scheduler.InplaceEditFormSave();
    }
    function OnInplaceFormMoreButtonClick(s, e) {
        scheduler.InplaceEditFormShowMore();
    }
    function OnAppointmentFormCancel(s, e) {
        scheduler.AppointmentFormCancel()
    }
    function OnAppointmentFormDelete(s, e) {
        scheduler.AppointmentFormDelete();
    }

    //tooltip
    var toolTipContext;
    function OnToolTipDisplaying(s, e) {
        toolTipContext = e;
        switch (e.toolTip.type) {
            case MVCxSchedulerToolTipType.Appointment:
                OnAppointmentTipDisplaying(s, e);
                break;
            case MVCxSchedulerToolTipType.AppointmentDrag:
                OnAppointmentDragTipDisplaying(s, e);
                break;
            case MVCxSchedulerToolTipType.Selection:
                OnSelectionTipDisplaying(s, e);
                break;
        }
    }
      //  ------------------------------------Appointment Type Dropdown-------------------------------------------
    var textSeparator = ";";
    function OnAppointmentTypeSelectionChanged(listBox, args) {
        AppointmentTypeUpdateText();
        SetEndDate(listBox, args);
    }

    function SetEndDate(listBox, e) {

        var aptTypeList = $('#typeList').val().split(',');
        var mins = 0;
        $.each(listBox.GetSelectedItems(), function (index, item) {
            mins += parseInt(aptTypeList[item.index]);
        });
        var startdate = new Date(StartTime.GetDate());
        EndTime.SetDate(new Date(startdate.getTime() + mins * 60000));
    }
    function AppointmentTypeUpdateText() {
        var selectedItems = checkListAppointmentTypeID.GetSelectedItems();
        AppointmentType.SetText(GetSelectedAppointmentTypeText(selectedItems));
        $('#AppointmentTypeIDList').val(GetSelectedAppointmentTypeValue(selectedItems));
    }
    function SynchronizeAppointmentTypeValues(dropDown, args) {
        checkListAppointmentTypeID.UnselectAll();
        var texts = dropDown.GetText().split(textSeparator);
        var values = GetAppointmentTypeValuesByTexts(texts);
        checkListAppointmentTypeID.SelectValues(values);
        AppointmentTypeUpdateText(); // for remove non-existing texts
    }
    function GetSelectedAppointmentTypeText(items) {
        var texts = [];
        for (var i = 0; i < items.length; i++)
            texts.push(items[i].text);
        return texts.join(textSeparator);
    }
    function GetSelectedAppointmentTypeValue(items) {
        var texts = [];
        for (var i = 0; i < items.length; i++)
            texts.push(items[i].value);
        return texts.join(textSeparator);
    }
    function GetAppointmentTypeValuesByTexts(texts) {
        var actualValues = [];
        var item;
        for (var i = 0; i < texts.length; i++) {
            item = checkListAppointmentTypeID.FindItemByText(texts[i]);
            if (item != null)
                actualValues.push(item.value);
        }
        return actualValues;
    }
    function OnAppointmentTypeSelectedIndexChanged(s, e) {

        var aptTypeList = $('#typeList').val().split(',');
        var mins = 0;
        if (aptTypeList[s.GetSelectedIndex()]) {
            mins = parseInt(aptTypeList[s.GetSelectedIndex()]);
            $('#AppointmentTypeID').val(s.GetSelectedItem().value);
        }
        var startdate = new Date(StartTime.GetDate());
        EndTime.SetDate(new Date(startdate.getTime() + mins * 60000));
    }

    //  ------------------------------------Appointment Type Dropdown-------------------------------------------

</script>
<style>
    .test {width: 225px !important;}
    .timezonecss-class {height:30px !important;}

</style>
@using System.Web.UI.WebControls
@model CareHere.WebUI.Scheduler.Models.SchedulerDataObject


<div class="row" style="border:0px solid red;padding-left:4px;padding-top:5px;padding-right:4px;">
    <div class="col-sm-7" style="border:0px solid green;padding:0px;width:800px;">
       @* <h3 class="display-4">Scheduler</h3><br />*@
        <div class='form-group left' style="border:0px solid blue;padding-left:0px;padding-right:0px;width:300px;margin-left:0px;">
            <label class="form-group" for="timeZoneEdit" >Time Zone</label>

             @Html.DevExpress().TimeZoneEdit(
                settings =>
                {
                    settings.Name = "timeZoneEdit";
                    settings.SchedulerName = "scheduler";
                    settings.Width = Unit.Percentage(100);
                    settings.Height = Unit.Percentage(300);
                    //settings.Attributes.CssStyle.Add("font-weight", "large");
                    settings.ControlStyle.CssClass = "timezonecss-class";                    
                    //settings.Width = 300;
                }).GetHtml()
        </div>
        <div class='form-group right' style="border:0px solid blue;padding-right:0px;padding-left:0px;width:228px;margin-left:2px;">      
            <label for="timeZoneEdit">Select Clinic</label>
             @{
                ViewBag.Facility = Model.Facility;
            }
                @Html.Partial("_MultiSelectPartial", Model)
        </div>
        <div class='form-group right' style="border:0px solid yellow;padding-right:0px;padding-left:0px;width:228px;margin-left:1px;">
            <label for="timeZoneEdit">Select Provider</label>
            @{
                ViewBag.Resources = Model.Resources;
            }

            @Html.Partial("_ResourceMultiSelectPartial", Model.Resources)
        </div>
    </div>




<div class="panel-group" id="accordion" style="margin-left:880px;margin-top:26px;width:458px;padding:0px;border:0px solid black;">
  <div class="panel panel-default">
    <div class="panel-heading" style="padding:0px;">
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:456px;margin:0px;" data-parent="#accordion">
          <span style="float:left;">Calendar</span>
          <span class="glyphicon glyphicon-menu-down" style="float:right"></span> 
        </button>    
    </div>
    <div id="demo" class="panel-collapse collapse" style="border:0px solid black;padding:0px;width:458px;">
      <div class="panel-body" style="padding-left:4px;padding-right:1px;padding-top:0px;padding-bottom:1px;border:0px solid black">
          @Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
      </div>
    </div>
  </div>
</div>

</div>



<div class="row" style="padding:0px;border:0px solid black;position:relative;"id="sp1">
    <div class="col-sm-12" style="padding:5px;border:0px solid black"">
        @Html.Partial("SchedulerPartial", Model)
    </div>
</div>


<script>

</script>

正如在 this video 上看到的那样，当我调整浏览器窗口大小时，日历面板向右移动，而不是固定在浏览器的右边缘。因此，响应能力消失了。我该如何解决这个问题，以便无论浏览器大小如何调整，控件都将在右边缘可见

谢谢

Answer 1

您应该查找媒体查询。基本上，您应该避免使用 javascript 使您的页面响应，因为它只会让您的页面“更重”。

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/