Current filter:
                                You should refresh the page.
                                  • Hi

                                    I have a grid that the label is being overlapped by an editor. I have done many grids before and this is the first one that has done this to me. This is happening on a grid that uses a Popup Edit form as the mode. The style that I have imported from Devepxress is Moderno, and I will attach the css code that will effect this grid '

                                    below is the grids partial view

                                    [C#]
                                    @model List<WebApplication1.Models.SoftwareLicenseViewModel> @Html.DevExpress().GridView(settings => { settings.Name = "AssignLicensesGrid"; settings.KeyFieldName = "LicenseUserName"; settings.CallbackRouteValues = new { Controller = "Construction", Action = "gvSoftwareLicenses" }; settings.SettingsEditing.AddNewRowRouteValues = new { Controller = "Construction", Action = "gvSoftwareLicenseAddNew" }; settings.SettingsEditing.UpdateRowRouteValues = new { Controller = "Construction", Action = "gvSoftwareLicenseUpdate" }; settings.SettingsEditing.DeleteRowRouteValues = new { Controller = "Construction", Action = "gvSoftwareLicenseDelete" }; settings.SettingsBehavior.AllowFocusedRow = true; settings.SettingsEditing.Mode = GridViewEditingMode.PopupEditForm; settings.SettingsPopup.EditForm.HorizontalAlign = PopupHorizontalAlign.WindowCenter; settings.SettingsPopup.EditForm.VerticalAlign = PopupVerticalAlign.WindowCenter; settings.Styles.AlternatingRow.Enabled = DefaultBoolean.True; //settings.EditFormLayoutProperties.RequiredMark = "(Required)"; settings.Styles.AlternatingRow.BackColor = System.Drawing.ColorTranslator.FromHtml("#E8E8E8"); settings.Styles.FocusedRow.BackColor = System.Drawing.Color.DarkKhaki; settings.SettingsPopup.EditForm.MinWidth = 750; settings.SettingsBehavior.ConfirmDelete = true; //settings.SettingsEditing.EditFormColumnCount = 2; settings.InitNewRow = (s, e) => { e.NewValues["LicenseUserName"] = ""; e.NewValues["LicenseEmailAddress"] = ""; e.NewValues["LicensePassword"] = ""; e.NewValues["LicenseConfirmPassword"] = ""; }; settings.Toolbars.Add(toolbar => { toolbar.Enabled = true; toolbar.Position = GridToolbarPosition.Top; toolbar.Items.Add(GridViewToolbarCommand.New); toolbar.Items.Add(GridViewToolbarCommand.Edit); toolbar.Items.Add(GridViewToolbarCommand.Delete); }); settings.Columns.Add("LicenseUserName").Caption = "User Name"; settings.Columns.Add("LicenseEmailAddress").Caption = "Email Address"; settings.Columns.Add(i => { i.FieldName = "LicensePassword"; i.Caption = "Password"; i.EditorProperties().TextBox(p => { p.Password = true; }); }); settings.Columns.Add(i => { i.FieldName = "LicenseConfirmPassword"; i.Caption = "Confirm Password"; i.EditorProperties().TextBox(p => { p.Password = true; }); }); }).Bind(Model).GetHtml()

                                    This partial view is located in a page control attached below

                                    [C#]
                                    @Html.DevExpress().PageControl(tabSett => { tabSett.Name = "RegistrationPageControl"; tabSett.Width = System.Web.UI.WebControls.Unit.Percentage(100); //tabSett.Height = System.Web.UI.WebControls.Unit.Pixel(500); tabSett.TabPages.Add("Registration Information", "RegInfo").SetContent(() => { Html.RenderPartial("_ConsRegistrationForm1", Model); }); tabSett.TabPages.Add("Assign Licenses", "AssingLic").SetContent(() => { Html.RenderAction("gvSoftwareLicenses"); }); }).GetHtml()

                                    Here is the style section of the index

                                    [CSS]
                                    <style> #CONSReg { padding-top: 150px; /*width: 100%;*/ } #RegPagControl { margin:auto; width:75%; } body { background-color: #2f4353; background-image: linear-gradient(315deg, #2f4353 0%, #d2ccc4 74%); } </style>

                                    The page control is wrapped in two div's the 'CONSReg' and 'RegPagControl'

                                    [C#]
                                    <div id="CONSReg"> <div id="RegPagControl"> @Html.DevExpress().PageControl(tabSett => { tabSett.Name = "RegistrationPageControl"; tabSett.Width = System.Web.UI.WebControls.Unit.Percentage(100); //tabSett.Height = System.Web.UI.WebControls.Unit.Pixel(500); tabSett.TabPages.Add("Registration Information", "RegInfo").SetContent(() => { Html.RenderPartial("_ConsRegistrationForm1", Model); }); tabSett.TabPages.Add("Assign Licenses", "AssingLic").SetContent(() => { Html.RenderAction("gvSoftwareLicenses"); }); }).GetHtml() </div> </div>

                                    and below is the only css code that I have on any devexpress item

                                    [CSS]
                                    .dxtcLite_Moderno > .dxtc-content { background-color: white; } .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-link { color: white; } .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-tab, .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-activeTab { background-color: #909090; } .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-activeTab, .dxtcLite_Moderno.dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab.dxtc-lead, .dxtcLite_Moderno.dxtc-noSpacing > .dxtc-stripContainer .dxtc-activeTab { background-color: white; } .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-activeTab .dxtc-link { color: #2b2b2b; } .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-tabHover, .dxtcLite_Moderno > .dxtc-stripContainer .dxtc-tabHover .dxtc-link { background: #19357b; }

                                    Any help is greatly appreciated Thank you

                                • Eric Daniels 01.14.2020

                                  Here is the image of the grid sorry forgot to attach

                                2 Solutions

                                Creation Date Importance Sort by

                                I figured out that bootstraps css class was messing up the label as well as JQuery files being loaded more than once so it was giving me an F12 error

                                Hello,

                                This effect may occur because you're using custom styles on the page. These custom styles may affect our edit form editors' styles. I suggest you use recommendations from the How to implement CSS-related solutions for DevExpress components article to inspect resulting styles and check why this overlapping occurs.

                                If these recommendations don't help, please send us a simplified runnable project where we can reproduce this issue in action.

                                • Eric Daniels 01.14.2020

                                  I have taken off all the styles from the page and still nothing. I also have made the popupedit width bigger and the only thing that is happening is the editor and label get bigger still overlap.

                                  Is there the possibility that I am missing scripts in my project that DevExpress uses to make these controls responsive?