Can't get Tile View example to work, does not tile!

[Shawne]

If I take the code from this page

https://blazor.syncfusion.com/demos/card/tile-view?theme=bootstrap4

and copy it into my project... it shows the cards but they're all stacked on top of each other.

What could cause that??

[Revanth Krishnan]

Hi Shawne, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “When I take the code from this page(https://blazor.syncfusion.com/demos/card/tile-view?theme=bootstrap4). It shows the cards but they're all stacked on top of each other”. 

 

This issue occurred because the class row is missing in the sample in the div element (card layout). This can be resolved by adding the row class to the div element with e-card-layout class. We have prepared a sample for your reference, 

 

Code Snippet: 

 

<div class="row"> 

    <div class="control-section col-lg-9 card-control-section tile_layout"> 

            <div class="row e-card-layout"> 

                @if (this.CardDatas.Count == 0) 

                { 

                    <div class="e-error"> 

                        <div class="e-error-content">No results found. Please try a different search.</div> 

                    </div> 

                } 

                else 

                { 

                    @foreach (CardDataModel card in CardDatas) 

                    { 

                        <div class="col-lg-4 col-md-4 col-sm-6" style="padding: 15px;"> 

                            <div id="card_sample_1" class="card_sample"> 

                                <SfCard> 

                                    <CardImage Image="@card.ImageUrl" /> 

                                    <CardHeader Title="@card.Title" SubTitle="@card.SubTitle" /> 

                                    <CardContent Content="@card.Content" /> 

                                    <CardFooter> 

                                        <CardFooterContent> 

                                            <SfButton CssClass="e-btn e-outline e-primary" @onclick="@(e => NavigateToUrlAsync(@card.NavUrl))">Read More</SfButton> 

                                        </CardFooterContent> 

                                    </CardFooter> 

                                </SfCard> 

 

 . . . 

 . . . 

 . . . 

</div> 

 

Sample: https://www.syncfusion.com/downloads/support/forum/164268/ze/Cards_Blazor_App1495439975 

 

Please check the code snippet and the sample and let us know if it resolves your issue. 

 

Regards, 

Revanth 

[Mason Channer]

I had the same issue and was able to resolve it. However, now the properties column does not render correctly. This happens in the sample you provided too. There is a conflict between the default Blazor css and Syncfusion.

[Revanth Krishnan]

Hi Mason, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “The properties column does not render correctly. This happens in the sample you provided too. There is a conflict between the default Blazor CSS and Syncfusion.” 

 

We tried to reproduce the issue in the previously shared sample, but the properties section renders properly and we couldn’t reproduce the issue from our end. Please check the below video for reference, 

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ScreenCapture979894397 

 

As mentioned by you we suspect that the issue may have occurred due to styles overridden, so can you please share with us the issue reproducing sample project or modify the shared sample project.  These details will be helpful for us to validate and reproduce the issue from our end and assist you at the earliest. 

 

Regards, 

Revanth