Mam duże problemy ze znalezieniem konkretnych informacji i przykładów na ten temat. Mam wiele okien dialogowych interfejsu użytkownika jQuery w mojej aplikacji dołączonych do elementów div, które są ładowane przez wywołania .ajax (). Wszyscy używają tego samego wywołania konfiguracyjnego:
$(".mydialog").dialog({
autoOpen: false,
resizable: false,
modal: true
});
Chcę tylko, aby okno dialogowe zmieniło rozmiar do szerokości ładowanej treści. W tej chwili szerokość pozostaje na poziomie 300 pikseli (wartość domyślna) i otrzymuję poziomy pasek przewijania.
O ile wiem, „autoResize” nie jest już opcją w oknach dialogowych i nic się nie dzieje, gdy ją określę.
Staram się nie pisać osobnej funkcji dla każdego okna dialogowego, więc tak .dialog("option", "width", "500")
naprawdę nie jest to opcja, ponieważ każde okno dialogowe będzie miało inną szerokość.
Określenie width: 'auto'
opcji dialogowych powoduje, że zajmują one 100% szerokości okna przeglądarki.
Jakie mam możliwości? Używam jQuery 1.4.1 z interfejsem jQuery UI 1.8rc1. Wygląda na to, że to powinno być naprawdę łatwe.
EDYCJA: zaimplementowałem niezdarne obejście tego problemu, ale wciąż szukam lepszego rozwiązania.
{'width':'auto'}
nie działa w IE7 i nie zostanie naprawione, ponieważ{'width':'auto'}
opcja nie jest obsługiwana przez jQuery-UI według scott.gonzalez: "Okna dialogowe nie obsługują automatycznej szerokości. Dokumenty stwierdzają, że opcja akceptuje tylko liczbę, która będzie używana dla rozmiaru w pikselach. W wątku jquery-ui-dev znajdziesz dyskusję o tym, dlaczego nie obsługujemy automatycznej szerokości ”.Miałem ten sam problem i dzięki wspomnieniu, że prawdziwy problem był związany z CSS, znalazłem problem:
Mając
position:relative
zamiastposition:absolute
w swojej.ui-dialog
regule CSS sprawia, że dialog iwidth:'auto'
dziwnie zachowywać.źródło
Oto jak to zrobiłem:
Responsywne okno dialogowe jQuery UI (i poprawka błędu maxWidth)
Naprawianie błędu maxWidth & width: auto.
źródło
Wyobrażam sobie, że ustawienie float: pozostawione dla okna dialogowego zadziała. Przypuszczalnie okno dialogowe jest pozycjonowane absolutnie przez wtyczkę, w którym to przypadku jego pozycja zostanie określona przez to, ale efekt uboczny pływaka - tworzenie elementów tak szerokich, jak muszą być do przechowywania treści - będzie nadal obowiązywał.
To powinno zadziałać, jeśli po prostu ustawisz taką regułę, jak
w swoim arkuszu stylów, chociaż może być konieczne ustawienie go za pomocą jQuery
źródło
Miałem ten sam problem, gdy zaktualizowałem interfejs jquery do 1.8.1 bez aktualizacji odpowiedniego motywu. Potrzebne jest tylko do uaktualnienia motywu i "auto" znowu działa.
źródło
Z jakiegoś powodu ciągle mam ten problem z pełną szerokością strony w IE7, więc zrobiłem ten hack:
źródło
Możesz uniknąć problemu ze 100% szerokością, określając maksymalną szerokość. Ta
maxWidth
opcja wydaje się nie działać; więcmax-width
zamiast tego ustaw właściwość CSS w widżecie okna dialogowego.Jeśli chcesz również ograniczyć maksymalną wysokość, użyj
maxHeight
opcji. W razie potrzeby poprawnie wyświetli pasek przewijania.źródło
Miałem podobny problem.
Ustawianie
width
się"auto"
działało w porządku dla mnie, ale gdy okno zawierały dużo tekstu to sprawiło, że obejmują całą szerokość strony, ignorującmaxWidth
ustawienie.Ustawienie
maxWidth
nacreate
działa jednak dobrze:źródło
Ja też miałem ten problem.
Mam to działające z tym:
źródło
Wystarczy, że dodasz:
źródło
Mam ten sam problem i pozycja: absolutna w twoim .ui-dialog {} css nie wystarczyła. Zauważyłem, że pozycja: względna jest ustawiana na bezpośrednim stylu elementu, więc definicja css .ui-dialog była nadpisywana. Pozycja ustawienia: absolutna na div zamierzałem zrobić dialog statyczny również nie działała.
W końcu zmieniłem dwa umieszczone w moim lokalnym jQuery, aby to działało.
Zmieniłem następujący wiersz w jQuery na:
pod adresem https://github.com/jquery/jquery/blob/1.8.0/src/offset.js#L62
Ponadto, ponieważ moje okno dialogowe było ustawione na przeciąganie, musiałem również zmienić tę linię w jQuery-ui na:
pod adresem https://github.com/jquery/jquery-ui/blob/1-8-stable/ui/jquery.ui.draggable.js#L48
Być może dokładniejsze przejrzenie stylu, który mam, naprawiłoby rzeczy, ale pomyślałem, że podzielę się tym, jak to działa.
źródło
Jeśli chcesz, aby działał w IE7, nie możesz użyć opcji nieudokumentowanej, błędnej i nieobsługiwanej
{'width':'auto'}
. Zamiast tego dodaj do swojego.dialog()
:To, czy
.scrollWidth
zawiera wypełnienie po prawej stronie, zależy od przeglądarki (Firefox różni się od Chrome), więc możesz dodać subiektywną „wystarczająco dobrą” liczbę pikseli do.scrollWidth
lub zastąpić ją własną funkcją obliczania szerokości.Możesz chcieć uwzględnić
width: 0
wśród swoich.dialog()
opcji, ponieważ ta metoda nigdy nie zmniejszy szerokości, a jedynie ją zwiększy.Przetestowano do pracy w IE7, IE8, IE9, IE10, IE11, Firefox 30, Chrome 35 i Opera 22.
źródło
edytuj poniżej:
źródło