locked
Angular CSS Styling Error with Icon and Content with custom Card Control RRS feed

  • Question

  • User956626884 posted

    <div class="votecell post-layout--left"> <div class="js-voting-container grid fd-column ai-stretch gs4 fc-black-200" data-post-id="57910467"> <div class="js-vote-count grid--cell fc-black-500 fs-title grid fd-column ai-center" itemprop="upvoteCount" data-value="1">1</div> <button class="js-vote-down-btn grid--cell s-btn s-btn__unset c-pointer" title="This question does not show any research effort; it is unclear or not useful" aria-pressed="false" aria-label="down vote" data-selected-classes="fc-theme-primary"></button> <div class="js-favorite-count mt8" data-value=""></div> </div> </div> <div class="postcell post-layout--right"> <div class="post-text" itemprop="text">

    I am learning how to read and move a custom control to my Angular Application by reading the F12 inspection tool. I am reading the styling from the custom control and add it the component css file.

    I went to a site that has a card control that has the icon of the left and the content to the right. The card control color is set. 

    I went to add the styling and added a sample html code to see how it looks on my app. However, it does not look anything like the ideal control.

    Here is what pic of what I am trying to acheive and what I have gotten so far. I am a newbie at this.

    Any help is greatly appreciated. Thanks

    https://imgur.com/a/WxsiDEt

    error

    I have the following CSS styling to my component

     <div class="card flex-row align-items-center align-items-stretch border-0">
        <div class="col-4 d-flex align-items-center bg-green-dark justify-content-center rounded-left">
                <i class="fa fa-fw fa-cog"></i>
        </div>
          <div class="col-8 py-3 bg-green rounded-right">
                <div class="h2 mt-0">500</div>
                <div class="text-uppercase">Reviews</div>
            </div>  
    </div>



    .card {
        margin-bottom: 1.25rem;
    }
    .card {
        border-color: transparent;
        box-shadow: 0 1px 1px rgba(0,0,0,.05);
    }
    .card {
        ;
        display: flex;
        flex-direction: column;
        min-width: 0;
        word-wrap: break-word;
        background-color: #fff;
        background-clip: border-box;
        border: 1px solid rgba(0,0,0,.125);
        border-radius: .25rem;
    }
    .align-items-center {
        align-items: center!important;
    }
    .align-items-stretch {
        align-items: stretch!important;
    }
    .border-0 {
        border: 0!important;
    }
    .bg-green-dark {
        background-color: #2b957a;
        color: #fff!important;
    }
    .justify-content-center {
        justify-content: center!important;
    }
    .d-flex {
        display: flex!important;
    }
    .rounded-left {
        border-top-left-radius: .25rem!important;
        border-bottom-left-radius: .25rem!important;
    }
    .col-4 {
        flex: 0 0 33.33333333%;
        max-width: 33.33333333%;
    }
    .col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
        ;
        width: 100%;
        padding-right: 15px;
        padding-left: 15px;
    }
    .pb-3, .py-3 {
        padding-bottom: 1rem!important;
    }
    .pt-3, .py-3 {
        padding-top: 1rem!important;
    }
    .rounded-right {
        border-top-right-radius: .25rem!important;
        border-bottom-right-radius: .25rem!important;
    }
    .col-8 {
        flex: 0 0 66.66666667%;
        max-width: 66.66666667%;
    }
    .fa-3x {
        font-size: 3em;
    }

    </div> </div>

    Thursday, September 12, 2019 4:42 PM

All replies

  • User61956409 posted

    Hi comicrage,

    I am learning how to read and move a custom control to my Angular Application by reading the F12 inspection tool. I am reading the styling from the custom control and add it the component css file.

    I went to add the styling and added a sample html code to see how it looks on my app. However, it does not look anything like the ideal control.

    It seems that you'd like to convert displaying effect using Font Awesome Web Application Icons of a custom control to a component for using it in Angular application.

    According to the screenshot you shared, you may need something like fa-comments comments icon, not fa-cog configure icon.

    https://fontawesome.com/v4.7.0/icon/comments

    Please try to modify flex-direction property to row, which would make the flexible items are displayed horizontally.

    flex-direction: row;
    <div class="card flex-row align-items-center align-items-stretch border-0">
        <div class="col-4 d-flex align-items-center bg-green-dark justify-content-center rounded-left">
            <i class="fa fa-comments" style="font-size:36px"></i>
        </div>
        <div class="col-8 py-3 bg-green rounded-right">
            <div class="h2 mt-0">500</div>
            <div class="text-uppercase">Reviews</div>
        </div>
    </div>

    With Regards,

    Fei Han

    Friday, September 13, 2019 3:22 AM