1

I'm using ngbootstrap and angular, but I think the problem here is more of html/css matter. I want to make a container to scroll horizonstally, I've found few threads about it, but cannot make it work in my case... Here's my code html:

        <div style="width: 100%; background-color: rgb(177, 177, 177);">
            <div class="container" >
                <div class="my-container">
                    <h1>Usługi</h1>
                    <p>Nasza firma posiada uprawnienia UDT w zakresie montażu i konserwacji urządzeń dźwigowych, w tym:</p>
                    <div class="col-12 horizonstall-scroll" style="margin-left: auto; margin-right: auto; padding: 0;">
                        <div class="row">
                            <div class="card-container d-flex justify-content-center" *ngFor="let item of items">
                                <div class="card my-card" style="width: 18rem;">
                                    <img class="card-img-top" src="{{item.smallImg}}" alt="lift">
                                    <div class="card-body">
                                        <h5 class="card-title">{{item.name}}</h5>
                                        <p class="card-text">{{item.shortDesc}}</p>
                                        <a class="btn btn-primary" (click)="openModal(item)" >Czytaj więcej</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

css:


.my-container {
    padding-left: 15px;
    padding-right: 15px;
    background-color: rgb(216, 209, 209);
    box-shadow: 0px 10px 25px 13px rgba(0,0,0,0.75);
}

.horizonstall-scroll > .row  {
    overflow-x: auto;
    white-space: nowrap;
}

.horizonstall-scroll > .row > .card-container {
    display: inline-block;
    float: none;
}
reznov46
  • 26
  • 3

1 Answers1

0

Hi maybe this might help because I have had this problem before and I fixed it using this solution and its using bootstrap which is better in your case

Horizontal scrollable div's in a bootstrap row

hope this solution helps your needs, Cheers :)

Arsham
  • 141
  • 1
  • 9
  • I was first using white-space and it didn't work, and I was certain I've tried using flex, but then it appeared that I hadn't used flex. Anyway flex was the answer, thanks! – reznov46 Mar 30 '20 at 15:15