Éléments de thème dans une boîte de dialogue Jquery UI avec CSS & # 8230; Comment?
Question
Puisque l'ancienne version était apparemment trop difficile à comprendre, voici le code HTML, CSS et JavaScript combiné:
<!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>
La boîte de dialogue fonctionne bien, mais pas la CSS. Des idées pourquoi?
La solution
JQuery déplace la DIV d'une boîte de dialogue dans l'arborescence DOM et l'encapsule dans certaines autres. Par conséquent, les sélecteurs CSS ne fonctionneront pas. En utilisant l'exemple ci-dessus, vous devriez faire quelque chose comme ceci:
div.ui-dialog div#test label {
display: block;
}
div.ui-dialog div#test input {
padding-left: 100px;
}
Autres conseils
Le css devrait fonctionner. Il pourrait être un problème avec la façon dont les règles css en cascade. Existe-t-il un sélecteur plus spécifique appliquant ces règles, tel que "#dialog div # test label"? Sans le reste de html / css, il est impossible de préciser les détails. Obtenez firebug et voyez quelles règles sont appliquées à ces éléments.