1. Home
  2. Forum
  3. Blazor
  4. Styling issues and flicker on pop-up Field List in 18.4

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

Hello

I 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 visibly

2. When you select fields in the field list the fields themselves shift, flicker and then reset to the correct position

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:



    #component-container .e-dialog.e-popup {
        width: 50vw;
    }

Many thanks


Attachment: SyncfusionTroubleshoot_9585f784.zip

5 Replies 1 reply marked as answer
SS Saranya Sivan Syncfusion Team December 22, 2020 03:31 PM UTC

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 "<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. 
 
 
Regards,
Saranya Sivan. 


DI Ditchford December 23, 2020 07:39 AM UTC

Hello

Thank 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' 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 feedback

Regards

SS Saranya Sivan Syncfusion Team December 23, 2020 10:48 AM UTC

Hi Ditchford, 
Kindly use the below CSS style to apply the same in all dialogs in your page. 
 
<style>
    body .e-dialog.e-popup {
       width: 50vw;
    }
</style> 
 
 
If would like to apply to apply the style for field list dialog then kindly use the below CSS. 
 
 
<style>
    .e-pivotfieldlist-container.e-dialog.e-popup {
      width: 50vw;
    }
</style> 
 
 
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. 
 
 
Regards,
Saranya. 
 


SS Saranya Sivan Syncfusion Team December 29, 2020 03:26 PM UTC

 
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. 



SS Saranya Sivan Syncfusion Team December 30, 2020 06:50 PM UTC

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. 
 


Marked as answer
Loader.
Up arrow icon