Question

我正在使用一个名为jquery impromptu的插件在我的网站上创建对话框。我注意到当你尝试在对话框中添加一个html选择时，它会在对话框的边框周围产生一些不需要的空白。

到目前为止，我尝试过的其他html表单控件都没有问题。它只是html选择。

我需要解决一些与css相关的问题才能解决这个问题，但我无法弄明白。有人可以帮我解决这个问题。

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>

感谢

Answer 1

如果您检查班级.jqi

的元素

你会看到这个

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;
}

只需删除padding:7px;

即可

添加html选择对话框导致不需要的css空白

1 个答案: