Styling issues and flicker on pop-up Field List in 18.4

Question

HelloI have attached a sample.  If you go to the pivot table, I have observed the following issues:1. As the page opens the fields in the Field List flicker visibly2. When you select fields in the field list the fields themselves shift, flicker and then reset to the correct position3. The field list opens full screen width.  I was able to control this with the css below in previous versions, but this no longer seems to work:    #component-container .e-dialog.e-popup {        width: 50vw;    }Many thanksAttachment: SyncfusionTroubleshoot_9585f784.zip

Saranya Sivan · Accepted Answer

Hi Richard, 
  
The reported issue(As the page opens the fields in the Field List flicker visible) has been fixed in the weekly release (v18.3.0.32) and it is available in nuget.org (https://www.nuget.org/).  
  
Please let us know if you have concern.  
  
Regards, 
Saranya Sivan.

Saranya Sivan · Answer

Hi Ditchford, S.No Query Response 1. As the page opens the fields in the Field List flicker visible. We have fixed the issue which is now in testing phase. The complete solution will be available in next week patch release. (29th Dec, 2020). 2. When you select fields in the field list the fields themselves shift, flicker and then reset to the correct position. We are checking the reported issue. And we will provide you the timeline for the fix on 28th Dec, 2020. 3. The field list opens full screen width. I was able to control this with the CSS below in previous versions, but this no longer seems to work Issue occur due to CSS get overridden from the referred files in _Host.cshtml. Please find the screen shot below for reference. Hence, we suggest to refer the "" alone or at end of "" tag in _Host.cshtml to avoid these kind of style issue. Also, we have checked the given CSS to override the dialog width at sample level. The given, CSS contained ID "#component-container" not occurred in the given application end. Also, we would like to inform that we are not updating this ID from Pivot Table component end. Hence, kindly ensure that the given CSS contained IDs and Class names exists in the DOM itself at your end. Regards,Saranya Sivan.

Ditchford · Answer

HelloThank you for feedback on items 1 and 2....great.With regard to item 3.  I cannot change the order of the css references.  If I move<link rel='nofollow' rel='nofollow' href=”_content/Syncfusion.Blazor.Themes/bootstrap4.css” rel=”stylesheet” />"after my theme studio css then this does fix the width problem, but I loose all my styling from the theme studio file (which is the whole point).  So this method is not going to fly.As for you comment about the #component-container being the wrong id then even if I correct this then this still does not get applied to the width.Look forward to your feedbackRegards

Saranya Sivan · Answer

Hi Ditchford,

Kindly use the below CSS style to apply the same in all dialogs in your page.

If would like to apply to apply the style for field list dialog then kindly use the below CSS.

Please find the below screen-shot for your reference.

Meanwhile, we have corrected the given sample with above information for your convenience. Please find the sample below for your reference.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/7z/SyncfusionTroubleshoot-478844758

Regards,
Saranya.

Saranya Sivan · Answer

Hi Richard, 
 
Sorry for the delay. 
 
The weekly patch release will be rolled out on tomorrow. And the report issue will be fixed in the release. 
 
We appreciate your patience until then. 
 
Regards, 
 
Saranya.

S.No	Query	Response
1.	As the page opens the fields in the Field List flicker visible.	We have fixed the issue which is now in testing phase. The complete solution will be available in next week patch release. (29^th Dec, 2020).
2.	When you select fields in the field list the fields themselves shift, flicker and then reset to the correct position.	We are checking the reported issue. And we will provide you the timeline for the fix on 28^th Dec, 2020.
3.	The field list opens full screen width. I was able to control this with the CSS below in previous versions, but this no longer seems to work	Issue occur due to CSS get overridden from the referred files in _Host.cshtml. Please find the screen shot below for reference. Hence, we suggest to refer the "<link rel='nofollow' rel='nofollow' href=”_content/Syncfusion.Blazor.Themes/bootstrap4.css” rel=”stylesheet” />" alone or at end of "<head>" tag in _Host.cshtml to avoid these kind of style issue. Also, we have checked the given CSS to override the dialog width at sample level. The given, CSS contained ID "#component-container" not occurred in the given application end. Also, we would like to inform that we are not updating this ID from Pivot Table component end. Hence, kindly ensure that the given CSS contained IDs and Class names exists in the DOM itself at your end.