How to use parellex scrolling

I have below url for parellex scrolling.I would like to know how to use parellex scrolling in blazor syncfusion


https://www.w3schools.com/howto/howto_css_parallax.asp



12 Replies

JL Joshna Lingala Uthama Reddy Lingala Syncfusion Team July 13, 2021 04:48 PM UTC

Hi Hassan, 

Thanks for contacting Syncfusion Support. 

Currently we are validating your query “ parallex scrolling in Syncfusion controls ” at our end. However, we will update further details within 2 business days. Until then we appreciate your patience. 

Please get back to us if you have any queries. 

Regards, 
Joshna L  



KI KINS July 15, 2021 12:42 AM UTC

Sorry for asking questions again..

Please find my exact requirements in below. 


I have six grid control in single page.I would like to show or hide grid when scrolling down.



RS Renjith Singh Rajendran Syncfusion Team July 15, 2021 12:12 PM UTC

Hi Hassan, 

We referred the shared general reference ink, and used the suggested styles to create a page having grids to achieve Parallax scrolling in page having Syncfusion grids. Please download the sample from the link below, 
 
If we have misunderstood your query or if you are still facing difficulties, then kindly share with us the following details for better assistance. 

Query : .I would like to show or hide grid when scrolling down. 
We are not clear about this scenario. By default when scrolling the page, the 6 grids will be hidden one by one as you scroll continuously down. In the above sample, the grids will be hidden under scroll when you scroll down continuously. We need the following details to further proceed on this and provide you a suggestion. 

  1. Share a video demo explaining your complete requirement or the problem you are facing.
  2. Share with us a detailed explanation of your requirement.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith R 



KI KINS July 15, 2021 01:27 PM UTC

Thanks got it



RS Renjith Singh Rajendran Syncfusion Team July 16, 2021 03:37 AM UTC

Hi Hassan, 

Thanks for your update. Please get back to us if you need further assistance. 

Regards, 
Renjith R 



KI KINS August 2, 2021 06:20 AM UTC

sorry for late reply..


please check my actual requirement in below video


https://www.screencast.com/t/TLMRyVsQxdQz




KI KINS August 3, 2021 04:29 AM UTC

please help



RS Renjith Singh Rajendran Syncfusion Team August 3, 2021 02:29 PM UTC

Hi Ahmed, 

Based on this scenario, we suggest you to set the set the parallax styles to Blazor EditForm component and apply position as fixed for the parent div of the components rendered inside the Blazor EditForm. Please refer the codes below, 

<style> 
... 
.TextFixedStyle{ 
    position:fixed; 
} 
</style> 
 
    <EditForm Model="@context" @attributes="@FormAttributes" > 
        <div class="TextFixedStyle"> 
            <SfTextBox Placeholder="Enter Text"></SfTextBox><br> 
            <SfTextBox Placeholder="Enter Text"></SfTextBox><SfDropDownList TValue="string" TItem="string"></SfDropDownList><br> 
            <SfDatePicker TValue="DateTime?"></SfDatePicker> 
        </div> 
    </EditForm> 

    private Dictionary<stringobjectFormAttributes { getset; } = new Dictionary<stringobject>();     ...protected override void OnInitialized(){    FormAttributes.Add("class""parallax");    ...}

 
Kindly try the above suggestion, and if you are facing any difficulties kindly share with us a simple issue reproducing sample along with video demo of the replication procedure or requirement to proceed further. 

Regards, 
Renjith R 



KI KINS August 4, 2021 08:42 AM UTC

please check my comments in below link

https://www.screencast.com/t/sqXaEKzPJVVq


and also please check my code below which has three card


@inherits SampleStyleEditBase


@*<div class="TextFixedStyle">*@

    <SfCard>



        <CardHeader>

            <h3 id="UCardHeader">@GetResourceProvider.GetResourceValue(Resource, "lblSampleStyleListHeader")</h3>

            <div class="col 10 m10 l10" style="text-align: right;">

                <SfButton CssClass="btnFont mr-1">Back</SfButton>

                <SfButton CssClass="btnFont mr-1">Save</SfButton>

                <SfButton CssClass="btnFont mr-1">SRF</SfButton>

            </div>

        </CardHeader>


        <CardContent>


            <table class="table" style="padding-left:5px; padding-right:5px;padding-top:25px">

                <tr>


                    <th>

                        <div style="height: 4.6cm;width: 100%; border:1px">


                            <img id="img2" src="SRFImage/UIUXShoe.jpg" alt="Image" />

                        </div>

                    </th>


                    <th style="width: 88%;">


                        <EditForm Model="@sampleStyleSetup">

                            <DataAnnotationsValidator></DataAnnotationsValidator>


                            <div class="row">


                                @*<div class="col s12">*@

                                @foreach (var columns in productFieldMappingSetups)

                                {

                                    var visible = columns.Visible;

                                    var mandatory = columns.Mandatory;

                                    var enable = @mode == CommonClassEnum.ComponentModes.Disable ? false : columns.Enable;

                                    var resourceKey = columns.FieldName;


                                    var mandatoryIndicator = "e-success";


                                    if (mandatory)

                                        mandatoryIndicator = "required";


                                    if (resourceKey == "BuyerID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblBuyerName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlBuyer" DataSource="@buyerSetups" @bind-Value="@sampleStyleSetup.BuyerID" FloatLabelType="@FloatLabelType.Always" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "BuyerID")" CssClass="mandatoryIndicator">

                                                <DropDownListFieldSettings Value="BuyerID" Text="BuyerName"></DropDownListFieldSettings>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.BuyerID)" />

                                        </div>

                                    }

                                    if (resourceKey == "ProductID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblProductName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlProduct" DataSource="@referenceDetailsSetups" @bind-Value="@sampleStyleSetup.ProductID" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="ReferenceDetailsSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.ProductID)" />

                                        </div>

                                    }

                                    if (resourceKey == "GenderID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblGenderName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlGender" DataSource="@referenceDetailsGender" @bind-Value="@sampleStyleSetup.GenderID" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "GenderID")" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="ReferenceDetailsID" Text="ReferenceDetailsName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="ReferenceDetailsSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.GenderID)" />

                                        </div>

                                    }

                                    if (resourceKey == "BuyerStyleNo" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            <SfTextBox Enabled="@enable" Placeholder="Buyer Style" @bind-Value="sampleStyleSetup.BuyerStyleNo" HtmlAttributes="@commonHtmlAttribute.codeHtmlAttribute" FloatLabelType="@FloatLabelType.Auto"></SfTextBox>

                                            <ValidationMessage For="@(() => sampleStyleSetup.BuyerStyleNo)" />

                                        </div>

                                    }

                                    if (resourceKey == "BuyerStyleDescription" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            <SfTextBox Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "BuyerStyleDescription")" @bind-Value="sampleStyleSetup.BuyerStyleDescription" FloatLabelType="@FloatLabelType.Always"></SfTextBox>

                                            <ValidationMessage For="@(() => sampleStyleSetup.BuyerStyleDescription)" />

                                        </div>

                                    }

                                    if (resourceKey == "RefNo" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            <SfTextBox Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "RefNo")" @bind-Value="sampleStyleSetup.RefNo" FloatLabelType="@FloatLabelType.Always" HtmlAttributes="@commonHtmlAttribute.codeHtmlAttribute"></SfTextBox>

                                            <ValidationMessage For="@(() => sampleStyleSetup.RefNo)" />

                                        </div>

                                    }

                                    if (resourceKey == "SizeClassID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblSizeClassName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlSizeClass" DataSource="@sizeClassSetups" @bind-Value="@sampleStyleSetup.SizeClassID" FloatLabelType="@FloatLabelType.Always" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SizeClassID")">

                                                <DropDownListFieldSettings Value="SizeClassID" Text="SizeClassName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="SizeClassSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.SizeClassID)" />

                                        </div>

                                    }

                                    if (resourceKey == "WidthClassID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblWidthClassName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlWidthClass" DataSource="@widthClassSetups" @bind-Value="@sampleStyleSetup.WidthClassID" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="WidthClassID" Text="WidthClassName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="WidthClassSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.WidthClassID)" />

                                        </div>

                                    }

                                    if (resourceKey == "CollectionID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblCollectionName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlCollection" DataSource="@collectionSetups" @bind-Value="@sampleStyleSetup.CollectionID" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="CollectionID" Text="CollectionName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="CollectionSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.CollectionID)" />

                                        </div>

                                    }

                                    if (resourceKey == "ConstructionID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblConstructionName")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlConstruction" DataSource="@constructionSetups" @bind-Value="@sampleStyleSetup.ConstructionID" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="ConstructionID" Text="ConstructionName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="ConstructionSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.ConstructionID)" />

                                        </div>

                                    }

                                    if (resourceKey == "LastTrNo" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblLastTrNo")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlLastTrNo" DataSource="@lastSetups" @bind-Value="@sampleStyleSetup.LastTrNo" Readonly="true" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="LastID" Text="LastName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="LastSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.LastTrNo)" />

                                        </div>

                                    }

                                    if (resourceKey == "LastID" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            @*<label>@GetResourceProvider.GetResourceValue(Resource, "lblLastID")</label>*@

                                            <SfDropDownList Enabled="@enable" ID="ddlLast" DataSource="@lastSetups" @bind-Value="@sampleStyleSetup.LastID" FloatLabelType="@FloatLabelType.Always">

                                                <DropDownListFieldSettings Value="LastID" Text="LastName"></DropDownListFieldSettings>

                                                <DropDownListEvents TItem="LastSetup" TValue="int"></DropDownListEvents>

                                            </SfDropDownList>

                                            <ValidationMessage For="@(() => sampleStyleSetup.LastID)" />

                                        </div>

                                    }

                                    if (resourceKey == "SampleStyleNo" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            <SfTextBox Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SampleStyleNo")" @bind-Value="sampleStyleSetup.SampleStyleNo" FloatLabelType="@FloatLabelType.Always" Readonly="true"></SfTextBox>

                                        </div>

                                    }

                                    if (resourceKey == "SampleCreatedDate" && visible)

                                    {

                                        <div class="col s12 m6 l4">

                                            <SfDatePicker Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "SampleCreatedDate")" @bind-Value="sampleStyleSetup.SampleCreatedDate" FloatLabelType="@FloatLabelType.Always"></SfDatePicker>

                                            <ValidationMessage For="@(() => sampleStyleSetup.SampleCreatedDate)" />

                                        </div>

                                    }

                                    if (resourceKey == "PackageReceivedDate" && visible)

                                    {

                                        <div class=col s12 m6 l4">

                                            <SfDatePicker Enabled="@enable" Placeholder="@GetResourceProvider.GetResourceValue(Resource, "PackageReceivedDate")" @bind-Value="sampleStyleSetup.PackageReceivedDate" FloatLabelType="@FloatLabelType.Always"></SfDatePicker>

                                            <ValidationMessage For="@(() => sampleStyleSetup.PackageReceivedDate)" />

                                        </div>

                                    }

                                }




                            </div>



                        </EditForm>


                    </th>

                </tr>

            </table>


        </CardContent>



    </SfCard>

@*</div>*@



<SfCard>


    <CardContent>

        <div class="row" style="padding-left:5px; padding-right:5px;padding-top:35px ">

            <div class="col s12 m12 l12 ">

                <SfGrid DataSource="@Orders" AllowPaging="true" ID="GridBackColor">

                    <GridPageSettings PageSize="5"></GridPageSettings>

                </SfGrid>

            </div>

        </div>

    </CardContent>


</SfCard>


<SfCard>

    <CardContent>

        <div class="col s12 m12 l12 ">

            <div class="row" style="padding-left:5px; padding-right:5px;padding-top:25px ">

                <div class="col s12 m12 l12 ">

                    <SfTab CssClass="parent-tab-class" Height="500px" Width="100%" OverflowMode="OverflowMode.Scrollable">

                        <TabItems>

                            <TabItem>


                                <ChildContent>

                                    <TabHeader Text="SIZE BREAK"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <SrfDetailSizeList />

                                </ContentTemplate>


                            </TabItem>


                            <TabItem>

                                <ContentTemplate>

                                    <SfTab HeaderPlacement="HeaderPosition.Left" CssClass="third-nested-tab-class">

                                        <TabItems>

                                            <TabItem>

                                                <ChildContent>

                                                    <TabHeader Text="LEATHER"></TabHeader>

                                                </ChildContent>


                                                <ContentTemplate>

                                                    <SrfDetailBomLeatherList />

                                                </ContentTemplate>


                                            </TabItem>


                                            <TabItem>

                                                <ChildContent>

                                                    <TabHeader Text="MATERIAL"></TabHeader>

                                                </ChildContent>


                                                <ContentTemplate>

                                                    <SrfDetailBomMaterialList />

                                                </ContentTemplate>


                                            </TabItem>


                                            <TabItem>

                                                <ChildContent>

                                                    <TabHeader Text="LINING"></TabHeader>

                                                </ChildContent>


                                                <ContentTemplate>

                                                    <SrfDetailBomLeatherList />

                                                </ContentTemplate>


                                            </TabItem>


                                        </TabItems>

                                    </SfTab>

                                </ContentTemplate>

                                <ChildContent>

                                    <TabHeader Text="BILL OF MATERIAL"></TabHeader>

                                </ChildContent>

                            </TabItem>


                            <TabItem>


                                <ChildContent>

                                    <TabHeader Text="PROCESS SPEC"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <SrfDetailProcessSpecList />

                                </ContentTemplate>


                            </TabItem>


                            <TabItem>

                                <ContentTemplate>

                                    <SfTab HeaderPlacement="HeaderPosition.Left" CssClass="third-nested-tab-class">

                                        <TabItems>

                                            <TabItem>

                                                <ChildContent>

                                                    <TabHeader Text="ORDER"></TabHeader>

                                                </ChildContent>


                                                <ContentTemplate>

                                                    <SrfDetailOrderCommentList />

                                                </ContentTemplate>


                                            </TabItem>


                                            <TabItem>

                                                <ChildContent>

                                                    <TabHeader Text="DESPATCH"></TabHeader>

                                                </ChildContent>


                                                <ContentTemplate>

                                                    <SrfDetailDespatchCommentList />

                                                </ContentTemplate>


                                            </TabItem>




                                        </TabItems>

                                    </SfTab>

                                </ContentTemplate>

                                <ChildContent>

                                    <TabHeader Text="COMMENTS"></TabHeader>

                                </ChildContent>

                            </TabItem>


                            <TabItem>


                                <ChildContent>

                                    <TabHeader Text="ATTACHMENT"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <SrfDetailProcessSpecList />

                                </ContentTemplate>




                            </TabItem>


                            <TabItem>


                                <ChildContent>

                                    <TabHeader Text="COMMUNICATION"></TabHeader>

                                </ChildContent>

                                <ContentTemplate>

                                    <SrfDetailDespatchCommentList />

                                </ContentTemplate>


                            </TabItem>




                        </TabItems>

                    </SfTab>

                </div>

            </div>

        </div>

    </CardContent>

</SfCard>


    <style>

        .ImgStyle {

            border: 1px solid;

            height: 170px;

            width: 270px;

            padding-left: 5px;

        }




        .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item {

            height: 0;

            width: 175px;

            border-left: 33px solid transparent;

            border-right: 33px solid transparent;

            margin-top: -6px;

        }


            .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item.e-active {

                border-bottom: 40px solid #2b2b2b;

            }


        .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-toolbar-item {

            border-bottom: 40px solid whitesmoke;

        }


        .e-tab.parent-tab-class .e-tab-header .e-toolbar-items:not(.e-tbar-pos) .e-toolbar-item:last-child {

            margin-top: -6px;

        }


        .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft .e-tab-wrap,

        .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright .e-tab-wrap {

            height: 76px;

            padding-top: 42px;

            color: #2b2b2b;

        }


        .e-tab.parent-tab-class .e-tab-header .e-toolbar-item .e-tab-wrap {

            padding-left: 0;

            padding-right: 0;

            text-align: center;

        }


        .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,

        .e-tab.parent-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text {

            color: white;

        }


        .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) .e-indicator {

            left: 0 !important;

            right: 0 !important;

            background: #2b2b2b;

        }


        .e-tab.parent-tab-class .e-tab-header:not(.e-vertical) {

            padding-left: 100px;

        }


        .e-tab.first-nested-tab-class .e-tab-header .e-indicator,

        .e-tab.second-nested-tab-class .e-tab-header .e-indicator,

        .e-tab.third-nested-tab-class .e-tab-header .e-indicator {

            top: 10px !important;

            bottom: 0 !important;

            height: 130px !important;

            background: #2b2b2b;

        }


        .e-tab.first-nested-tab-class .e-tab-header .e-toolbar-items,

        .e-tab.second-nested-tab-class .e-tab-header .e-toolbar-items,

        .e-tab.third-nested-tab-class .e-tab-header .e-toolbar-items {

            padding-right: 20px;

        }


        .e-tab.first-nested-tab-class.e-vertical-tab .e-content .e-item.e-active,

        .e-tab.second-nested-tab-class.e-vertical-tab .e-content .e-item.e-active,

        .e-tab.third-nested-tab-class.e-vertical-tab .e-content .e-item.e-active {

            padding-left: 20px;

        }


        .e-tab.first-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,

        .e-tab.first-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text,

        .e-tab.second-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,

        .e-tab.second-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text,

        .e-tab.third-nested-tab-class .e-tab-header .e-toolbar-item.e-ileft.e-active .e-tab-text,

        .e-tab.third-nested-tab-class .e-tab-header .e-toolbar-item.e-iright.e-active .e-tab-text {

            color: #2b2b2b;

        }


        /*.e-dropdownbase .e-list-item, .e-dropdownbase .e-list-item.e-item-focus {

            font-family: Poppins;

            font-size: 8px;

        }*/



        /*text and combo control*/


        /*.e-input-group input.e-input,

        .e-float-input.e-input-group input,

        .e-input-group.e-control-wrapper input.e-input,

        .e-float-input.e-input-group.e-control-wrapper input,

        .e-float-input input,

        .e-float-input.e-control-wrapper input {

            font-family: Poppins;

            min-height: 12px;

        }*/


        /*Modify font size */

        /*.e-float-input,

        .e-float-input.e-control-wrapper {

            font-size: 12px;

            font-family:Poppins;

        }*/

        /* Font size for placeholder on top */

        /*.e-float-input input:valid ~ label.e-float-text,

            .e-float-input input ~ label.e-label-top.e-float-text,

            .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,

            .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text {

                font-size: 8px;

                font-family: Poppins;

            }*/

        /*Font size for placeholder on bottom */

        /*label.e-float-text,

            .e-float-input label.e-float-text,

            .e-float-input.e-control-wrapper label.e-float-text,

            .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,

            .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {

                font-size: 8px;

                font-family: Poppins;

            }*/



        @@media only screen and (max-width: 700px) {


            #img2 {

                width: 200px;

                height: 200px;

                position: fixed;

                left: 50%;

                margin-top: -100px;

                margin-left: -100px;

            }

        }


        #img2 {

            width: 200px;

            height: 200px;


        }


        .TextFixedStyle {

            position: fixed;

        }

    </style>




RS Renjith Singh Rajendran Syncfusion Team August 6, 2021 03:40 AM UTC

Hi Ahmed, 

We are not clear about the exact requirement or the problem you are facing. We used your shared code to prepare a sample using Cards. But in our sample, the 1st card get displays above the 2nd and 3rd cards. We could not face 1st card hidden behind 2nd and 3rd card problem. We are attaching a sample which we have prepared using your shared codes by applying the suggestions from our previous update
 
As we are not clear about your exact requirement or problem. We need the following details to proceed further. 

  1. Share a simple issue reproducing sample for us to validate based on your scenario and application layout.
  2. Share a video demo showing the detailed explanation of your problem.
  3. Share a detailed explanation of your complete requirement or the problem you are facing.
  4. If possible, reproduce the problem with the above attached sample and share with us a detailed explanation of the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Renjith R 



KI KINS August 8, 2021 02:33 PM UTC

I am using pixinventix materialize with syncfusion theme 


Is there any conflict in between there ???



RS Renjith Singh Rajendran Syncfusion Team August 9, 2021 01:12 PM UTC

Hi Ahmed,  

Thanks for your update.  

Our Syncfusion theme will be applied only to Syncfusion components, so there will be no conflict when you use other themes in your application. Please let us know if you are facing any issue with it to validate and provide prompt solution.  

So please check this case from your side and if you are facing any difficulties kindly get back to us with a simple issue reproducing sample and the details requested from our previous update to proceed further. 
 
Regards, 
Renjith R 


Loader.
Up arrow icon