CODEWITHSUNDEEP
javascripthtmlcss
Burak ULU
Burak ULU

Reputation: 303

Unlimited horizontal div scroll - React/CSS

I have really less CSS experience so I'm new beginner on this path and I have a row div and some cards on it. But I want that row to be able to be scrolled horizontally when cards are added. Here's how it looks like;

enter image description here

When the cards added, they are automatically put below one another but I need them to be side by side. Here's the code snippet;

<div class="row">
    <div class="col-sm-6">
        <div class="box box-transparent">
            <div class="box-body">
                <h5 class="text-primary">IF: Add one or more conditions.</h5><br>
                <div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 21</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&lt;= 45</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
                <div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property4</span>
                            <p>== 45</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
                <div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property4</span>
                            <p>== 38</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 89</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&lt; 56</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- react-empty: 150 -->
    <div class="col-sm-1" style="border-width: 3px; border-left-style: solid; border-left-color: rgb(51, 51, 51); margin-bottom: -57px; margin-top: -14px;"></div>
    <div class="col-sm-5">
        <div class="box box-transparent">
            <div class="box-body">
                <h5 class="text-primary">THEN: Add or select one or more actions.</h5><br>
                <div class="card bg-color-success" style="height: 170px; width: 300px; border-color: green; background-color: white; border-width: 4px;">
                    <div class="card-content" style="color: black;"><span class="card-title">New Action</span>
                        <p>Click to edit</p>
                    </div>
                    <div class="card-action"><a href="javascript:;" style="color: black;">AND</a><a style="color: gray;">EDIT</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Views: 554

Answers (1)

HyeonJunOh
HyeonJunOh

Reputation: 764

cause there is no CSS properties, I can not know what the problem is exactly. But maybe below css properties will help you.

.card-container{
  white-space: nowrap;
  overflow-y: auto;
}
.card-container .card{
  display: inline-block;
  border: 1px solid #aaa;
  padding: 15px;
}
<div class="row">
    <div class="col-sm-6">
        <div class="box box-transparent">
            <div class="box-body">
                <h5 class="text-primary">IF: Add one or more conditions.</h5><br>
                <div class="card-container">
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 21</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 21</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&gt; 21</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                    <div class="card bg-color-primary" style="height: 170px; width: 300px; border-color: rgb(30, 144, 255); background-color: white; border-width: 4px;">
                        <div class="card-content" style="color: black;"><span class="card-title">property</span>
                            <p>&lt;= 45</p>
                        </div>
                        <div class="card-action"><a href="javascript:;" style="color: red;">OR</a><a href="javascript:;" style="color: black;">AND</a><a style="color: gray; cursor: pointer;">EDIT</a></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

First, You should wrap all cards using one <div></div> (In fact, tag name isn't important.). In other words, each card has same parent.

Second, To be able to put each card horizontally, change card's display style block to inline-block.

Third, To prevent line breaking, add CSS property to parentwhite-space: nowrap, which is well explained here

Finally, add overflow-x: auto to parent that makes it scrollable.

I hope it helps. :)

Upvotes: 1

Related Questions