Theming Elemente innerhalb eines JQuery UI Dialog mit CSS ... wie?
Frage
Da die alte Version offenbar viel zu schwer war für die Menschen zu verstehen, hier ist das HTML, CSS und JavaScript kombiniert:
<!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>
Der Dialog funktioniert gut, aber die CSS nicht. Irgendwelche Ideen, warum?
Lösung
JQuery bewegt sich ein DIV des Dialogs in der DOM-Struktur und wickelt es in einigen anderen. Daher werden die CSS-Selektoren nicht funktionieren. das obige Beispiel unter Verwendung würde man so etwas zu tun hat:
div.ui-dialog div#test label {
display: block;
}
div.ui-dialog div#test input {
padding-left: 100px;
}
Andere Tipps
sollte die CSS arbeiten. Es könnte ein Problem mit, wie die CSS-Regeln Kaskade sein. Gibt es einen bestimmten Selektor diese Regeln wie „#dialog div # Prüfsiegel“ Anwendung? Ohne den Rest HTML / CSS ist es unmöglich, die Besonderheiten hinweisen. Holen Sie Firebug und sehen, was Regeln angewendet zu werden auf diese Elemente.