Topic: Floating Button & Rotate in a Card Group
Hi teamMDB -
Is is possible add to a card group:
1) a floating button like the 'Elegant Card'
and/or
2) the ability to rotate the card
thanx
Jonathan
Add comment
Speaking as a participant of the community and a paying customer as well...
To be clear, your initial request was simply asking if it was possible which Bart very accurately stated it is.
Thanks Bart and all the moderators for being a moderator and the help you provide all of us and thanks MDB for providing a framework that makes my life so much easier than having to stitch together all this on my own.
I would feel a lot better sharing this if you truly felt like this was a community for help rather than a community of your minions but in the spirit of a community here you go.
<div class="container">
<div class="container">
<section class="section">
<h3 class="h3-responsive text-xs-center animated fadeInUp">Here is your code...you are welcome!</h3>
</section>
</div>
<!--Cards-->
<div class="card-group">
<!--Rotating card 1-->
<div class="card-wrapper col-md-4">
<div id="card-1" class="card 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>
<!--Triggering button-->
<a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-1"><i class="fa fa-chevron-right"></i></a>
<!--Content-->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
</div>
</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="btn-floating rotate-btn deep-purple" data-card="card-1"><i class="fa fa-chevron-left"></i></a>
</div>
<!--/.Back Side-->
</div>
</div>
<!--/.Rotating card 1-->
<!--Rotating card 2-->
<div class="card-wrapper col-md-4">
<div id="card-2" class="card 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>
<!--Triggering button-->
<a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-2"><i class="fa fa-chevron-right"></i></a>
<!--Content-->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
</div>
</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="btn-floating rotate-btn deep-purple" data-card="card-2"><i class="fa fa-chevron-left"></i></a>
</div>
<!--/.Back Side-->
</div>
</div>
<!--/.Rotating card 2-->
<!--Rotating card 3-->
<div class="card-wrapper col-md-4">
<div id="card-3" class="card 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>
<!--Triggering button-->
<a class="btn-floating btn-action rotate-btn deep-purple" data-card="card-3"><i class="fa fa-chevron-right"></i></a>
<!--Content-->
<div class="card-block">
<h4>Jonathan Doe</h4>
<p>Web developer</p>
</div>
</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="btn-floating rotate-btn deep-purple" data-card="card-3"><i class="fa fa-chevron-left"></i></a>
</div>
<!--/.Back Side-->
</div>
</div>
<!--/.Rotating card 3-->
</div>
</div>
Bart / Acates -
As previously stated, I tried w/o success to a) add the code provided for 'Rotating Card' - which produced formatting errors and b) added the Floating Button from the 'Elegant Card' with the class dark-purple-btn - which displayed in the correct place, but as a dark-grey-btn.
www.fitrepreneur.me
The image you provided me above does not overcome the challenges I am facing.
What would be very helpful and support achieving my goal is if your would:
ideally, modify the code on www.fitrepreneur.me to help me achieve the deisred effect
or
minimally, send me the code that produced the image provided above.
extensively, the above would a) end this long thread on the subject here and b) allow us to close this issue within a week of its opening.
thank you
JM
Fitrepreneur,
"Elegant does have the floating button that hovers over both the image and content, but you cannot change the color in the div / class."False. Apply the appropriate class to the button. (See screenshot below)
"Based on info provide by Bart I continue to believe that MDB does not support the integration of Rotating Card with Card Group."False. See screenshot below with a card group, different button colors, and one card rotated. https://drive.google.com/file/d/0BwoxlC4H5BZyU1g5dm84c1c0Wm8/view?usp=sharing So it's entirely possible to have rotating cards in a card group as Bart said.
Acates -
Thank you for the support, it is good to know there is a community of people to help each other here.
Unfortunately, you example did not place the button at the desired place and did not have the rotate effect.
You did lead me to finding the information below:
_________
Elegant does have the floating button that hovers over both the image and content, but you cannot change the color in the div / class.
Based on info provide by Bart I continue to believe that MDB does not support the integration of Rotating Card with Card Group.
I am hoping to reach a clear definitive answer within a week.
Is this what you're looking for?
https://drive.google.com/file/d/0BwoxlC4H5BZySlpINzZ6NzVpYXM/view?usp=sharing
Bart -
Initially I interpreted your response 'Yes, it is possible' to lie somewhere in between too busy or lazy to provide a details response to being a smart ass...
PS - I inserted three rotating cards into a card group - which did not work.
I now take the combo of 'Yes, it is possible' and 'You can just add Elegant Card to card group' to mean that the version of MDB I use only supports Elegant cards, but someone the requisite skills could implement the request.
Do I not understand correctly?
Bart -
I am going to refrain from the string of obscenities that are in my head...
I am going to remind you that I am one of the few paying customers you have, and
It took you 48 hours to respond the my request when I was promised 24 hours, and
That this is a support group.
In case you are not aware, your response was not very supportive.
I will assume that this is a language barrier and rephrase the question...
Please tell me how I:
1) add floating button like the ‘Elegant Card’
and
2) the ability to rotate the card
to a card group.
I anxiously await your response.
THANK YOU!
JM
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Tags