Menu icon Foundation
How to right-align a button...?

Is there a way to do this using inky?

By default buttons appear to be left justified.

If you put a button in a

<center>...</center>

 tag pair, then the button is centered.

But I cannot find a way to get the button to be right aligned (other than by creating an 11:1 column split and putting in the right-most column... but this seems very crude solution)

centeringinky

Is there a way to do this using inky?

By default buttons appear to be left justified.

If you put a button in a

<center>...</center>

 tag pair, then the button is centered.

But I cannot find a way to get the button to be right aligned (other than by creating an 11:1 column split and putting in the right-most column... but this seems very crude solution)

Corey Schaaf over 3 years ago

You could try something like this. However, you will need to test this to make sure their are no unintended consequences. 

Inky Markup. Notice the class called "set-right-justified". What I'm doing here targeting the table the button is nested inside of and changing it to be "text-align:right" instead of "text-align:left;  "

After that, I add a class to the button called "align-right".  This class sets the table to "display:inline;" instead of "display:table;" that way the "text-align:right;" class works. 

<!-- Header -->
<container>
  <row>
    <columns small="6" large="6">
      <p>
        My Left Column Content
      </p>
    </columns>
    <columns small="6" large="6" class="set-right-justified">
      <button href="#" class="small">Small Button</button>
    </columns>
  </row>
</container>

SASS

.set-right-justified{
  text-align:right;
  .button{
    display:inline;
  }
}

Let me know if this works for you. 

Gavin Lawrie over 3 years ago

Hi Corey

Thanks for the suggestion - but doesn't appear to work.  I'm not sure if there is something missing from your explanation - but I am guessing you meant to say to add "set-right-justified" to the button class not "align-right".

Also - do buttons in inky automatically get the class 'button'?  (implied by your suggestion, but not sure about this).

Anyhow - thanks anyhow for the idea.  Helpful.

Corey Schaaf over 3 years ago

I updated the code snippet above. The example above does works but that may have been the reason it wasn't working for you. What I do when I'm trying to override something is look at the inlined styles in chrome or firefox.  I play with the CSS styles and figure out where I need to add a class to override the default behavior.  If you look at the docs you'll notice in the buttons section the ink mark up but you can easily jump over to the HTML markup that INKY produces. This is how I'm able to determine where to put class structure and how to override certain behaviors. 

In regards to your question about the class="buttons" ... inky does add the class to the Table the button sits inside of. That's what I was targeting for the "display:inline;"

Docs for Buttons: 

http://foundation.zurb.com/emails/docs/button.html

Gavin Lawrie over 3 years ago

Hi Corey

Weird - it still doesn't work here.  Here is what I get:

Test application of code

I'm using the vanilla Foundation for Email 2.1 install - and the default template.

But thanks for the great information / advice.  

I've been following the (limited) documentation for Email 2.1 closely (and noticed that there is none for the `<menu>` tag).

The idea of looking at the HTML rather than the INKY code is not lost on me - I've been trying to debug this using regular developer / inspector mode - and it is helpful to see what is going on - but it is not at all clear how to target particular constructs via CSS when the constructs are automatically generated (and may change).  The INKY classes appear to be scattered somewhat through the HTML code - part of the challenge is digging through all the recursively generated tables it creates to work out what it is trying to do.

Which is a bit of a blow - we already have serviceable hand-coded HTML templates that are just as complicated.  The hope with INKY is that we can create / modify these email designs more easily.  Partly this is true (though I wonder a bit about the efficiency of the INKY code generator - it does seem to generate a lot of code...) - but I guess it is early days yet.  Maybe as Foundation for Email evolves it will get better / more capable.  Right now not being able to right justify a button seems like a fairly major gap in capabilities.

Anyhow - I'll keep at it and see if I can get some work-around to go.

Cheers

Gavin

Corey Schaaf over 3 years ago

 

Gavin, I think I know why the code wasn't working for you. In my project I have some overrides happening to some of the Foundation for Emails styles in the project I was working in. I started with a clean project and setup the following styles along with the SASS below. If this doesn't work for you, I'm at a loss. Sorry for all the confusion. Note that if you wanted to try and center the button on small devices, you would need to setup a media query as the class "small-float-center" would not work as setting the table to Display:inline breaks that functionality. 

.set-right-justified{
  text-align:right;
  table{
  	display:inline;
    text-align:right;
  }
}

 

<container>
<row>
    <columns small="6" large="6">
      <p>
        My Left Column Content
      </p>
    </columns>
    <columns small="6" large="6" class="set-right-justified">
      <button href="#" class="small">Small Button</button>
    </columns>
</row>
</container>

Stefan Korn about 3 years ago

Hi Corey, very helpful and this works for me, but Outlook 2013 (what a surprise its Outlook ;-) ) seems to just ignore it and still shows the button left aligned.

Fiddling with the inline code I found that changing a text-align:left to text:align-right will make it work in Outlook too. Not sure how to do this from within the template.

There is one th-Tag like this:

<th style="Margin:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:left">

which comes after the th-Tag which has the class

set-right-justified

If I change text-align there from left to right, it will also work in Outlook.

<th style="Margin:0;color:#505050;font-family:Helvetica,Arial,sans-serif;font-size:14px;font-weight:400;line-height:1.3;margin:0;padding:0;text-align:right">