How to use parellex scrolling

[KINS]

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

[Joshna Lingala Uthama Reddy Lingala]

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  

[KINS]

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.

[Renjith Singh Rajendran]

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, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp1545201857 

 

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 

[KINS]

Thanks got it

[Renjith Singh Rajendran]

Hi Hassan, 

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

Regards, 

Renjith R 

[KINS]

sorry for late reply..

please check my actual requirement in below video

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

[KINS]

please help

[Renjith Singh Rajendran]

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<string, object> FormAttributes { get; set; } = new Dictionary<string, object>();     ...protected override void OnInitialized(){    FormAttributes.Add("class", "parallax");    ...}

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp-1013816382 

 

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 

[KINS]

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>

[Renjith Singh Rajendran]

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 1^st card get displays above the 2^nd and 3^rd cards. We could not face 1^st card hidden behind 2^nd and 3^rd card problem. We are attaching a sample which we have prepared using your shared codes by applying the suggestions from our previous update. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/ServerApp219770490 

 

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 

[KINS]

I am using pixinventix materialize with syncfusion theme 

Is there any conflict in between there ???

[Renjith Singh Rajendran]

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