Align CardHeader / CardFooter Left or Right

[Mike Chafin]

How to you align the <CardHeader> or <CardFooter>  of the <SfCard> component  left or right?

I've tried using 

.e-card-header {

     text-align: left;

}

but no joy.

Thanks 

Mike

[Hareesh Balasubramanian]

Hi Mike, 

Greetings from Syncfusion Support..! 

We have prepared a sample based for your requirement “align card header or card footer” which can be downloaded from the following link. 

https://www.syncfusion.com/downloads/support/forum/158759/ze/SupportSample-1144982995  

<div class="control-section"> 

    <div class="row"> 

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

            <SfCard> 

                <CardHeader Title="Harrisburg Keith" SubTitle="By John Doe | Jan 20, 2018" /> 

                <CardContent> 

                    <div>Hi, I'm creative graphic design for print, new media based in Edenbridge</div> 

               </CardContent> 

                <CardFooter> 

                    <div class="CustomFooter">Hello World !!!</div> 

                </CardFooter> 

            </SfCard> 

        </div> 

    </div> 

</div> 

<style> 

    .CustomFooter, 

    .e-card .e-card-header .e-card-header-caption:first-child { 

        padding-left: 20%; 

    } 

</style> 

Kindly try the above solution and get back to us if you need any further assistance. 

Regards, 

Hareesh 

[Mike Chafin]

Thank you for responding...

First the sample did not run out of the box

Once I corrected the sample run correctly.

I must have a CSS property that is overriding the defaults. 

Thanks again.

Mike

[Nevitha Ravi]

Hi Mike, 

Thanks for your update, we are glad that our solution helped you. 

First the sample did not run – Sorry for that, we will make sure to share the proper working sample. 

Regards, 

Nevitha