Adding html select to dialog box causing unwanted css whitespace

Question

I am using a plugin called jquery impromptu to create dialog's on my web site. I've noticed that when you try and add a html select to the dialog it causes some unwanted whitespace around the border of the dialog.

None of the other html form controls that I've tried so far have the issue. It's only the html select.

There is something css related that I need to fix to resolve this but I can't figure it out. Can someone please help me with this.

var textAreaStr = '<div>' + 
       '<label>Note<textarea id="registerFlagNote" rows="7" cols="30">      </textarea></label><br/>'+
       '</div>';

var selectHtmlStr = '<div>' + 
      '<label>Close flag?<select id="registerFlagClosedOpenInd">' +
      '<option value="no" selected>No</option>'+
      '<option value="yes">Yes</option>'+
      '</select></label>'
      '</div>';  
// try text area by itself
//var htmlStr = textAreaStr + '<br/>';
// try select by itself
//var htmlStr = selectHtmlStr + '<br/>';
//try both
var htmlStr = textAreaStr + selectHtmlStr + '<br/>';

var statesdemo = {
 state0: {
  html:htmlStr,
  buttons: { Cancel: false, Next: true },
  focus: 1,
  submit:function(e,v,m,f){
   $.prompt.close();
  }
 }
};

$.prompt(statesdemo);

div.jqimessage div textarea,
div.jqimessage div select{
 display:block; 
}

/*div.jqi {
    padding: 0 !important;
}*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.1/jquery-impromptu.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-impromptu/6.2.1/jquery-impromptu.js"></script>

thanks

Answer 1

If you inspect element to the class .jqi

You would see this

div.jqi {
    width: 400px;
    max-width: 90%;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    position: absolute;
    background-color: #ffffff;
    font-size: 11px;
    text-align: left;
    border: solid 1px #eeeeee;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 7px;
}

Simply just remove padding:7px;