Base solution for your next web application
Open Closed

UI styles not showing as per docs/tutorial #11106


User avatar
0
Pablo created

Prerequisites

Please answer the following questions before submitting an issue. YOU MAY DELETE THE PREREQUISITES SECTION.

  • What is your product version? API: v11.2.0 | Client: v11.2.0 [20220610]
  • What is your product type (Angular or MVC)? Angular
  • What is product framework type (.net framework or .net core)? .net core

If issue is about UI

  • Which theme are you using? Default, Metronic 8
  • What are the theme settings? No custom settings applied

Hello, I am very new to the Asp.net Zero framework and I'm currently going through the tutorials (video on Udemy and from the docs) to get my head around things.

I followed both the docs and the instructions from the video, which by the way seem to be outdated, making it a bit hard to follow along as the code used in each version seems to be different.

I got to the point where I can render the list in Angular View as per this document: https://docs.aspnetzero.com/en/aspnet-core-angular/latest/Developing-Step-By-Step-Angular-Using-GetPeople-Method-from-Angular

However, my list does not have any styles applied to it - it shows only a grey background with the text rendered on top. I can't see the white card or the list styles. I noticed that the classes used in the video tutorial are different to the ones in the docs.

I would appreciate your help with this.

Also, as said, I'm very new using this framework, and I couldn't see any docs on what is used for grid, styling and UI components. Eg. is it Bootstrap? Or Angular Components? I would like to be consistent with the styles already used in other Components but can't figure it out.

Thanks in advance for your assistance :)


3 Answer(s)
  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Pablo

    Do you mean the video tutorial on Udemy ? If so, please don't follow that document because it is outdated as you stated.

    On Angular app, for table, we are using https://www.primefaces.org/primeng/table. For several bootstrap based components, we are using https://valor-software.com/ngx-bootstrap/#/

    We tried to keep the step by step doc as simple as possible and because of that didn't include a complex Table sample to this document.

  • User Avatar
    0
    Pablo created

    Hi Ismail, Thanks for your resposne.

    Yes, I was refering to the video tutorial on Udemy. This tutorial is featured at the begining of the docs: https://docs.aspnetzero.com/en/aspnet-core-angular/latest

    However, the code I've used is same as from the written documents. I'm still having issues displaying the correct css styles. I noticed you use classes containing "kt" as for example: "kt-content kt-grid__item kt-grid__item--fluid kt-grid kt-grid--hor". This classes don't seem to be working on my app.

    Could you please let me know what library this KT classe are linked to?

    Thanks in advance for your response.

    PS. I've attached an screenshot of the issue.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @Pablo,

    Thanks, we will remove this link from the related document. It seems like, we forgot to remove it. For your page, you can use an HTML like this;

    <div [@routerTransition]>
        <div class="content d-flex flex-column flex-column-fluid">
            <sub-header [title]="'Roles' | localize" [description]="'RolesHeaderInfo' | localize">
                <div role="actions">
                   <!-- ACTION BUTTONS HERE -->
                </div>
            </sub-header>
    
            <div [class]="containerClass">
                <div class="card card-custom">
                    <div class="card-body">
                        <!-- PAGE CONTENT HERE -->
                    </div>
                </div>
            </div>
        </div>
    </div>