Moving the accordion chevron to the left side

Questions
1

I have a series of accordions on one page (usually 9 but sometimes 10 of them). Each according can have any number of cards.

On the accordion I want to show how many cards are in that accordion. Right now I have a nifty little ‘count’ box with a number in it. On the old platform (JQM) this box was on the right side and the chevron was on the left.

So, my questions are:

  1. Is there an easy way to display the chevron on the left? I’ve found .no-chevron but I don’t see a .left-chevron
  2. I have tried adapting my ‘count’ box to display on the left (which I can easily do) but the title overlaps/overwrites the counter so if I go this route, what adjustment do I need to make to get the item-title to scoot to the right?

As an FYI my counter class is:

.item-count {
  position: absolute;
  font-size: 12.5px;
  font-weight: bold;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: white;
  padding: .25em .25em;
  line-height: 1.6em;
  min-height: 1.6em;
  min-width: .64em;
  color: white;
  padding-left: calc(var(--f7-list-chevron-icon-area) + var(--f7-safe-area-right));
}

And the html looks like this:

            <li class="accordion-item">
                <a href="" class="item-link item-content">
                    <div class="item-inner">
                        <span id="jazz_count" class="item-count">0</span>
                        <div class="item-title">Jazz</div>
                    </div>
                </a>
                ...
2

You can check the List View there many options. https://framework7.io/docs/list-view.html#examples

With Media List you can put the numbers in the right https://framework7.io/docs/list-view.html#media-list

Or use Item After to show the number next to the chevron
<div class="item-after"> <span class="badge">5</span></div>

There are a lot of options.

3

Fernando, thanks for the reply.

I had already been through the list-view options and none of them work for us. The item-after is close but the designers had already said no to that because it made the UI too confusing (and I tend to agree). Best for us would be the chevron on the left followed by the accordion title and the count of items on the right as that’s what our users are currently used to but we’re not opposed to swapping the chevron and count.

Any other tricks up your sleeve?

P.

4

What we ended up doing was to edit the framework.bundle.css down around line # 8617 and added the following:

.accordion-item .item-title {padding-left:40px;}

This moved the title over enough to allow us to insert the counter. Looks nice, works nice.

1 Like