✔ DIV größe wird im JQuery Dialog gar nicht beachtet

B

BlubBlub

Mitglied
HTML: 
	<body>
		<div id="myDialog" style="width:610px; height:300px; background-color:cyan;">
			testblock
		</div>
			
		<script type ="text/javascript">
			$(document).ready(function(){		
				$('#myDialog').dialog({
					title: 'Titel',
					position: ['right','top'],
					resizable: false,
					width: 910,
					height: 600
				});
			});
		</script>
	</body>

Hi kann mir jemand helfen und sagen wieso meine angegebene Div größe überhaupt nicht beachtet wird?
Im JQuery Dialog wird das komplette Fenster ausgefüllt, dabei müsste aber im JQuery Dialog nur ein Quadrat mit den Maßen width:610px; height:300px zu sehen sein.
 
Also dies funktioniert kann es sein das du nicht alle scripte eingebunden hast
HTML: 
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
</head>
<body style="font-size:62.5%;">
  
<body>
		<div id="myDialog" style="width:610px; height:300px; background-color:cyan;">
			testblock
		</div>
			
		<script type ="text/javascript">
			$(document).ready(function(){		
				$('#myDialog').dialog({
					title: 'Titel',
					position: ['right','top'],
					resizable: false,
					width: 50,
					height: 50
				});
			});
		</script>

</body>
</html>

gruß drawlix
 
HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
</head>
<body style="font-size:62.5%;">
  
<body>
		<div id="myDialog" style="width:610px; height:300px; background-color:cyan;">
			testblock
		</div>
			
		<script type ="text/javascript">
			$(document).ready(function(){		
				$('#myDialog').dialog({
					title: 'Titel',
					position: ['right','top'],
					resizable: false,
					width: 910,
					height: 600

				});
			});
		</script>

</body>
</html>

du hast in der dialog funktion die falschen widht und height werte eingegeben, wenn du meine nimmst width:910 und height:600 dann funktioniert das weiterhin nicht. das dialogfeld wird komplett gefüllt anstelle nur eines ausschnittes.
 
mhhh ich verstehe gerade nicht so die frage meinst du das nur width:610px; height:300px color:cyan beinhalten soll
und das überschüssige weiß
 
Hi,

versuch mal, die Dimensionen zusätzlich mit important auszuzeichnen:
Code: 
<div id="myDialog" style="width:610px !important; height:300px !important; background-color:cyan;">
Desweiteren möchte ich euch bitten, auf Gross- und Kleinschreibung zu achten - besten Dank im Voraus.

Ciao
Quaese
 
BlubBlub hat gesagt.:
. das dialogfeld wird komplett gefüllt anstelle nur eines ausschnittes.
Zum Vergrößern anklicken....
Nun ich verstehe das nun so.Nämlich das du einen Ausschnitt von einer Dimension mit den Maßen (width:610px height:300px) farbig haben willst dies ,aber bei einer Gesamtgröße von 910* 600 px . In diesem Fall würde ich ein würde ich ein zusätzliches div einfügen bit der Dimension die farbig werden soll
hoffe nun das es so von dir gemeint war :confused:

gruß
 
Quaese hat gesagt.:
versuch mal, die Dimensionen zusätzlich mit important auszuzeichnen:
Code: 
<div id="myDialog" style="width:610px !important; height:300px !important; background-color:cyan;">
Zum Vergrößern anklicken....


Also das mit dem Important hab ich auch bereits versucht mit dem Ergebnis, dass es im Internetexplorer keine Wirkung zeigt und im Firefox die Breite zwar richtig angezeigt wird die Höhe aber nicht. Die Höhe wird im Firefox, an die Höhe angepasst die im Dialog angegeben ist.

@Drawlix: Du hast richtig verstanden was ich meine. Aber gerade versteh ich deinen Lösungsvorschlag noch nicht ganz.
 
so meine ich das
HTML: 
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
</head>
<body style="font-size:62.5%;">
  
<body>
		<div id="myDialog">
		 <div id="myDialog2" style="width:100px; height:300px; background-color:cyan;">
			testblock
		</div>
		</div>
			
		<script type ="text/javascript">
			$(document).ready(function(){		
				$('#myDialog').dialog({
					title: 'Titel',
					position: ['right','top'],
					resizable: false,
					width: 910,
					height: 600

				});
			});
		</script>

</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück