Ivy 2 • feature request

Elixir Stacks
1

Hi Adam,

Any chance you can add “Detailed Padding” to the Label area of Ivy 2? I’ve long used Ivy 2 for most projects that require an accordion, but for some pages where I have lots of them, I still use a different stack for aesthetic reasons. If I could decrease the padding above and below the text, I could ditch the older (non Elixir) stack.

Screenshot below shows Ivy 2 in the middle - it takes up far more vertical space than I would like it to.

Another great option would be to allow us to use any FA4 (or FA5) icon instead of the pre-determined ones.

Thanks for considering!

screenshot_5145
screenshot_5145872×542 71.5 KB

2

Hey there @Dave, and welcome to the community!

I’ll add this as something to look at as an update for Ivy. Shouldn’t be too hard. As for the icons – Stacks only support v4 of FontAwesome in the API, so FA 5 is not an option.

I’ll be blatantly honest though… I’m right in the dead middle of a huge Foundry update, so it might be a little while before I can get to this. Or if I have a frustrating day perhaps I can take a break and work on this.

6 Likes
3

Hey Adam,

Just wondering if you’ve had a chance to look at/consider this request. I’m getting ready to create a new website and would like to use Ivy 2, but with the non-customizable padding, I won’t be able to. Thanks!

4

Sorry @Dave, but I’m smack dab in the middle of a large Foundry update so I’ve not looked at it at all.

5

If you want to post a link to a page and explain where you’d like to make some padding changes, I could probably figure out some CSS that would do that.

6

Thanks, DLH- seems to me that this should be a welcome addition as one-size-fits-all doesn’t really fit in many situations. I use Ivy 2 on several Intranets, some of which are up to thirty items in length. Reducing the padding would make for much more compact accordions.

You can see a smaller accordion on this page: Columbia High Field & Open MRI, CT (Cat) Scan, Ultrasound & X-Ray Imaging Look for the five-item accordion in the right column.

7

As I mentioned previously I will take a look at it, I just don’t have the time to do so now. There’s only one of me, unfortunately. I’d like a few clones of me to write documentation, mow the grass, you know all of those things that are soul draining. But alas I don’t have any mini-mes. :wink:

That said, @DLH has kindly offered to help with some custom code to get you to where you want to be for your current project if you supply a link to your current project’s site. :smiley:

8

Sure - the project I would like to use Ivy 2 in is in an Intranet (therefore, behind a firewall). But, as mentioned above, another example can be seen on this page: Columbia High Field & Open MRI, CT (Cat) Scan, Ultrasound & X-Ray Imaging

9

I only offered as a stop gap until Adam gets time to add it to Ivy2.

Try this. Adjust px to your liking. You should be able to put it into the page or site-wide CSS area.

.com_elixir_stacks_ivy2_stack div.accordion_label {
  padding-top: 3px !important;
  padding-bottom:  3px !important;
}
.com_elixir_stacks_ivy2_stack span.accordion_icon {
  top: 1px !important;
}
2 Likes
10

Thanks, @DLH - that worked! However, I’m going to continue using the other accordion for now. While overriding the CSS is always an option, the other stack also offers the ability to set which accordion is open (#1, #2, #3, etc.). While there might not be many cases where this is important, in my case, it is. The site in question has main categories of Locations, Services, etc. with corresponding accordions in the sidebar. When a visitor is on a Locations page, it makes sense for them to see all of our locations. When the visitor is on a Services page, they are obviously interested in Services, not locations, so I want those to be visible. From a UX perspective, I won’t reorder the sidebar contents to accommodate the stack.