Picture of Mark D'Aquin
Accordion - Image placement
by Mark D'Aquin - Wednesday, 17 August 2016, 6:46 PM
 

Hi,

I am trying to place an image in the accordion component right or left justified with the text on the opposite side. I saw where you set in the component.json file "_classes": "image-left" or right but nothing seems to happen. I also noticed in the src/accordion.less file.

.accordion-item-graphic {
  padding: @item-padding-top 0 0;

  img {
  vertical-align: bottom;
  }
}

I tried working with this but not luck. I thought maybe I could use a float: left; but that removed the image from the inner div.

Anyone?

 

 
Reply
Picture of Justin P
Re: Accordion - Image placement
by Justin P - Tuesday, 18 April 2017, 5:43 PM
 

Hi Mark,

Did you figure out how to float an image to the left of the text?

 

 

 
Show parent | Reply
Picture of Chris Gillison
Re: Accordion - Image placement
by Chris Gillison - Sunday, 7 May 2017, 11:59 AM
 

Hi Justin (& Mark, but that was a long time ago)

My understanding of floats is that the image div needs to appear BEFORE the text div in the parent div, so you'd need to change the accordion.hbs file so the accordion-item-text div sits below the image (so basically move that entire div below the last {{/if}}).

Next assign a class to your accordion item e.g. accordion-image-right

Then, adding the following custom CSS seems to work...

  1. .accordion-image-right .accordion-item-body-inner {overflow: auto;}
  2. .accordion-image-right .accordion-item-text {float: left; width: 40%;}
  3. .accordion-image-right .accordion-item-graphic {float:right; width: 50%;}

You'd probably want to clear those floats for small screen sizes (760px or lower)

Chris

 
Show parent | Reply