Html Question posted in
Some basic documentation can be found here.

Retain white spaces in Dropdown in HTML

We have the below dropdown and it populates manually from the user Input.
now if the user is giving multiple spaces in between the words,i can see the spaces are getting ommited.
`

I tried the below CSS also but still not working

<html:select styleId="Id" property="Id" size="1"
                                 styleClass="preserve-space" value="${Form.Id}">
                        <html:option value="">Select a value </html:option>
                        <html:options collection="resultlist" property="id" labelProperty="name"/>
                    </html:select>

<style>
    .preserve-space {    white-space: pre;    font-family: monospace;  /* Helps maintain consistent spacing */  }   /* For better browser compatibility */
    .preserve-space option {    white-space: pre;    -moz-white-space: pre;  /* Firefox */    -webkit-white-space: pre;  /* Chrome/Safari */  }
</style>
Tags:

2

Answers


  1. 0

    HTML collapses multiple spaces by default, maybe you can replace them with a special space character as &nbsp;

    You can also use the white-space: pre: style.It works to preserve spaces in text content.

    <html:select styleId="Id" property="Id" size="1"
             styleClass="preserve-space" value="${Form.Id}">
    <html:option value="">Select a value</html:option>
    <html:options collection="resultlist" property="id" labelProperty="name"/>
</html:select>

<style>
    .preserve-space {
        white-space: pre;
        font-family: monospace; /* Helps maintain consistent spacing */
    }
</style>

<script>
    window.onload = function() {
        const select = document.getElementById("Id");
        for (let i = 0; i < select.options.length; i++) {
            select.options[i].text = select.options[i].text.replace(/ /g, 'u00A0');
        }
    };
</script>

    This should solve the limitations of applying CSS styles to option tag inside a select.

    Login or Signup to reply.
  2. 0

    Use &nbsp; instead of spaces:

    <html:select styleId="Id" property="Id" size="1"
        styleClass="preserve-space" value="${Form.Id}">
    <html:option value="">Select a value </html:option>
    <c:forEach items="${resultlist}" var="item">
        <html:option value="${item.id}"><c:out value='${item.name.replace(" ","&nbsp;")}'/></html:option>
    </c:forEach>
</html:select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search