title: How to make a panel control responsive?
body: <p>I have the following code to display three devexpress drop downs, calendar control and a devexpress schedular. These controls were applied with bootstrap. Here is the view of my MVC, that has those controls. I have tried to mark the calendar control but that makes it more difficult to read so I removed the comments. please search the calendar in DateNavigator() control section</p>
  
  <pre><code>@{
      ViewBag.Title = "Scheduler";
  }
  &lt;style&gt;
      .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
      }
  &lt;/style&gt;
  &lt;style&gt;
      /*.form-control {
  
      }*/
  &lt;/style&gt;
  &lt;script&gt;
      $(document).ready(function () {
  
      //    $('#accordion').css('position', 'relative');
        //  alert('ready');
              $("#demo").on("hide.bs.collapse", function () {
                  $(".btn").html(' &lt;span style="float:left;"&gt;Calendar&lt;/span&gt;&lt;span class="glyphicon glyphicon-menu-down" style="float:right"&gt;&lt;/span&gt;');
              });
              $("#demo").on("show.bs.collapse", function () {
                  $(".btn").html('&lt;span style="float:left;"&gt;Calendar&lt;/span&gt;&lt;span class="glyphicon glyphicon-menu-up" style="float:right"&gt;&lt;/span&gt;');
              });
      });
  
      $(document).load(function () {
  
        //  alert('ready');
      });
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt; 
  
      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") &gt; -1) || (e.command.indexOf("Month") &gt; -1) || (e.command.indexOf("APTSAVE") &gt; -1)) {
          //    dt = new Date(scheduler.GetVisibleIntervals()[0].start);
          //    selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
          //}
          if ((e.command.indexOf("SETVISDAYS") &gt; -1))
              selectedDate = e.command.split('|')[1];
          else if ((e.command.indexOf("OFFSETVISI") &gt; -1))
              selectedDate = e.command.split(',')[e.command.split(',').length - 1]
          else if ((e.command.indexOf("Month") &gt; -1)) {
              dt = new Date(scheduler.GetVisibleIntervals()[0].start);
              selectedDate = dt.getFullYear() + "/" + (dt.getMonth() + 1) + "/" + dt.getDate();
          }
          else if ((e.command.indexOf("WorkWeek") &gt; -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 &lt; 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() &gt;= 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 &lt; 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 &lt; items.length; i++)
              texts.push(items[i].text);
          return texts.join(textSeparator);
      }
      function GetSelectedAppointmentTypeValue(items) {
          var texts = [];
          for (var i = 0; i &lt; items.length; i++)
              texts.push(items[i].value);
          return texts.join(textSeparator);
      }
      function GetAppointmentTypeValuesByTexts(texts) {
          var actualValues = [];
          var item;
          for (var i = 0; i &lt; 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-------------------------------------------
  
  &lt;/script&gt;
  &lt;style&gt;
      .test {width: 225px !important;}
      .timezonecss-class {height:30px !important;}
  
  &lt;/style&gt;
  @using System.Web.UI.WebControls
  @model CareHere.WebUI.Scheduler.Models.SchedulerDataObject
  
  
  &lt;div class="row" style="border:0px solid red;padding-left:4px;padding-top:5px;padding-right:4px;"&gt;
      &lt;div class="col-sm-7" style="border:0px solid green;padding:0px;width:800px;"&gt;
         @* &lt;h3 class="display-4"&gt;Scheduler&lt;/h3&gt;&lt;br /&gt;*@
          &lt;div class='form-group left' style="border:0px solid blue;padding-left:0px;padding-right:0px;width:300px;margin-left:0px;"&gt;
              &lt;label class="form-group" for="timeZoneEdit" &gt;Time Zone&lt;/label&gt;
  
               @Html.DevExpress().TimeZoneEdit(
                  settings =&gt;
                  {
                      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()
          &lt;/div&gt;
          &lt;div class='form-group right' style="border:0px solid blue;padding-right:0px;padding-left:0px;width:228px;margin-left:2px;"&gt;      
              &lt;label for="timeZoneEdit"&gt;Select Clinic&lt;/label&gt;
               @{
                  ViewBag.Facility = Model.Facility;
              }
                  @Html.Partial("_MultiSelectPartial", Model)
          &lt;/div&gt;
          &lt;div class='form-group right' style="border:0px solid yellow;padding-right:0px;padding-left:0px;width:228px;margin-left:1px;"&gt;
              &lt;label for="timeZoneEdit"&gt;Select Provider&lt;/label&gt;
              @{
                  ViewBag.Resources = Model.Resources;
              }
  
              @Html.Partial("_ResourceMultiSelectPartial", Model.Resources)
          &lt;/div&gt;
      &lt;/div&gt;
  
  
  
  
  &lt;div class="panel-group" id="accordion" style="margin-left:880px;margin-top:26px;width:458px;padding:0px;border:0px solid black;"&gt;
    &lt;div class="panel panel-default"&gt;
      &lt;div class="panel-heading" style="padding:0px;"&gt;
          &lt;button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:456px;margin:0px;" data-parent="#accordion"&gt;
            &lt;span style="float:left;"&gt;Calendar&lt;/span&gt;
            &lt;span class="glyphicon glyphicon-menu-down" style="float:right"&gt;&lt;/span&gt; 
          &lt;/button&gt;    
      &lt;/div&gt;
      &lt;div id="demo" class="panel-collapse collapse" style="border:0px solid black;padding:0px;width:458px;"&gt;
        &lt;div class="panel-body" style="padding-left:4px;padding-right:1px;padding-top:0px;padding-bottom:1px;border:0px solid black"&gt;
            @Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  
  &lt;div class="row" style="padding:0px;border:0px solid black;position:relative;"id="sp1"&gt;
      &lt;div class="col-sm-12" style="padding:5px;border:0px solid black""&gt;
          @Html.Partial("SchedulerPartial", Model)
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script&gt;
  
  &lt;/script&gt;
  </code></pre>
  
  <p>As seen on <a href="https://youtu.be/Y_JeuVQFpkc" rel="nofollow">this video</a>, when I re-size the browser window the calendar panel moves to the right instead of having a fixed position to the browser's right edge. Because of this the responsive capability goes away. How do I fix this problem so that the control will be visible on the right edge regardless of the browser re-size</p>
  
  <p>Thanks</p>