How do I prevent it from newlining in html?


Tags: html,css,inline

Problem :

I have the following code in html, which creates this:

enter image description here

<input type="checkbox" id="cb5" class="listDropDown" onchange="selectPopulationChanged()" display="inline" value="complex ab. karyotype">
<label for="cb5" class="listDropDown" display="inline">complex ab. karyotype</label>

Int his example, because of the spaces in "complex ab. karyotype", it decides to move all the text from the label tag below the checkmark.

How can I prevent it from doing so. My pop-up on the picture consists of code I posted, which is used several times to create a list. The only different between this particular element compared with the others (except for the length) is the spaces. I have tested by including an elemtn that is very long without spaces, and it doesn't throw it on a new line.

Any help is greatly appreciated!

EDIT - ADDED the following

HTML:

<div class="dropdown" style="display:inline">
    <button data-toggle="dropdown" class="btn btn-success" type="button" id="pops" >Select Populations</button>
    <ul id="popupDropDown" class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    </ul>
</div>

CSS:

.dropdown-menu:before {
  position: absolute;
  top: -7px;
  left: 9px;
  display: inline-block;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ccc;
  border-left: 7px solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.2);
  content: '';
}

.dropdown-menu:after {
  position: absolute;
  top: -6px;
  left: 10px;
  display: inline-block;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #ffffff;
  border-left: 6px solid transparent;
  content: '';
}

jQuery:

function addCheckboxes() {
    $("#popupDropDown").empty();
    for(i=0; i<arrayValues.length; i++)
    {
        var container = $('#popupDropDown');
        var inputs = container.find('input');
        var id = inputs.length+1;
        $('<input />', { type: 'checkbox', 'id': 'cb'+id, 'class': 'listDropDown', 'onChange': 'selectPopulationChanged()', 'display':'inline', value: arrayValues[i] }).appendTo(container);
        $('<label />', { 'for': 'cb'+id, 'class': 'listDropDown', 'display':'inline', text: arrayValues[i] }).appendTo(container);
        $('</br>').appendTo(container);
        $('#cb'+id).prop('checked', true);
    }
}


Solution :

Try this code in your for loop (replace all existing contents of said loop):

var container = document.getElementById('popupDropDown');
var label = document.createElement('label');
label.className = "listDropDown";

var input = document.createElement('input');
input.type = "checkbox";
input.className = "listDropDown";
input.onchange = selectPopulationChanged;
input.value = arrayValues[i];

label.appendChild(input);
label.appendChild(document.createTextNode(arrayValues[i]));

container.appendChild(label);

This will put the checkbox inside the <label>, as I mentioned in my comment, and with that done you should be able to use white-space:nowrap on your label elements to prevent the line wrapping. Also, add display:block to the labels to avoid the need for <br /> tags.

Vanilla JS may take more writing, but personally I find this much easier to read than your very large jQuery generation stuff.


    CSS Howto..

    how to float the section tags in html5

    How can I force Internet Explorer to apply CSS styles

    How do I correctly position elements and lay out a page?

    CSS Grow on hover adds padding to the bottom of an image, how do I stop this from happening?

    How to hide class=“” CSS

    Using two buttons on one div, how do you fade in slowly then fade out?

    javafx ImageView how to use css hover

    How to apply transition on div movement when upper disappears?

    How do I get JavaScript to clear the previous onclick element when a user moves on to the next click?

    How do I make footer take 100% of the width of the webpage?

    CSS: How do I keep the text from wreaking havoc on the layout?

    How to get span to be only as wide as the image inside of it?

    How to apply styles to a group of Labels in javafx without css

    How to create tooltip with one element in CSS

    How to make a bootstrap modal fade in from the bottom?

    How to hide old styled version of select option? [duplicate]

    How to create marquee infinite loop of logos slider with css only

    diagonal lines as background for css - how to switch angle

    How to create a pure CSS tooltip with HTML content for inline elements

    How to add focus on label css style

    How to position nav element center under parent div?

    How to make a scroll customization for mobile application?

    How to display items side by side until window width then in next row

    How can I programatically show/hide a button that is part of the body template in Meteor?

    Large gap between text, how to fix?

    JSP/HTML / JS / CSS - How to create a cancel button in form

    How to make sticky navigation change colour when scrolling past a certain div?

    How to define CSS styles if Javascript is turned off? [duplicate]

    HTML CSS, how to create a Side bar or column

    How to add and use jquery and css file in joomla module..?