How to avoid over writing text in a dialog?

Navigation
4

Good morning,

This is my code: 

 <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
        <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
            <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>

Dialog image:

I need that the text does not overpass the limit of the dialog, that is to say that the text instead of being overwritten, that is inside the dialog and if it is passed over it extends down to show the complete text.

EXAMPLE:

NEW CODE

I was investigating a bit and found a possible solution,

Code: 

 <p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">

        <p:outputPanel id="dirDetail" style="text-align:center;">
            <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>

The dialog as it is presented in the code is self responsive therefore it will be adjusted depending on the number of characters.

but some computers have zoom in their browsers, so it looks very large and over the screen.

I was thinking if instead of self-adjusting to the sides it would self-adjust down.

    
asked by Critical Ghost 17.05.2017 в 18:45
source

3 answers

3

If you want to break long words, you could use overflow-wrap: break-word . Before Microsoft used word-wrap to do something similar, but when the rest of browsers incorporated it, they named it overflow-wrap ( source ).

With overflow-wrap you specify to the browser how to break the lines. The main values: normal (words do not break, default value) or break-word (if there is a long word, it will break and one part will appear on one line and another part on the next line).

Then the code would look like this: 

<p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
    <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
        <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar" style="overflow-wrap: break-word">#{busquedaBean1.autor.directorio}</a>
    </p:outputPanel>
</p:dialog>
    
answered by 18.05.2017 / 15:37
source
1

The URL has text without spaces. I understand that this is the problem with the dialogue that you present in the first image. To the tag to > add the word-break style. 

<p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
        <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
            <a href="#{busquedaBean1.autor.directorio}" 
               target="_blank" 
               id="txtCopiar"
               style="word-break: break-all;">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>
    
answered by 17.05.2017 в 22:10
0

already tried placing resizable = true 

<p:dialog header="Directorio" widgetVar="dirDialog" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
        <p:outputPanel id="dirDetail" style="text-align:center; width: 150px; height: 150px;">
            <a href="#{busquedaBean1.autor.directorio}" target="_blank" id="txtCopiar">#{busquedaBean1.autor.directorio}</a>
        </p:outputPanel>
    </p:dialog>
    
answered by 17.05.2017 в 19:09
Where do the constants stay? Consume Rest API in C #