MozillaPL.org - polskie centrum Mozilli

Główne menu:

jak zmniejszyć wysokość textboxa?

Projektowanie aplikacji i rozszerzeń opartych na technologiach Mozilla Foundation: XUL, JavaScript, XPCOM, XBL i innych

Moderator: Pomocy?!

jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 01 lutego 2010, 23:43

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

próbuję napisać własne rozszerzenie i mam problem z textboxem którego umieszczam na pasku narzędzi. nie potrafię zmniejszyć mu wysokości do rozmiaru pasku adresu. on w ogóle jest jakiś strasznie wysoki i przez to zwiększa wysokość całego paska.

na screenie po lewo mój textbox a po prawo pasek wyszukiwania:
Obrazek

kod textboxa:
Kod: Zaznacz cały
    <toolbarpalette id="BrowserToolbarPalette">
            <toolbaritem id="asdaswedf">
               <textbox id="szukajfraza" type="autocomplete" rows="1" onkeypress="if(event.keyCode == 13) {szukaj()}"/>
               <button id="szukaj-button" class="toolbarbutton-1 chromeclass-toolbar-additional" oncommand="szukaj();"/>
            </toolbaritem>
    </toolbarpalette>


css:
Kod: Zaznacz cały
#szukajfraza {
    -moz-appearance: none;
    margin: 0 0px 1px 2px;
    border: 1px solid;
    -moz-border-radius: 5px;  /* Matched to the a11y outline impl */
    -moz-border-top-colors: #96969D;
    -moz-border-right-colors: #96969D;
    -moz-border-bottom-colors: #96969D;
    -moz-border-left-colors: #96969D;
    padding: 0px;
    background: -moz-field;
    font: icon;
    font-size: 11px;
    direction: ltr;
    height: 15px !important;
}
#szukajfraza > .autocomplete-textbox-container > .autocomplete-icon {
    list-style-image: url("chrome://wyszukiwarka/skin/search.png");
}
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: dexter » 02 lutego 2010, 09:13

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.3a1pre) Gecko/20100128 Minefield/3.7a1pre

Próbowałeś height:100% !important; ?
dexter
Moderator
 
Posty: 8319
Z nami od: 02 października 2004, 21:30

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Grzegorz » 02 lutego 2010, 09:48

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6

Kod: Zaznacz cały
#szukajfraza {max-hight: .... !important;}

Przy czym, tworząc rozszerzenie nie używaj takich ogólnych nazw. Lepiej zmień ID szukajfraza na coś, co zawierać będzie nazwę przyszłego rozszerzenia, np. Superbar-searchword. Może się zdarzyć, że użytkownik będzie posiadał dwa rozszerzenia z takimi samymi elementami, przez co będą wzajemnie niekompatybilne.
GnuPG. Podpisuję własne wypowiedzi. | TrueCrypt. Ufam kryptografii, nie państwu. | Tor. Dbam o swoją prywatność. | OTR. Moje rozmowy nie są podsłuchiwane.

Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
Grzegorz
Moderator
 
Posty: 7486
Z nami od: 15 kwietnia 2007, 12:33

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 02 lutego 2010, 22:55

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

max-height pomogło. dzięki.
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: teo » 03 lutego 2010, 11:06

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.8pre) Gecko/20100108 Shiretoko/3.5.8pre

To jest półśrodek, bo standardową wysokość paska rozwala przycisk z lupką. Zmień rozmiar obrazka dla tego przycisku na 14x14 px i wszystko powinno być OK.
Obrazek
teo
Moderator
 
Posty: 2409
Z nami od: 16 czerwca 2004, 09:15

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Grzegorz » 03 lutego 2010, 11:20

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.2) Gecko/20100115 Firefox/3.6

Strzelam, że można by też zastosować ujemny padding lub marginesy i pozostawić ikonę 16x16 (ale to tylko strzał).
GnuPG. Podpisuję własne wypowiedzi. | TrueCrypt. Ufam kryptografii, nie państwu. | Tor. Dbam o swoją prywatność. | OTR. Moje rozmowy nie są podsłuchiwane.

Załóż konto lub kup domenę WWW z linka polecającego: http://www.hekko.pl/?ref=34295
Grzegorz
Moderator
 
Posty: 7486
Z nami od: 15 kwietnia 2007, 12:33

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 03 lutego 2010, 11:31

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

trochę pokombinowałem i wyszło mi coś takiego:
Obrazek

myślę że to na pewno nie powinno się robić w taki sposób jak ja to zrobiłem ale przynajmniej ładnie wygląda i działa, nawet jest hover na lupie :)
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: teo » 03 lutego 2010, 23:59

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.8pre) Gecko/20100108 Shiretoko/3.5.8pre

Wrzuć kod, to powiem ci czy tak się powinno robić, czy też nie.
Obrazek
teo
Moderator
 
Posty: 2409
Z nami od: 16 czerwca 2004, 09:15

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 04 lutego 2010, 21:42

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

jako że przycisk nie miał zamiaru poddać się moim stylom tzn. nie mogłem go zrobić tak jak wgląda ta lupka to stwierdziłem że spróbuję to złożyć z dwóch pól tekstowych. to takie obejście naokoło ale wtyczkę piszę na własny użytek więc na razie może tak być (teraz męczę się z javascriptem). tak przy okazji: u mnie zaokrąglane są pojedyncze rogi a może ktoś wie w jaki sposób zrobić takie zaokrąglenie jak jest na pasku adresu?

Kod: Zaznacz cały
            <toolbaritem id="wyszukiwarka-toolbaritem">
               <textbox id="wyszukiwarka-szukajfraza" onkeypress="if(event.keyCode == 13) {szukaj()}"/>
               <textbox id="wyszukiwarka-szukajfrazabutton" type="autocomplete" rows="1" onclick="szukaj()"/>
            </toolbaritem>


Kod: Zaznacz cały
#wyszukiwarka-szukajfraza {
    -moz-appearance: none;
    margin: 2px 0;
    border: 1px solid;
    border-right: 0;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-top-colors: #96969D;
    -moz-border-right-colors: #96969D;
    -moz-border-bottom-colors: #96969D;
    -moz-border-left-colors: #96969D;
    padding-top: 3px;
    background: -moz-field;
    font: icon;
    font-size: 12px;
    direction: ltr;
    max-height: 22px !important;
}
#wyszukiwarka-szukajfrazabutton {
    -moz-appearance: none;
    margin: 2px 5px 2px 0;
    border: 1px solid;
    border-left: 0;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    -moz-border-top-colors: #96969D;
    -moz-border-right-colors: #96969D;
    -moz-border-bottom-colors: #96969D;
    -moz-border-left-colors: #96969D;
    padding-top: 0;
    background: -moz-field;
    font: icon;
    font-size: 11px;
    direction: ltr;
    max-height: 22px !important;
    max-width: 23px !important;
}
#wyszukiwarka-szukajfrazabutton > .autocomplete-textbox-container > .autocomplete-icon {
    list-style-image: url("chrome://wyszukiwarka/skin/searchbutton.png");
    height: 20px;
    margin-right: -6px;
    margin-left: 0px;
}

#wyszukiwarka-szukajfrazabutton:hover > .autocomplete-textbox-container > .autocomplete-icon {
    list-style-image: url("chrome://wyszukiwarka/skin/searchbuttonhover.png");
}
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: teo » 05 lutego 2010, 00:03

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.8pre) Gecko/20100108 Shiretoko/3.5.8pre

Spróbuj coś takiego:
Kod: Zaznacz cały
<textbox class="xxxxxxx" type="autocomplete">
   <hbox class="yyyyyyy">
      <image class="zzzzzz" tooltiptext="blablablaa"/>
   </hbox>
</textbox
//Funkcje użyj tak, jak poprzednio

i do tego CSS:
Kod: Zaznacz cały
.xxxxxxx {
  -moz-border-radius: 15px;  //zaokrąglenia narożników
  min-height: 22px;
  width: Xem;    //wstaw odpowiednie parametry
  min-width: Xem;
}
//możesz też użyć klas 'outset' lub 'box-inset' dla uzyskania uwypukleń, wklęśnięć
.yyyyyyy {
  -moz-box-align: center;
}
.zzzzzz {
  padding: 2px;
  list-style-image: url("chrome://wyszukiwarka/skin/searchbutton.png"); //obrazek składający się z 3 w jednym wierszu o rozmiarach 16x16 każdy
  -moz-image-region: rect(0px 16px 16px 0px);
}
.zzzzzz:hover {
  -moz-image-region: rect(0px 32px 16px 16px);
}
.zzzzzz:hover:active {
  -moz-image-region: rect(0px, 48px, 16px, 32px);
}


Możesz zamiast klas używać id. Kolory, czcionki użyj takie, jak przedtem
Obrazek
teo
Moderator
 
Posty: 2409
Z nami od: 16 czerwca 2004, 09:15

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 08 lutego 2010, 20:10

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

robiąc to w taki sposób nie działało mi zaokrąglanie narożników:
Kod: Zaznacz cały
<textbox class="xxxxxxx" type="autocomplete">
   <hbox class="yyyyyyy">
      <image class="zzzzzz" tooltiptext="blablablaa"/>
   </hbox>
</textbox>


zrobiłem to tak:

Kod: Zaznacz cały
            <toolbaritem id="wyszukiwarka-toolbaritem">
               <textbox id="wyszukiwarka-szukajfraza" onkeypress="if(event.keyCode == 13) {szukaj()}"/>
               <image id="wyszukiwarka-szukajfrazabutton" tooltiptext="szukaj" onclick="szukaj()"/>
            </toolbaritem>


jakby co to eliptyczne narożniki obsługiwane są od firefoxa 3.5 i robi je się tak:
Kod: Zaznacz cały
-moz-border-radius-topleft: 8px 11px;
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: teo » 09 lutego 2010, 00:36

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.8pre) Gecko/20100108 Shiretoko/3.5.8pre

Arek00 pisze:robiąc to w taki sposób nie działało mi zaokrąglanie narożników:
Kod: Zaznacz cały
<textbox class="xxxxxxx" type="autocomplete">
   <hbox class="yyyyyyy">
      <image class="zzzzzz" tooltiptext="blablablaa"/>
   </hbox>
</textbox>


zrobiłem to tak:

Kod: Zaznacz cały
            <toolbaritem id="wyszukiwarka-toolbaritem">
               <textbox id="wyszukiwarka-szukajfraza" onkeypress="if(event.keyCode == 13) {szukaj()}"/>
               <image id="wyszukiwarka-szukajfrazabutton" tooltiptext="szukaj" onclick="szukaj()"/>
            </toolbaritem>

Człowieku, element toolbaritem pominąłem, bo chyba oczywiste, że chcesz to wsadzić do toolbara. Nie sądziłem, że trzeba ci łopatologicznie podawać gotowca kompletnego.

Arek00 pisze:jakby co to eliptyczne narożniki obsługiwane są od firefoxa 3.5 i robi je się tak:
Kod: Zaznacz cały
-moz-border-radius-topleft: 8px 11px;

Tragedia, gdzie to wyczytałeś? Mozilla Developer Center podaje:

In Mozilla applications like Firefox, the -moz-border-radius-topleft CSS property sets the rounding of the top-left corner of the element.

Wiesz, że gdzieś dzwonią, ale nie wiesz gdzie. Otóż od Fx 3.5 wprowadzono 2. wartość. Teraz określają one: 1. promień poziomy, 2. – pionowy (w podanym przez ciebie przykładzie lewego górnego narożnika).
oraz
In Mozilla applications like Firefox, the -moz-border-radius CSS property can be used to give borders rounded corners. The radius applies also to the background even if the element has no border.

-moz-border-radius is a shortcut to set the four properties -moz-border-radius-topleft, -moz-border-radius-topright, -moz-border-radius-bottomright and -moz-border-radius-bottomleft.

Reasumując: Nie ucz ojca dzieci robić.
Obrazek
teo
Moderator
 
Posty: 2409
Z nami od: 16 czerwca 2004, 09:15

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 09 lutego 2010, 13:09

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

skąd ta agresja?

teo pisze:Człowieku, element toolbaritem pominąłem, bo chyba oczywiste, że chcesz to wsadzić do toolbara. Nie sądziłem, że trzeba ci łopatologicznie podawać gotowca kompletnego.

równie dobrze mógłbym napisać to samo do ciebie. z toolbaritem próbowałem i mi nie wyszło. gdyby mi zadziałało to nie robiłbym inaczej.

teo pisze:
Arek00 pisze:jakby co to eliptyczne narożniki obsługiwane są od firefoxa 3.5 i robi je się tak:
Kod: Zaznacz cały
-moz-border-radius-topleft: 8px 11px;

Tragedia, gdzie to wyczytałeś?

czy ten kod nie zaokrągli narożnika?

teo pisze:Reasumując: Nie ucz ojca dzieci robić.

pytałem o to wcześniej i nie dostałem odpowiedzi (od ciebie również) więc podzieliłem się zdobytą wiedzą a ty teraz uważasz że cię pouczam?
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: teo » 10 lutego 2010, 03:14

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.8pre) Gecko/20100108 Shiretoko/3.5.8pre

Arek00 pisze:czy ten kod nie zaokrągli narożnika?

Ten kod zaokrągli ci 1 – lewy górny narożnik

Arek00 pisze:pytałem o to wcześniej i nie dostałem odpowiedzi (od ciebie również) więc podzieliłem się zdobytą wiedzą a ty teraz uważasz że cię pouczam?

Przecież w CSS-ie jaki ci podałem stoi, jak byk:

Kod: Zaznacz cały
 -moz-border-radius: 15px;  //zaokrąglenia narożników

Do kogo masz pretensje, że nie umiesz czytać ze zrozumieniem?
Obrazek
teo
Moderator
 
Posty: 2409
Z nami od: 16 czerwca 2004, 09:15

Odp: jak zmniejszyć wysokość textboxa?

Postautor: Arek00 » 10 lutego 2010, 12:00

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 6.1; pl; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7

teo pisze:Ten kod zaokrągli ci 1 – lewy górny narożnik

czyli jednak jest poprawny i zadziała więc gdzie widzisz tragedię? ja widzę w tym że nie zrozumiałeś że to co podałem to tylko przykład...

teo pisze:Do kogo masz pretensje, że nie umiesz czytać ze zrozumieniem?

a ty przeczytałeś ze zrozumieniem o co ja pytałem? dla przypomnienia:
Arek00 pisze:tak przy okazji: u mnie zaokrąglane są pojedyncze rogi a może ktoś wie w jaki sposób zrobić takie zaokrąglenie jak jest na pasku adresu?

powyżej był nawet obrazek:
Obrazek
nie widzisz że na pasku adresu są zaokrąglenia eliptyczne?

chyba nie widzisz bo nadal twierdzisz że można to zrobić tak:
teo pisze:-moz-border-radius: 15px; //zaokrąglenia narożników


nie chcę się kłócić o takie głupoty bo nie mam na to czasu ale również nie chcę żebyś mnie bezpodstawnie atakował
Arek00
 
Posty: 11
Z nami od: 13 marca 2009, 23:23

Odp: jak zmniejszyć wysokość textboxa?

Postautor: teo » 10 lutego 2010, 23:43

Przeglądarka: Mozilla/5.0 (Windows; U; Windows NT 5.1; pl; rv:1.9.1.8pre) Gecko/20100108 Shiretoko/3.5.8pre

Człowieku, musisz się jeszcze dużo nauczyć, by ze mną dyskutować. Najpierw włącz standardowy motyw i do niego się odwołuj, a jeśli używasz jakiegoś dowolnego motywu, to poszukaj w kodzie tego motywu w jaki sposób jego autor rozwiązał kwestę zaokrąglania narożników.
Obrazek
teo
Moderator
 
Posty: 2409
Z nami od: 16 czerwca 2004, 09:15


Wróć do Programowanie z użyciem technologii Mozilli

Kto jest online

Zarejestrowani użytkownicy: dexter, Google [Bot]

Przejdź do powiązanej strony

Nawigacja:

Stopka: