How to place button in card header as right side

[KINS]

I have an sfcard in my application.I would like to know below point in card header

1.How to reduce card Height (need css class)

2.Card Title should be in left side.

3.button in card header should be in right side.

I have tried below code but it's not working

<SfCard>

    <table class="table">

        <tr>

            <th>

                <div class="row">

                    <div class="col-xs-5 col-sm-5 col-lg-5 col-md-5">

                        <CardHeader>

                            <h3>Sample Request Form</h3>

                        </CardHeader>

                    </div>

                    <div class="col-xs-5 col-sm-5 col-lg-5 col-md-5 float-md-right">

                        <SfButton CssClass="btnFont">Back</SfButton>

                    </div>

                </div>

            </th>

        </tr>

    </table>

</sfcard>

[Vinitha Jeyakumar]

Hi Hassan, 

 

 

Greetings from Syncfusion support.    

   

  

We have validated your queries, 

 

Query 1. “How to reduce card Height” 

 

You can use the following CSS class to customize the card properties like height, width etc. 

Code snippet: 

.e-card { 

        height: 200px; 

        width: 500px; 

    } 

 

Query 2. ”Card Title should be in left side” 

 

You can use the following CSS class to customize the card header properties. 

Code snippet: 

.e-card .e-card-header { 

        justify-content: left; 

    } 

 

Query 3. ”button in card header should be in right side” 

 

You can use the following CSS class to move the button in the card header to right. 

Code snippet: 

.e-btn { 

        float: right; 

    } 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167396/ze/Card_demo1309405625 

 

Documentation: https://blazor.syncfusion.com/documentation/card/style/#style-and-appearance 

 

Please check the above code snippets, sample, documentation, and let us know if it satisfies your requirement. 

 

Regards,   

Vinitha   

[KINS]

Thanks

[Vinitha Jeyakumar]

Hi Hassan, 

 

 

Good day to you, 

 

 

We are glad and hope that you have found the solution to your requirement. Please let us know if you need any other assistance 

 

Regards, 

Vinitha 

[KINS]

Sorry again...

I would like to know how to reduce card header height. I have tried below css but it's not working

e-card .e-card-header { 

        Height:60px;

    } 

[Vinitha Jeyakumar]

Hi Hassan, 

 

 

Good day to you 

 

 

We have further validated your query “I would like to know how to reduce card header height” 

 

Your requirement can be achieved by using the following CSS class to change the card header height, 

 

Code snippet:  

.e-card .e-card-header {  

        height: 60px; 

    }  

 

Sample: https://www.syncfusion.com/downloads/support/forum/167396/ze/Card_Demo-118973482 

 

Documentation: https://blazor.syncfusion.com/documentation/card/style/#customizing-the-header-element 

 

Please check the above code snippets, sample, documentation, and let us know if it satisfies your requirement.  

 

Regards 

Vinitha 

[KINS]

I have another issue in card.Please check my comments in below link and see my comments in video

also please check  my code as well

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

Attachment: CardAlignment_59755fb7.zip

[KINS]

please help...

[Vinitha Jeyakumar]

Hi Hassan, 

 

 

We have further validated your queries, 

 

Query 1. “Button and card title should be same line” 

Query 2. “During resize two button should be responsive” 

 

We have tried to reproduce the exact scenario in the following ways, 

 

• Ensured by using the same code you have shared.
• Ensured by rendering the buttons inside the header.
• Also ensured by using the same package version and style you have used.

 

But we couldn’t reproduce the exact scenario of the issue. Please check the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/167398/ze/Card_header926719497 

 

We suspect that the issue occurs due to the “Styles” you have written for the card component. Can you please share the styles code that you have written in your application for the Card component. 

 

The above details will be helpful for us to find the cause of the issue and help you at the earliest. 

 

Query 3. “Why input type is auto hide” 

Query 4. “When I focus any control, it hides another control” 

 

We are currently validating the above queries and we will update you the further details on or before 29^th July. 

 

We appreciate your patience until then. 

 

Regards 

Vinitha 

[KINS]

sorry,please ignore query3 and query4

for query1 and query2 see my comments in attached video.

https://www.screencast.com/t/2XQym1mcE  

[Revanth Krishnan]

Hi Ahmed, 

 

 

We have further validated your queries, 

 

Query 1: “Two buttons should be on the right side of the same line and should stay on the right side when resizing”. 

 

This can be achieved by setting the style ‘width: 100%’ to the class ‘.e-card .e-card-header’ and then setting the style ‘text-align: right’ to the button wrapper div element. We have prepared a sample for your reference, 

 

Code Snippet: 

<SfCard> 

    <table class="table"> 

        <tr> 

            <th> 

                <div class="row"> 

                    <CardHeader> 

                        <h3 id="UCardHeader">Sample Master</h3> 

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

                            <SfButton CssClass="mr-1" @onclick="OnBackClicked">Back</SfButton> 

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

                        </div> 

                    </CardHeader> 

                    @*</div>*@ 

                </div> 

            </th> 

        </tr> 

    </table> 

    <CardContent> 

        . . .         

    </CardContent> 

</SfCard> 

. . . 

<style> 

    .e-card .e-card-header { 

        width: 100%; 

    } 

</style> 

 

Query 2: “The image in the card and input type (Syncfuison textbox/combo box ) should also resize when the width is given as 88%.” 

 

By default, when the image is rendered inside the card with the wrapper element as certain width and height it will automatically adjust when resizing the browser. Also, the Syncfusion textbox will also adjust and resize automatically upon browser resize. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167396/ze/Card-584696837 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth 

[KINS]

Thanks

Resizing working fine but image should not be in left side when resizing in mobile mode

It should be center

Hope it's clear and please help to close this thread

please see my video for button alignment

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

[KINS]

Please help because tomorrow support team will not available 

[Vinitha Jeyakumar]

Hi Ahmed, 

 

 

We have further validated your queries, 

 

Query 1. “image should not be in left side when resizing in mobile mode It should be center” 

 

We suggest you to use “media queries” CSS styles to move the image to center when resizing in the mobile mode. Check the below sample for reference. 

 

Code snippet: 

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

    img { 

        width: 200px; 

        height: 200px; 

        position: fixed; 

        top: 50%; 

        left: 50%; 

        margin-top: -100px; 

        margin-left: -100px; 

    } 

} 

 

Sample : https://www.syncfusion.com/downloads/support/forum/167396/ze/CardCss-490432545 

 

Query 2. “When I resize window, the button not properly align” 

 

This issue can be resolved by setting the style ‘width: 100%’ to the class ‘.e-card .e-card-header’. Please check the below code snippet, 

 

Code snippet:  

<style>  

    .e-card .e-card-header {  

        width: 100%;  

    }  

</style>  

  

Sample : https://www.syncfusion.com/downloads/support/forum/167396/ze/Card-584696837  

 

Please check the above sample and code snippet and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha. 

[KINS]

still not working 

please check my comments in below link

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

[Vinitha Jeyakumar]

Hi Ahmed, 

 

 

We have further validated your queries, 

 

Query 1. “when I resize, the title is getting hide” 

 

We have tried to reproduce the issue by following ways, 

 

• By ensuring, the header content styles when resizing the window.
• Also ensured by running the sample in all major browsers.

 

But we couldn’t reproduce the exact issue reproducing scenario from our end. 

 

We suspect that the issue occurs due to the “CSS styles” you have written in your application. Can you please share us with the CSS styles code that you have configured in your sample. It will be helpful for us to reproduce the reported issue scenario from our end and help you at earliest. 

 

Query 2. “I need to place the image control on top of the textbox control” 

 

You can achieve your requirement by moving the <div> element which contains the textbox controls when resizing the window. Please check the below code snippet for your reference. 

 

Code snippet:  

<div class="th"> 

<Syncfusion.Blazor.Inputs.SfTextBox Value="Text Box Content"></Syncfusion.Blazor.Inputs.SfTextBox> 

<Syncfusion.Blazor.Inputs.SfTextBox Value="Text Box Content"></Syncfusion.Blazor.Inputs.SfTextBox> 

</div> 

<style> 

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

     

    .image { 

        width: 100px; 

        height: 100px; 

        position: fixed; 

        top: 50%; 

        left: 50%; 

        margin-top: -100px; 

        margin-left: -100px; 

    } 

    .th { 

        margin-top: 200px; 

    } 

} 

</style> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167396/ze/CardCss-2106626238 

 

Please check the above code snippet and sample and, let us know if it satisfies your requirement. 

 

Regards, 

Vinitha 

[KINS]

still not working.Please check below link and source code for your reference

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

@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">

                <tr>

                    <th>

                        <div class="image" style="height: 4.6cm;width: 100%;">

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

                        </div>

                    </th>

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

                        <div class="th">

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

                        </div>

                    </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) {

        .image {

            width: 100px;

            height: 100px;

            position: fixed;

            top: 22%;

            left: 50%;

            margin-top: -100px;

            margin-left: -100px;

        }

    .th {

        margin-top: 200px;

    }

}

        #img2 {

            width: 200px;

            height: 200px;

        }

        .TextFixedStyle {

            position: fixed;

        }

</style>

[Vinitha Jeyakumar]

Hi Ahmed, 

 

 

Currently, we are validating your reported query. We will update you the further details on 06/08/2021. 

 

Regards, 

Vinitha 

[Vinitha Jeyakumar]

Hi Ahmed, 

 

 

We have further validated your query “The image needs to be moved to the top of the controls” 

 

We have created a sample using the code you have shared to move the image to the top of the TextBox controls when resizing the page. Here we modified the table element with the Div tag to achieve the requirement. Please find the sample below, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/167396/ze/Card_Blaz1-4431862 

 

Please check the sample for your reference and let us know if it satisfies your requirement. 

 

Regards, 

Vinitha.