Problem z wymiarami i pozycjonowaniem jQuery ui dialog

0

Witam.
Chciałbym się przywitać z wszystkimi na forum. Forum 4programmers.pl przeglądam od dawna. Dzisiaj sytuacja zmusiła mnie do rejestracji tutaj. Mam nadzieje, że moja wiedza będzie tutaj pomocna, jak również będzie wzbogacona o nowe elementy.

A teraz przechodzę do problemu.

Mam stronę internetową. Korzystam na niej z komponentów jQuery ui. Stworzyłem sobie pole dialogowe "dialog". Pole to jest automatycznie tworzone po załadowaniu się dokumentu:

$( "#kontrahent" ).dialog({maxHeight: 500, maxWidth: 500, autoOpen: false });

Pole przy starcie ma być niewidoczne. W trakcie pracy na dokumencie jest wywołanie sprawdzające pozycję jednego
z elementów, odczytanie jego pozycji i na tej podstawie wstawienie tych współrzędnych do:

var offset = pozycja.offset();

$('#kontrahent').dialog({ position: [offset.left+2,offset.top+24], resizable: false})
$('#kontrahent').dialog('open');

#kontrahent jest divem.

Pole dialogowe ma ustawioną szerokość i wysokość na 500px. Przy uruchomieniu pola dialogowego z zawartością nieprzekraczającą
tych wartości wszystko jest w porządku. Problem zaczyna się z dużymi zawartościami, wykraczającymi poza obrys strony www. Przy załadowaniu długiej tabeli, długość okna dialogowego nie jest ograniczona do 500px lecz ma długość taką, jaką narzuca tabela. Dodatkowo wtedy przestaje działać pozycjonowanie okna dialogowego). Okno jest przyciskane do samej góry okna przeglądarki.

  1. Jak sprawić, aby wymiary okna dialogowego nigdy nie przekroczyły np. tych założonych 500px na 500px. Chciałbym, aby w oknie dialogowym były scrolle?
  2. Jak sprawić, aby z góry przypisana pozycja okna dialogowego nigdy nie uległa zmianie zaś np w przypadku dużej zawartości okna, wykraczającego poza ramki do okna stron internetowej były dokładane ramki? Bo w tym momencie wydaje się, jakby to granice stron www powodowały "spychanie" pola dialogowego na inną pozycje.
0

strzelam:
css: #kontrahent { overflow: auto; }
generalnie firebug/podobne i szukaj który element potrzebuje overflow: auto w Twoim okienku.

0

Niestety to nie to. Próbowałem już z overflow: auto jak i overflow: scroll i nic.

0

Niekoniecznie chce mi (i pewnie innym) ściągać jQuery + UI, potem przygotowywać na szybko jakiś HTML+CSS i kombinować z fragmentami JS.
Pokaż stronę online, albo jak nie chcesz/nie możesz pokazywać, to ogołoć ją z wszystkich elementów oprócz tego, czego dotyczy problem, wypełnij losowymi danymi - i podaj linka. Ciężko to zbadać nie mając tego przed oczami, a z tego co wygooglowałem, to domyślnie scrollbary powinny się pokazywać.

0

Witam ponownie

Stworzyłem przykład ukazujący problem.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="style/style.css" />
<Link rel=stylesheet href="style/jquery-ui-1.8.23.custom.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" language="javascript" src="scripts/jquery-latest.js"></script>
<script type="text/javascript" language="javascript" src="scripts/jquery-ui-1.8.23.custom.min.js"></script>
<title>Testowa strona</title>
<script>
$(function() {
				$( "#dgkontrahent" ).dialog({Height: 500, Width: 500, autoOpen: false});
		
			});		
	
</script>
</head>
<body>
<div class="page">



<div class="dgkontrahent" id="dgkontrahent">
<table>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
.
.
.
.
.
.
.
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
<tr><td> jeden </td><td> dwa </td><td> trzy </td><td> cztery </td></tr>
</table>
</div>
</div>
<script>$('#dgkontrahent').dialog({ 
		Height: 500, 
		Width: 500,
		
		position: [100,100], 
		resizable: false,
		scroll: true,
		modal: false		
		
		})
		$('#dgkontrahent').dialog('open');
</script>

</body>

</html>

css:


body {
        background-image: url(../images/background.png);
        margin: 0;
        background-repeat: repeat;
        font-family: Verdana, Arial;
        color: #000000;
        }	

div.dgkontrahent{
        width: 500px;
        height: 500px;
        overflow: scroll;
        }

Byłbym bardzo wdzięczny, jakby ktoś wskazał mi, jak odpowiednio wypozycjonować pole dialogowe w oknie. Do momentu, gdy tabelka jest mała, to
okno otwiera się na współrzędnej 100 i 100. Lecz gdy tylko pole jest większe od samej stron (np 50 wierszy tabeli) to jest ono dociskane do samej góry strony.

Overflow: scroll działa przy wyłączonej wtyczce jquery ui. Wtedy div z tabelką ma założone wymiary i ma scrolle po obu stronach (góra dół).

Przeglądałem dokumentacje jQuery ui i znalazłem:

http://api.jqueryui.com/position/#option-my

Tam, jest opis pozostałych własności .position(). Mamy opcje my:, at:, of: collision. Jak poprawnie złożyć konfiguracje okna dialogowego?
Będę bardzo wdzięczny za wszelką pomoc.

1 użytkowników online, w tym zalogowanych: 0, gości: 1