CODEWITHSUNDEEP
javascriptjquerycss
amol singh
amol singh

Reputation: 143

text is coming in a single line in dialog box

i am not able to handle the white space from a data coming from DB

the code is below : 

<td class="tdx" bgcolor="#CCCCCC" style="" id="sol" style="background-color:white;border-style:ridge;white-space: pre-wrap">
    <div class="dialog">
        <p>
            <%=solution%>
        </p>
    </div>
    <button class="opener">Open Dialog</button>
</td>

the <%=solution%> is coming from DB is coming in a single line . i have also included the pre-wrap in CSS

jquery-code : 

$(function() {

    $('.opener').each(function() {
        var dialog = $(this).prev('.dialog').dialog({
            autoOpen: false,
            show: {
                effect: "blind",
                duration: 1000
            },
            hide: {
                effect: "explode",
                duration: 1000
            }
        });

        $(this).click(function() {
            dialog.dialog("open");
        });
    });
});

if i dont use dialog box and retrieve the text in text area ... it is coming good

NODE --> pre wrap is working good in fiddle

image added

enter image description here

Upvotes: 0

Views: 292

Answers (3)

Anarion
Anarion

Reputation: 1038

The most possible reason is wrong CSS selector. Try something like this:

#dialog p { white-space: pre-wrap; }

As UI uses div#dialog as wrapper for dialog content

Upvotes: 0

Todd Mark
Todd Mark

Reputation: 1885

JSFIDDLE

You can use these code to achieve what you want.

p{
    width: 100px;
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    white-space: nowrap;
}

Upvotes: 0

venkatesh thigala
venkatesh thigala

Reputation: 69

dialog p{
  word-break: break-all;
}

add above code to your css.

Upvotes: 1

Related Questions