Archived

This topic is now archived and is closed to further replies.

  • 0

Button Dropdown Formatting

Question

Posted · Report post

I need some help figuring out how to format the button dropdown feature.  Here's the page for the site I'm working on:

 

http://be2.jasonmcvay.com/guide-to-books/

 

I would like the buttons in the REAL Lean Volumes 1-6 banner to look similar to the regular button used with the other banners.  I'm comfortable with searching making CSS customizations and using Chrome's developer tools, but I cannot find what I need to make the changes.  Specifically, I'd like no space between the buttons and the text and the two buttons on the same line.  It appears paragraph breaks are being added and I'm not sure why or how to remove them.  I'd then like to make the buttons the same size, but that's probably easier and I'll worry about that second.

 

Thanks for any help pointing me in the right direction.

Share this post


Link to post
Share on other sites

13 answers to this question

Posted · Report post

The space under the text is coming from a margin applied to the <p> tag.

 

 

#banners .banner-content p:first-child {
    margin-bottom: 0;
}

 

To add space between the buttons add a margin-right to the button css.

 

.btn-group .btn-mini.dropdown-toggle {
    margin-right: 10px;}
 

 

Share this post


Link to post
Share on other sites

Posted · Report post

I did assign the size to be mini and tried the large size as well.  I'm more concerned with them lining up correctly so the two buttons are next to each other and there isn't a space between the text as the button, like the other banners with single buttons.  I had read the instructions and believe my shortcode and html are the same are yours, Rob.  Here's what I have on my site:

 

Explains Lean management and Lean leadership in six topical categories. Buy this book if you want to learn the details of Lean management and Lean Leadership.
[pl_buttondropdown size="mini" type="default" label="More Info"]
<ul>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-1/">Volume 1</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-2/">Volume 2</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-3/">Volume 3</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-4/">Volume 4</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-5/">Volume 5</a></li>
<li><a href="http://be2.jasonmcvay.com/real-lean-volume-6/">Volume 6</a></li>
</ul>
[/pl_buttondropdown][pl_buttondropdown size="mini" type="warning" label="Buy Now"]
<ul>
<li><a href="http://www.amazon.com/Real-Lean-Understanding-Management-System/dp/0972259112/ref=la_B001JS76OU_1_3?ie=UTF8&amp;qid=1364185551&amp;sr=1-3">Volume 1</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Critical-Opportunities-Management/dp/0972259147/ref=la_B001JS76OU_1_5?ie=UTF8&amp;qid=1364185551&amp;sr=1-5">Volume 2</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Sustaining-Management-Three/dp/0972259163/ref=la_B001JS76OU_1_7?ie=UTF8&amp;qid=1364185551&amp;sr=1-7">Volume 3</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Learning-Craft-Management/dp/0972259171/ref=la_B001JS76OU_1_10?ie=UTF8&amp;qid=1364185551&amp;sr=1-10">Volume 4</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Strategies-Management-Success/dp/0972259198/ref=la_B001JS76OU_1_8?ie=UTF8&amp;qid=1364185551&amp;sr=1-8">Volume 5</a></li>
<li><a href="http://www.amazon.com/Real-Lean-Unsolved-Problems-Management/dp/0984540008/ref=la_B001JS76OU_1_6?ie=UTF8&amp;qid=1364185551&amp;sr=1-6">Volume 6</a></li>
</ul>
[/pl_buttondropdown]

Share this post


Link to post
Share on other sites

Posted · Report post

The mini size is bound to stack if there's no space between the two sets of code.

 

[/pl_buttondropdown][pl_buttondropdown size="mini" type="warning" label="Buy Now"]

 

This code will always stack the code.  But you can fix this by making each its own line.

[/pl_buttondropdown]

[pl_buttondropdown size="mini" type="warning" label="Buy Now"]

Share this post


Link to post
Share on other sites

Posted · Report post

Made the above change and it didn't help.  Also, I tried taking out the shortcode and using the source code instead.  I then tried moving the </p> tag from where it was automatically put in after the block of text to after the second button's closing </div> tag.  Didn't help.  For some reason <p> tags are added and I can't seem to remove them.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there,

 

The way i got this to work was to add float:left to each of the button classes.

 

 

[pl_buttondropdown size="mini" type="default" label="More Info" float="left"]
<ul>
 

 

 

Then add the following css to remove the clear fix so each button doesn't span the whole row.

 

.btn-group:after {
    clear: none;
}

That gave me this (ignore the email button, that's not part of the button group code) - http://screencast.com/t/ND4VvxBgwc

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, James.  It's getting very close.  I also made CSS changes to the button height, padding, and font size to make them look like the single buttons.  Here's what I have for CSS so far.

 

.btn-group:after {
    clear: none;
}
.btn-group .btn-mini.dropdown-toggle {
	padding-top: 5px;
	padding-bottom: 5px;
	font-size: 12px;
	padding-left: 9px;
	padding-right: 9px;
	height: 31px;
}

 

I'm still not sure how to get rid of the space above the buttons and below the text.  Also, I'd like a space between the buttons.  I can live with what I have so far, but if anyone knows how to make those last couple changes I'd appreciate the help.

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks, James!  The dropdown buttons now look the same as the others.

Share this post


Link to post
Share on other sites

Posted · Report post

You're welcome, glad that worked :-)

Share this post


Link to post
Share on other sites

Posted · Report post

It's odd that those buttons look different from the other ones. Have you tried deleting that banner and creating a new one (with the same content) to see if the problem persists?

Share this post


Link to post
Share on other sites

Posted · Report post

Just deleted the original and made a new one that's now at the top of the page and titled "Test Banner."  These are different button types with different shortcodes.

 

[pl_button] vs [pl_buttondropdown]

 

I'm not surprised they are different out of the box.  It's the alignment that's the biggest problem.  The html for the botton options seems to be the problem.  As I mentioned above, it adds paragraph breaks which I don't want.

Share this post


Link to post
Share on other sites

Posted · Report post

Did you paste the code in Visual mode or Text mode? That will make all the difference in the world.

Share this post


Link to post
Share on other sites

Posted · Report post

Text mode.  I tried it again using Text mode to make sure and had the same result (see Test Banner 2).

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, thanks for your prompt reply.

 

Did you assign a size to the [pl_buttondropdown] tag?

 

The instructions found here say there's specific sizes. 

 

[pl_buttondropdown size="large" type="info" label="button"]
<ul>
<li><a href="#">This</a></li>
<li><a href="#">That</a></li>
<li><a href="#">The Other</a></li>
</ul>
[/pl_buttondropdown]

I would imagine that without any specific code telling it the size it's supposed to render, the drop down will default to the mini size. Checking your site, the drop down you have is setting to mini.  Please try it with the Large option and see if that works.

 

Share this post


Link to post
Share on other sites