2010-02-23 14 views
11

Mam tabelę zawierającą niektóre pola <input type="text"> i chcę, aby były wyświetlane jako zwykły tekst podczas drukowania. Mam założyć media = „print” stylów zDrukowanie arkusza stylów - konwertowanie danych wejściowych na tekst

input 
{ 
border-style: none; 
} 

w nim, a to usuwa granicę więc zawartość wygląda jak tekst, ale wejście jest nadal naciska szerokość kolumny do jej rzeczywistej szerokości (nic dziwnego), więc dostaję niepotrzebne puste miejsca i szerokości kolumn. Czy jest jakiś fajny sposób, aby jakoś ustawić szerokość wejściową do rozmiaru zawartości za pomocą CSS, lub w inny sposób to naprawić?

Ktoś na innych forach sugeruje użycie przycisku drukowania, który tworzy skrypty po stronie klienta, aby fizycznie zmienić znaczniki strony, ale niestety to nie jest zbyt praktyczne ze względu na złożoność i dynamiczny charakter strony.

Jestem prawie pewien, że nie można tego zrobić, ale myślałem, że zapytam.

+0

BTW: 'overflow: visible' na wejściach działa w IE6/7 z powodu błędu (!!). – BalusC

+0

Czy znalazłeś odpowiedź na to inne niż przy użyciu jQuery? – L84

Odpowiedz

7

Nie, nie sądzę, że można to zrobić bez skryptowania. Ale skryptowy byłoby naprawdę łatwe do osiągnięcia z ram jak Jquery:

  • Dla każdego elementu wejściowego, by utworzyć <span> obok niego i dać mu klasę, która jest ukryta w media="screen" stylów i widoczne w media="print".

  • Element wejściowy sam dostanie klasę, która działa odwrotnie, widoczna w screen i ukryta w print.

  • Każdy element wejściowy otrzyma zdarzenie change, które zaktualizuje sąsiednie span.

nie mam rutynę JQuery jeszcze ciągnąć to z mojego rękawa, a nie czas, aby umieścić go razem w tej chwili, ale to jest zdecydowanie rozwiązywalne i nadal dość dyskretny - nie ma potrzeby, aby wykonać dowolny wykonywanie skryptów po rozpoczęciu drukowania przez użytkownika.

Założę Jeśli ponownie oznaczyć pytanie lub poprosić nowy, jeden z naszych rezydenta guru JQuery będzie spojrzeć na to :)

+0

Dzięki za sugestię - używam (i jestem dość kompetentny) z JQuery, ale jest cały ładunek dynamicznie tworzonych danych wejściowych, więc wprowadzenie tego mogłoby nieco skomplikować (już złożony) kod, więc chciałem tego uniknąć jeśli to możliwe, stąd moje przemyślenia na temat tego przy pomocy CSS - obecnie nie jest to doskonałe, ale nie jest tak źle. –

+0

Dzięki, mogę to zrobić samemu, ale to będzie trochę jak bestia, a kompromis w kwestii funkcjonalności a dodatkowe testy nie są tego warte (wiem, że to brzmi, jakby to nie było tak skomplikowane, ale ta strona się kręci w trochę potwora, hehe). Bardzo dziękuję za sugestię, może to pomoże komuś innemu –

+0

Nie odkryłem jeszcze sytuacji, w której 'border: 0;' doesnt work. daj mu szansę! – roberthuttinger

0
input { border-style: none; display: inline} 
+0

ładne myślenie, ale to nie działa. – casraf

+0

Tak, próbowałem tego i nie działa (przynajmniej w IE8) - pola tekstowe wciąż rezerwują swoje miejsce na stronie i nie zwijają się, aby dopasować ich treść (dzięki, w każdym razie, za sugestię) –

1

natknąłem się na ten szukając informacji na temat styl moje formy i kilka innych rzeczy.

Po zabawie z niektórymi CSS opracowałem metodę, która działa tylko dla mnie.

Moje formularze mają stylizację, która zawiera kolorowe tło i ramkę, która jest czarna.

W moim pliku CSS wydruku skopiowałem mój formularz css i zmieniłem wszystkie kolory (nie sam tekst) na biały. Innymi słowy ukrywa moje pole tekstowe i wyświetla tylko tekst.

Oryginalne arkusze CSS - #form textarea, #form input, #form select {border: 1px bryły #ddd; kolor: # 313131; }

Drukuj CSS - #form textarea, #form input, #form wybierz {border: 1px solid #fff; kolor: #fff; }

działa jak czar =>

Hope this helps

+0

zobacz mój komentarz do powyższej odpowiedzi, 'border: 0;' wykonuje to samo! – roberthuttinger

0

używam ASP.NET i miał ten sam problem.

ja rozwiązałem dodając etykietę, która odpowiada moim tekstowym i miał dwie klasy konfigurowaniu:

W @media ekranie:

.hdnPrint {visibility:visible;display:block;} 
.visPrint {visibility:hidden;display:none;} 

W @media druku:

.hdnPrint {visibility:hidden;display:none;} 
.visPrint {visibility:visible;display:block;} 

Dla pola tekstowego przypisałem klasę hdnPrint, a na etykiecie przypisałem klasę visPrint. Gdy użytkownik drukuje formularz, etykieta jest wyświetlana, a pole formularza jest ukryte.

Zakładam, że możesz zrobić coś podobnego w środowisku innym niż ASP.NET, stosując ten sam wzorzec.

Nie wymaga skryptów.

1

Jeśli używasz bootstrap:

@media print { 
    .no-print { 
    display: none !important; 
    } 

    .form-control 
    { 
    border: 0; 
    padding:0; 
    overflow:visible; 
    } 
} 
0

Aby określić szerokość pól wejściowych w dziale druku CSS, zastosowanie:

width: ?cm 

dla odpowiednich elementów wejściowych.

Testowany w przeglądarce Firefox; może to nie działało w poprzednich wersjach przeglądarki.

Powiązane problemy