Topic: Help with making card-text scrollable

Jenmud pro asked 6 years ago


Hi There, I have some rotating cards with lots of text on the back. The problem that I am having is that the text is exceeding the length of the card. I am not sure how to get the card to either expand the length of the card to the length of the text, or how to make the text scrollable and remain in the original card length. Can anybody please help me with getting the text to remain in the card. I would really like to have it scrollable if possible because I do not want the card becoming too long. Your assistance is appreciated Jenda.

allancmello pro commented 4 years ago

testando o site

Michal Szymanski staff answered 6 years ago


Hi Jenmud, could you tell me what exactly would you like to improve on mobile? I'll try to find a solution.

Jenmud pro answered 6 years ago


Hi Michal, Thanks for responding, I really appreciate it. Your example worked perfectly, but I have noticed that the scrolling on the mobile does not work all that great. Do you know how I could make the scrolling on the phone more obvious and work better with a touch screen? If you not sure, that is ok because the original thread was about scrolling, and you solution worked. Thanks Jenda.

Michal Szymanski staff answered 6 years ago


Hi, do you mean something like that?
<style>
        .scroll-box {
            overflow-y: scroll;
            height: 100px;
            padding: 1rem
        }
</style>
        <div class="col-md-5">

            <!--Rotating card-->
            <div class="card-wrapper">
                <div id="card-1" class="card-rotating effect__click">

                    <!--Front Side-->
                    <div class="face front">

                        <!-- Image-->
                        <div class="card-up">
                            <img src="http://mdbootstrap.com/images/reg/reg%20(35).jpg" class="img-fluid">
                        </div>
                        <!--Avatar-->
                        <div class="avatar"><img src="http://mdbootstrap.com/wp-content/uploads/2015/10/team-avatar-2.jpg" class="img-circle img-responsive">
                        </div>
                        <!--Content-->
                        <div class="scroll-box">
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
                        </div>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>

                    </div>
                    <!--/.Front Side-->

                    <!--Back Side-->
                    <div class="face back">

                        <!--Content-->
                        <h4>About me</h4>
                        <hr>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
                        <hr>
                        <!--Social Icons-->
                        <ul class="inline-ul">
                            <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                            <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                            <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                            <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
                        </ul>
                        <!--Triggering button-->
                        <a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>

                    </div>
                    <!--/.Back Side-->

                </div>
            </div>
            <!--/.Rotating card-->

        </div>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No