Remove line breaks inside JSTL

Question

I have modified <input type="submit"> to look like a hyperlink.

CSS:

input[type="submit"].searchitem {
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
    padding: 0px;
}

input[type="submit"].searchitem:hover {
    text-decoration: underline;
}

JSTL:

<c:forEach var="searchItem" items="${searchResults}">
    <form action="view-schedule.jsp" method="post">
        <input type="hidden" name="movieid" value="${searchItem.movieId}" />
        <input type="submit" value="${searchItem.movieTitle}" class="searchitem" />
    </form>
</c:forEach>

Firefox Inspector:

<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="4" name="movieid"></input>
    <input class="searchitem" type="submit" value="INSURGENT"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="2" name="movieid"></input>
    <input class="searchitem" type="submit" value="INTERSTELLAR"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="9" name="movieid"></input>
    <input class="searchitem" type="submit" value="MINIONS"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="6" name="movieid"></input>
    <input class="searchitem" type="submit" value="MOCKINGJAY: PART I"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="3" name="movieid"></input>
    <input class="searchitem" type="submit" value="PENGUINS OF MADAGASCAR"></input>

</form>
<form method="post" action="view-schedule.jsp">

    <input type="hidden" value="8" name="movieid"></input>
    <input class="searchitem" type="submit" value="WHITE BIRD IN A BLIZZARD"></input>

</form>

Output:

enter image description here

But it's displaying a blank space between the search results. I don't think I have a <br /> anywhere.

(It was working okay with scriptlet for-each, but I am trying to convert to JSTL).

Is that line break due to `hidden` element ? Did u `inspect` it ? — OO7, Nov 21 '14 at 06:22
@OO7 Hi, I added the Firefox Inspector to the post, there does not seem to be a `
` as well. — k_rollo, Nov 21 '14 at 06:31
Yeah, but why there is blank line before & after `` element ? Did u check for the same in other browsers ? — OO7, Nov 21 '14 at 06:33
I don't think the blank lines there are the culprit. HTML is not WYSIWYG after all. — k_rollo, Nov 21 '14 at 06:41
Is there any CSS property which sets `line-height` like property ? I m not sure but, u can check is this happens due to CSS ? — OO7, Nov 21 '14 at 06:49
Hi, let me check my CSS for that property and I will report back. Same behavior in Chrome btw. — k_rollo, Nov 21 '14 at 06:52
@OO7 No `line-height` property present in any of my CSS. I searched for `height`, but it's for an unrelated class. Also, it only alters height by `2px`, which is too small for that gap, so that's why I don't think it's the `height` property as well. — k_rollo, Nov 21 '14 at 06:59
U *didn't gave any style for form* that's why it has some **style applied** from **User Agent** on `form` HTML element. See my answer & try sample HTML I gave. Inspect it in Crome or see `computed` style in Firefox inspector. — OO7, Nov 21 '14 at 07:20

score 1 · Answer 1 · answered Nov 21 '14 at 07:07

1

just add this to your CSS

 form {
    margin-bottom: 0;
 }

answered Nov 21 '14 at 07:07

Diego López

1,559
1
19
27

score 1 · Accepted Answer · answered Nov 21 '14 at 07:13

As there is no style applicable to form, it has margin-bottom from user agent stylesheet like

form {
    margin-bottom: 1em;
}

replace this with below for good look

form {
    margin-bottom: 5px;
}

Try this

<html>
    <head>
    <title>Test Line Break</title>
    <style>
        form{
            margin-bottom:5px;
        }
        input[type="submit"].searchitem {
            background: none;
            border: none;
            color: blue;
            cursor: pointer;
            padding: 0px;
        }

        input[type="submit"].searchitem:hover {
            text-decoration: underline;
        }
    </style>
    </head>
    <body>
        <form method="post" action="view-schedule.jsp">

            <input type="hidden" value="2" name="movieid"></input>
            <input class="searchitem" type="submit" value="INTERSTELLAR"></input>

        </form>
        <form method="post" action="view-schedule.jsp">

            <input type="hidden" value="2" name="movieid"></input>
            <input class="searchitem" type="submit" value="INTERSTELLAR"></input>

        </form>
    </body>
</html>

That's why u get breaks in button.

I added `form { margin-bottom: 0px; }` and it worked. I have now also read about [user agent styleshhet](http://stackoverflow.com/questions/12582624/what-is-user-agent-stylesheet), thanks for the explanation. Upvoted and marked as accepted answer. — k_rollo, Nov 21 '14 at 07:29

Remove line breaks inside JSTL

2 Answers2