CSSを使用したJquery UIダイアログ内のテーマ要素…どうやって?
質問
古いバージョンは明らかに理解し難いため、ここではHTML、CSS、およびJavaScriptを組み合わせました。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>test title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#test').dialog({ autoOpen: false, modal: true });
$("#test-link").click( function() {
$('#test').dialog('open');
});
});
</script>
<style type="text/css">
div#main div#test label {
display: block;
}
div#main div#test input {
padding-left: 100px;
}
</style>
</head>
<body>
<div id="main">
<p><a href="#" id="test-link">test</a><p>
<div id="test" title="Submit Bug or Feature Request">
<form>
<label for="test_desc">Short Description:</label>
<input type="text" name="test_desc" id="test_desc" value="" />
<input type="submit" name="" value="Submit" />
</form>
</div>
</div>
</body>
</html>
ダイアログは正常に動作しますが、CSSは動作しません。何かアイデアはありますか?
解決
JQueryは、ダイアログのDIVをDOMツリー内で移動し、他のいくつかにラップします。したがって、CSSセレクターは機能しません。上記の例を使用すると、次のような操作を行う必要があります。
div.ui-dialog div#test label {
display: block;
}
div.ui-dialog div#test input {
padding-left: 100px;
}
他のヒント
cssは動作するはずです。 CSSルールのカスケード方法に問題がある可能性があります。 &quot; #dialog div#test label&quot;のようなこれらのルールを適用するより具体的なセレクターはありますか? html / cssの残りがなければ、詳細を指摘することは不可能です。 firebugを取得し、それらの要素に適用されるルールを確認してください。
所属していません StackOverflow