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 about 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 about 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 about 3 years ago

i can confirm the button issue.

 

didn't find a fix until now

Siavoush about 3 years ago

Could you tell me how you fixed it ?

Marcel Jahn about 3 years ago

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

Philipp almost 3 years ago

Any update regarding the button expanded issue?

 

(I can also confirm the background bug)

Simon Olsen almost 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 11 months ago

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

RonPaul 11 months 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 11 months 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 .