Jump to content


Photo
- - - - -

Button Dropdown Formatting


Best Answer James B , 26 March 2013 - 02:16 AM

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;}
 

 

Go to the full post


  • Please log in to reply
13 replies to this topic

#1 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 25 March 2013 - 04:42 PM

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

 

Please Login or Register to see this Hidden Content

 

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.



#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 25 March 2013 - 07:18 PM

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?



#3 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 25 March 2013 - 09:19 PM

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.



#4 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 March 2013 - 10:23 PM

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



#5 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 25 March 2013 - 10:28 PM

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



#6 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 March 2013 - 11:12 PM

Okay, thanks for your prompt reply.

 

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

 

The instructions

Please Login or Register to see this Hidden Content

say there's specific sizes. 

 

Please Login or Register to see this Hidden Content

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.

 



#7 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 26 March 2013 - 12:12 AM

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:

 

Please Login or Register to see this Hidden Content



#8 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 26 March 2013 - 12:23 AM

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"]



#9 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 26 March 2013 - 12:49 AM

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.



#10 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 March 2013 - 01:40 AM

Hi there,

 

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

 

 

Please Login or Register to see this Hidden Content

 

 

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

 

Please Login or Register to see this Hidden Content

That gave me this (ignore the email button, that's not part of the button group code) -

Please Login or Register to see this Hidden Content



#11 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 26 March 2013 - 02:03 AM

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.

 

Please Login or Register to see this Hidden Content

 

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.



#12 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 March 2013 - 02:16 AM   Best Answer

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

 

 

Please Login or Register to see this Hidden Content

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

 

Please Login or Register to see this Hidden Content

 



#13 Jason M

Jason M

    Advanced Member

  • Members
  • 71 posts
  • Country: Country Flag

Posted 26 March 2013 - 02:38 AM

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



#14 James B

James B

    Advocate

  • Moderators
  • 4979 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 26 March 2013 - 02:39 AM

You're welcome, glad that worked :-)