Menu icon Foundation
Expanded button not working in Outlook

Hi, 

I am practising using the new foundation for emails 2 and having troubles with Outlook. I am using the new inky template and have created two buttons as columns, both with the class of expanded, however on Outlook the explanded class does not work, here is my code, and image.

https://ol2013.capture.litmuscdn.com/cdfbf1cc-5914-45eb-ad6f-093883c6e542/results/ol2013-vertical-allowed-1366.png

 

<container>
	<row>
	<columns small="12" large="6">
		<button href="zurb.com" class="expanded">example text 1</button>
	</columns>
	<columns small="12" large="6">
		<button href="zurb.com" class="expanded">example text 2</button>
	</columns>
	</row>
</container>

emailinkycssclass

Hi, 

I am practising using the new foundation for emails 2 and having troubles with Outlook. I am using the new inky template and have created two buttons as columns, both with the class of expanded, however on Outlook the explanded class does not work, here is my code, and image.

https://ol2013.capture.litmuscdn.com/cdfbf1cc-5914-45eb-ad6f-093883c6e542/results/ol2013-vertical-allowed-1366.png

 

<container>
	<row>
	<columns small="12" large="6">
		<button href="zurb.com" class="expanded">example text 1</button>
	</columns>
	<columns small="12" large="6">
		<button href="zurb.com" class="expanded">example text 2</button>
	</columns>
	</row>
</container>
Rafi Benkual over 3 years ago

Looks like the image didn't load. What version are you on? There was a fix for v2.0.1 with the expanded buttons. Updating might be the ticket.

Siavoush over 3 years ago

I have foundation CLI version 2.1.0.

another thing that was strange was that putting a background color on the container doesn't render

I also have attached the image, 

 

Marcel Jahn over 3 years ago

i can confirm the button issue.

 

didn't find a fix until now

Siavoush over 3 years ago

Could you tell me how you fixed it ?

Marcel Jahn over 3 years ago

"didn't find a fix until now" :)

Philipp about 3 years ago

Any update regarding the button expanded issue?

 

(I can also confirm the background bug)

Simon Olsen about 3 years ago

I nabbed a little CSS snippet from the Github issues threads.

Add the below code to your app.scss or your .css file.

.button.expanded {
  td:not(.expander) {
    width: 100%;
  }
}

I had this issue with my buttons in multiple Outlook versions, and the above snippet fixed it.

If you're using the .expand class instead of .expanded, just change the first line from .button.expanded to .button.expand

Hope this helps.

 

Allie Fleming over 1 year ago

Hallelujah for your bug fix! Was starting to pull my hair out. Thank you!!

RonPaul over 1 year ago

This issue came for just for few days but now this option of Expanded button not working in Outlook has resolved now you can check this just login and again check. I do job at Double Glazing services Harrow providing company and use outlook account for official work. When I read you question then check this button and  that time this button is was working that’s why telling you please check again this button.

 

windows 10 audio crackling over 1 year ago

The expanded button if it is not working then this need to find out the issue or the problem what is happening to the user where it would be the possibilities for the user to get on track to find out the best for the outlook or you just windows 10 audio crackling will support you with your answer or rectify your mistakes .