Używam znaczników "pre", aby umożliwić polu tekstowemu przechodzenie przez nowe linie, ponieważ usuwam html z formularza podczas jego podpisywania. Problem polega na dodaniu "pre"...moja komórka tabeli rozwija się do ogromnych rozmiarów i nie wiem dlaczego.....

Z góry dziękuję

Przed tagowaniem wstępnym:

enter image description here

Po tagu wstępnym:

enter image description here

Oto kod dla tej tabeli:

<form id="commentForm" name="commentForm" action="" method="post">
<ctl:vertScroll height="300" headerStyleClass="data_table_scroll" bodyStyleClass="data_table_scroll" enabled="${user.scrollTables}">
<ctl:sortableTblHdrSetup topTotal="false" href="show.whatif_edit_entry?entryId=${entry.entryId}"/>
<table class="data_table vert_scroll_table" style="width:360px;">
    <tr>
    <ctl:sortableTblHdr styleClass="center" title="Comments" property="comment" type="top">Comments</ctl:sortableTblHdr>    
    <ctl:sortableTblHdr styleClass="center" title="Created By" property="auditable.createdBy.lastName" type="top">Entered By</ctl:sortableTblHdr>

    </tr>
    <c:forEach var="comments" items="${entry.comments}">


    //PRE HERE!!    ----->>>   <tr id="id${comments.id}">
           <td id="comments-${comments.id}"  style="width:360px;"><pre>${comments.comment}</pre></td>

        <c:choose>
        <c:when test="${comments.auditable != null}">
        <td title="${comments.auditable.createdBy.lastName},  ${comments.auditable.createdBy.firstName} on 
            <fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />"><span class="mouseover_text">${comments.auditable.createdBy.lastName}, ${comments.auditable.createdBy.firstName} on 
        <fmt:formatDate value="${comments.auditable.createdDate}" pattern="${date_time_pattern}" />
        </td>
        </c:when>
        <c:otherwise>
        <td  colspan="1">&nbsp;</td>
        </c:otherwise>
        </c:choose>
        </tr> 
    </c:forEach>

    <c:if test="${lock.locked || form.entryId < 0 }">

    <%-- This is the row for adding a new comment. --%>           

        <tr id="commentRow">              
         <td>
         You have <strong><span id="commentsCounter">${const['COMMENT_MAX_LENGTH'] - fn:length(commentForm.comment)}</span></strong> characters left.<br/>
            <textarea id="comment" name="comment" rows="2" cols="125" style="width:320px;"
                 onkeypress="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeydown="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"
                 onkeyup="characterCounter('commentsCounter',${const['COMMENT_MAX_LENGTH']}, this)"></textarea>

                    <a href="javascript:addComment();"><img src="../images/icon_add.gif" border="0" alt="Add"/></a>
        </td>
        <td class="shaded" colspan="1">&nbsp;</td>
        </tr>

    </c:if>
</table>
pre
{
white-space: pre-wrap;                  /* css-3 */
white-space: -moz-pre-wrap !important;  /* Mozilla, since 1999 */
word-wrap: break-word;                  /* Internet Explorer 5.5+ */
width: 99%;
}
0
Doc Holiday 4 sierpień 2011, 16:04
Jeszcze lepiej... którą konkretnie funkcję css chcesz zobaczyć?
 – 
Doc Holiday
4 sierpień 2011, 16:13
1
Czy w ogóle modyfikujesz element pre w swoim css?
 – 
SomeShinyObject
4 sierpień 2011, 18:12
Dodałem to, co znalazłem w css pod "pre"... zwykle po prostu piszę rzeczy java... więc nie jestem zbyt dobry w stylizacji
 – 
Doc Holiday
4 sierpień 2011, 18:35

2 odpowiedzi

Najlepsza odpowiedź

Twój problem to: width: 99%; w pre. Usuń tę linię.

3
stewart715 4 sierpień 2011, 18:37
To jest to, o czym myślałem ... jednak ... są 3 inne strony w bazie kodu, które używają tagów "pre" .... czy mogę dodać coś do CSS tylko do użycia na tej stronie?
 – 
Doc Holiday
4 sierpień 2011, 18:39
Co powiedział Christopher. Dodaj klasę do swojej tabeli small_pre na przykład: <table class="small_pre"> i w swoim css: table.small_pre pre {width:auto;} Upewnij się, że linia pojawia się PO instrukcji pre {width: 99%} lub użyj !important by to przesłonić.
 – 
stewart715
4 sierpień 2011, 22:17

Nie (nad)używaj <pre>. Po prostu użyj <c:out>, aby uniknąć kodu HTML kontrolowanego przez użytkownika, aby zapobiec XSS.

<c:out value="${comments.comment}" />
2
BalusC 4 sierpień 2011, 18:39
Nie możemy już używać ... właściwie przejrzałem całą bazę kodu 2 miesiące temu i usunąłem wszystkie 15 000 wystąpień tego
 – 
Doc Holiday
4 sierpień 2011, 18:45
Wtedy spowodowałeś poważny problem. Za każdym razem, gdy ponownie wyświetlasz kontrolowane przez użytkownika dane w zwykłym kolorze w JSP bez <c:out> lub fn:escapeXml(), oznacza to, że tworzysz dużą dziurę XSS. Dlaczego usunąłeś te tagi? Czy to była ignorancja?
 – 
BalusC
4 sierpień 2011, 18:46
Hej… główni programiści podejmują decyzje… ja po prostu naciskam przyciski… lol
 – 
Doc Holiday
4 sierpień 2011, 18:47
Narzekaj na nich. To była głupia decyzja. Z drugiej strony, ty też powinieneś to wiedzieć lepiej i narzekać z góry, że stworzy to tylko dziury XSS. W każdym razie, jeśli masz odpowiednie zarządzanie wersjami treści, po prostu cofnij zmiany. To także kwestia naciśnięcia przycisku.
 – 
BalusC
4 sierpień 2011, 18:47
1
Czy zrobiłeś to również dla 15 000 innych wydarzeń? Właściwie to niewłaściwe miejsce na ucieczkę HTML. Należy to zrobić po stronie widoku, używając <c:out>. Na przykład DB mógł zostać zmodyfikowany zewnętrznie. Ucieczkę JavaScript można również wykonać za pomocą <c:out>. <script> zostanie wtedy wydrukowany jako &gt;script&lt; i nie wyrządzi żadnej szkody.
 – 
BalusC
4 sierpień 2011, 18:50