Current filter:
                                You should refresh the page.
                                  • Hello,

                                    It's me or the group postion in the dxForm running less with the new version in place of the older.
                                    In attachment is a exmple make on a computer but we see directly the difference on a smartphone.
                                    I am sure, i don't have this problem on older version.

                                    This screen is a old one and running perfectly in the past. I have change no code....

                                    I give you the code of the exemple for for information

                                    [HTML]
                                    @(Html.DevExtreme().Form<CTIWeb.Models.ViewDbContext.AvailabilityFilter>() .ShowValidationSummary(true) .Items(items => { items.AddButton() .HorizontalAlignment(HorizontalAlignment.Left) .ButtonOptions(b => b .Text(new JS("formatMessage('Refresh')")) .Type(ButtonType.Danger) .UseSubmitBehavior(true) .OnClick("RefreshClick") .Icon("refresh") //.UseSubmitBehavior(true) ); items.AddGroup() .CssClass("second-group") .Items(groupItems => { groupItems.AddSimpleFor(m => m.EquipmentId) .Label(l => l.Text(new JS("formatMessage('Equipment')"))) .Editor(e => e .TagBox() .ID("tbEquipment") .DataSource(d => d.Mvc().LoadAction("GetEquipment").Key("EquipmentId")) .DisplayExpr("Name") .ValueExpr("EquipmentId") .ShowSelectionControls(true) .DeferRendering(false) .OnContentReady("SelectAllEquipments")); groupItems.AddGroup() .ColCount(4) .Items(secondGroupItems => { secondGroupItems.AddSimpleFor(m => m.BeginDate) .Label(l => l.Text(new JS("formatMessage('BeginDate')"))) .Editor(e => e .DateBox() .ID("dbBeginDate") .Type(DateBoxType.DateTime) .ShowClearButton(true).Width(250) ) .IsRequired(false); secondGroupItems.AddButton() .HorizontalAlignment(HorizontalAlignment.Left) .ButtonOptions(b => b .Text(new JS("formatMessage('Today0')")) .Type(ButtonType.Danger) .OnClick("SetToday0") .Icon("revert") //.UseSubmitBehavior(true) ); secondGroupItems.AddSimpleFor(m => m.EndDate) .Label(l => l.Text(new JS("formatMessage('EndDate')"))) .Editor(e => e .DateBox() .ID("dbEndDate") .Type(DateBoxType.DateTime) .ShowClearButton(true).Width(250) ) .IsRequired(false); secondGroupItems.AddButton() .HorizontalAlignment(HorizontalAlignment.Left) .ButtonOptions(b => b .Text(new JS("formatMessage('Current')")) .Type(ButtonType.Danger) .OnClick("SetCurrentDate") .Icon("revert") //.UseSubmitBehavior(true) ); }); }); }) .FormData(Model) ) }

                                    It's me or the are a problem ?

                                    Waiting for your answer because at least 10 pages are impacted by this effect,

                                    Didier
                                    Luxembourg

                                • Artem (DevExpress Support) 08.19.2019

                                  Hi,
                                   
                                  Thank you for the screenshot. The issue is unknown to us and it's not clear how to reproduce it from scratch.
                                  Would you please specify what previous version you used and create a test example with a stand-alone Form demonstrating what Bootstrap classes become overridden in action?
                                   
                                  You can use our Project Template as a starting point.
                                   
                                  Your time and cooperation are greatly appreciated.

                                • Billen Didier 08.19.2019

                                  Hello Artem,

                                  First i appologize.
                                  The people thie are making test says that a new feature.
                                  I have tested with v19.1.3 and the problem was the same.....

                                  The problem is that the colums of the group go outside the group (see the picture of the last post).
                                  On a computer, no problem but the result on a iphone is not beautifull .

                                  I have try  .ColCountByScreen(c => c.Md(4).Sm(2)) on the group, the result is a little better.

                                  What the best way to keep col in the group ?

                                  Thank you in advance and one time more, sorry for the mistake,

                                  Didier
                                  Luxembourg

                                1 Solution

                                Creation Date Importance Sort by

                                Hi Didier,
                                 
                                Thank you for the sample project. I reproduced the issue on my side using the Google Chrome iPhone emulator. Then, I removed our Form component and added the default input element and reproduced the same issue:
                                Clipboard-File-1.png
                                 
                                According to this test, the issue is not directly related to our components. Thus, I recommend you look for the solution on common forums such as StackOverflow. For example, check the following:
                                twitter bootstrap navbar fixed top overlapping site
                                Bootstrap navbar header overlaps content on small screens
                                 
                                As for the ColCountByScreen option, it works according to the size of the screen. It does not depend on the size of the container. So, you need to apply it to create a different layout in case of different screen resolutions. Also, if you need to customize the predefined screen resolutions, you can use the screenByWidth callback.
                                Finally, I recommend you refer to the Layout Depending on the Screen Width guide to learn more about different approaches to customize our Form layout.
                                 
                                Let me know if you have further questions.

                                • Billen Didier 08.21.2019

                                  Hello,

                                  With this code, it's look a little better.

                                  [HTML]
                                  @(Html.DevExtreme().Form<CTIWeb.Models.ViewDbContext.Top10Filter>() .ShowValidationSummary(true) .ScreenByWidth(@<text> function (width) { if (width < 500) return "xs"; if (width < 992) return "sm"; if (width < 1200) return "md"; return "lg"; } </text>) .Items(items => { items.AddGroup() .CssClass("second-group") .Items(groupItems => { groupItems.AddGroup() .ColCount(4) .ColCountByScreen(c => c.Lg(4).Md(2).Sm(2).Xs(1))

                                  Thank you for your job,

                                  Didier
                                  Luxembourg

                                • Lex (DevExpress Support) 08.21.2019

                                  I'm happy to hear that the issue has been resolved, Didier! You are welcome.