CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-ui
Alexander Farber
Alexander Farber

Reputation: 22988

How to stretch div and input elements inside of jQuery dialog?

I have prepared a simple jsFiddle for my question:

screenshot

As you can see in the screenshot above there is a yellow div element representing chat area and underneath it there is text input for entering chat messages.

Please help me with my problem -

How to "stretch" the chatDiv and chatInput elements, so that they occupy maximal amount of space in the dialog?

As you can see in the screenshot, there is currently lot of padding around those elements, especially around the text input element (because I don't know, how adjust its width besides setting the size attribute).

Obviously I am looking for a most portable solution, working for any (or most) browsers and font sizes.

Here is my code -

function sendChat() {
  var str = $('#chatInput').val().trim();
  $('#chatDiv').append('<br>' + str);
  $('#chatInput').val('');

  var h = $('#chatDiv').prop('scrollHeight');
  $('#chatDiv').animate({ scrollTop: h }, 1000);
  $('#chatInput').focus();
}

$('#chatInput').on('keyup input', function(e) {
  if (e.keyCode == 13) {
    sendChat();
  }
});

$('#chatDlg').dialog({
  minWidth: 500,
  modal: true,
  buttons: {
    'Send': function() {
      sendChat();
    },
    'Close': function() {
      //$(this).dialog('close');
    }
  }
});
@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css");
div#chatDiv {
  margin: 0 auto;
  background-color: yellow;
  height: 120px;
  overflow: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="chatDlg">
  <div id="chatDiv"></div>
  <p align="center">
    <input id="chatInput" type="text" size="20" />
  </p>
</div>

Here is my would-like-to-have image:

screenshot 2

Upvotes: 0

Views: 418

Answers (2)

Jesse Kernaghan
Jesse Kernaghan

Reputation: 4634

A simple cross-browser way to achieve this is to use some absolute positioning inside of the dialogue box while making sure that the #chatDiv content doesn't go behind the input. This is done by setting a padding bottom that is equal to the height of the input: 

#chatDlg {
  position: relative;
  height: 500px;
  border: solid 1px grey;
}
#chatDiv,
#chatInput {
  box-sizing: border-box;
  position: absolute;
  width: 100%;
}
#chatDiv {
  height: 100%;
  background: yellow;
  padding-bottom: 30px;/* height of the chat input */
}
#chatInput {
  bottom: 0;
  left: 0;
  height: 30px;
  line-height: 30px;
}
<div id="chatDlg">
  <div id="chatDiv"></div>
  <input id="chatInput" type="text" />
</div>

If cross-browser wasn't as much of an issue I'd say that this would be an ideal use-case for a flexbox column, which would remove the need to manually offset the height of the input.

Upvotes: 1

Sam Battat
Sam Battat

Reputation: 5745

You can add a class attribute to the elements that need to be 100% width Then define the CSS for that class:

.fullwidth {
  width: 100%;
}

DEMO: https://jsfiddle.net/cmgk0d83/6/

Upvotes: 1

Related Questions