Home > Back-end >  Hide <hr> if div empty
Hide <hr> if div empty

Time:10-04

I have the following piece of code (jsp)

        ...
        <hr>
        <div class="actions">
            <div class="btn-toolbar">
                <c:if test="${condition1}">
                    <button type="button" class="btn" >
                        btn1
                    </button>
                </c:if>
                <c:if test="${condition2}">
                    <button type="button" class="btn">
                        btn2
                    </button>
                </c:if>
                <c:if test="${condition3}">
                    <button type="button" class="btn">
                        btn3
                    </button>
                </c:if>
            </div>
        </div>
        <hr> 
        ...

Depending on the conditions, div may be empty, and then we get a double hr-tag. Is there an elegant way to display first hr-tag only if div is not empty?

CodePudding user response:

Save c:if test results to variables?

<div class="actions">
    <div class="btn-toolbar">
        <c:if test="${condition1}" var="rt1">
            <button type="button" class="btn" >
                btn1
            </button>
        </c:if>
        <c:if test="${condition2}" var="rt2">
            <button type="button" class="btn">
                btn2
            </button>
        </c:if>
        <c:if test="${condition3}" var="rt3">
            <button type="button" class="btn">
                btn3
            </button>
        </c:if>
    </div>
</div>
<c:if test="${rt1 || rt2 || rt3}">
<hr> 
</c:if>

CodePudding user response:

use ::empty in css instead


as blow:

div.action{
  border-top:1px solid #cdcdcd;
  border-bottom:1px solid #cdcdcd
}
  div.action::empty{
  border-top:1px solid #cdcdcd
}

CodePudding user response:

I'm not too familiar with JSP but you could try wrapping one of the hr in a separate if condition like this:

<c:if test="${condition1 || condition2 || condition3}">
  <hr>
</c:if>
  • Related