Section Item Detail: Mouvements Compte Externe

Use the .sds-sectionItem__aboveClickArea class on items in columns that need to be interacted with. This lets them "float" over the js-sectionItem__toggle trigger element that covers the entirety of the section item.

<div class="sds-box sds-sectionItem__detail">
    <div class="sds-sectionItem__detailInner">
        <div class="sds-sectionItem__innerCol -date">
            <div class="sds-sectionItem__textMeta sds-textHelper">
                {DD.MM.YYYY}
            </div>
        </div>
        <div class="sds-sectionItem__innerCol -dot">
            <div class="sds-sectionItem__dotWrapper">

                <span class="sds-iconCircle -product -shopping" aria-hidden="true">

                    <span class="sds-icon sds-icon-shoppingbag"></span>

                </span>

            </div>
        </div>

        <div class="sds-sectionItem__innerCol -justifyEnd -grow">
            <div class="sds-btnGroup sds-sectionItem__aboveClickArea">
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Imprimer">

                    <span class="sds-icon sds-icon-printer"></span>

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Exclure de l’analyse">

                    <span class="sds-icon sds-icon-hidden"></span>

                </button>
                <button type="button" class="sds-btn -iconBtn -btnSecondary" data-toggle="tooltip" data-placement="top" data-title="Signer">

                    <span class="sds-icon sds-icon-compose"></span>

                </button>
            </div>
        </div>

        <button class="sds-sectionItem__toggle js-sectionItem__detailToggle" type="button">
            <span class="sr-only">Close detail</span>
        </button>
    </div>
    <div class="sds-sectionItem__detailContent">

        <div class="h3">Domiciliation relevé Post Telecom Test 1</div>

        <table class="sds-infoTable table">
            <tbody>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                {Label}

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-amount -negative -amountXl">
                                <span class="sds-amount__value">{- #.###,##}</span>

                                <span class="sds-amount__currency">€</span>

                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                {Label}

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                {item}
                            </div>

                        </div>
                    </td>
                </tr>

                <tr>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div class="sds-label">
                                {Label}

                            </div>

                        </div>
                    </td>
                    <td class="">
                        <div class="sds-infoTable__cellContent">

                            <div>
                                {item}
                            </div>

                        </div>
                    </td>
                </tr>

            </tbody>
        </table>

    </div>
</div>
 
<div class="{{ namespace }}box {{ namespace }}sectionItem__detail">
	<div class="{{ namespace }}sectionItem__detailInner">
		<div class="{{ namespace }}sectionItem__innerCol -date">
			<div class="{{ namespace }}sectionItem__textMeta {{ namespace }}textHelper">
				{DD.MM.YYYY}
			</div>
		</div>
		<div class="{{ namespace }}sectionItem__innerCol -dot">
			<div class="{{ namespace }}sectionItem__dotWrapper">
				{% if noCategory %}
					{% render "@circle--default" %}
				{% else %}
					{% render "@icon-circle-mia"+product %}
				{% endif %}
			</div>
		</div>
		{% if noActions %}
			{% else %}
			<div class="{{ namespace }}sectionItem__innerCol -justifyEnd -grow">
				<div class="{{ namespace }}btnGroup {{ namespace }}sectionItem__aboveClickArea">
					{% render "@icon-btn-secondary",{
						icon: "icon-printer",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Imprimer"
						}
					},true %}
					{% render "@icon-btn-secondary",{
						icon: "icon-hidden",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Exclure de l’analyse"
						}
					},true %}
					{% render "@icon-btn-secondary",{
						icon: "icon-compose",
						attrs: {
							"data-toggle": "tooltip",
							"data-placement": "top",
							"data-title": "Signer"
						}
					},true %}
				</div>
			</div>
		{% endif %}
		<button class="{{ namespace }}sectionItem__toggle js-sectionItem__detailToggle" type="button" {% for attrKey, attr in detailToggleOptions %} {{ attrKey }}="{{ attr }}"{% endfor %}>
			<span class="sr-only">Close detail</span>
		</button>
	</div>
	<div class="{{ namespace }}sectionItem__detailContent">
		{% if loading %}
			{% for i in range(0,4) %}
				{% render "@skeleton-unit" %}
			{% endfor %}
			{% else %}
			<div class="h3">{{ communication }}</div>
			{% render "@snet-info-table",infoTableOptions,true %}
		{% endif %}
	</div>
</div>