CODEWITHSUNDEEP
javascriptjquerycsstwitter-bootstrap-3
user3033194
user3033194

Reputation: 1831

Text appearing outside Bootstrap 3 well

I am dynamically creating a Bootstrap well in which some entered text should be displayed using JavaScript and CSS/HTML. My code is given below:

$("#addqueuebutton").click(function(){

    var queue = '<div class="well queue-well">';
    queue += '<a href="#"><span class="glyphicon glyphicon-plus"></a></span>';
    queue += '<div class="inline"><h3>&nbsp ' + $('#queuename').val() + '</h3></div>';
    queue += '</div>';
    $('#queues').append(queue);
});

My CSS:

.queue-well{
    height: 30px;
}

My problem is, the text I am entering ($('#queuename').val()) is appearing outside the well. I want it be present inside the well. I tried using clearfix in the div class='well' line, but it didn't work. Does anyone know how I could fix this? Thanks in advance!

Upvotes: 0

Views: 300

Answers (2)

Ajey
Ajey

Reputation: 8212

Demo Here

Steps -

Remove height: 30px; and add 

.queue-well .inline {
  display: inline-block;
}

Upvotes: 0

alan0xd7
alan0xd7

Reputation: 1851

The problem is caused by your css height: 30px; as it restricts the well size, so it cannot expand to the size of its contents.

If you simply remove this style then it will work correctly.

Demo: https://jsfiddle.net/alan0xd7/cgzpe9yw/6/

Upvotes: 1

Related Questions