Hallo Stackoverflow-Community, ich brauche Hilfe bei meinem Skript. Ich verwende NicEditor und versuche, die Größe des Textbereichs zu ändern. Aber als ich div: resize:both gemacht habe, kann die Größe geändert werden, aber nicht die Breite. Hier ist das Skript:

    <div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none; overflow-y: auto; overflow-x: hidden;">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>

Was kann ich tun, um die Größe dieses Editors wie im Textbereich zu ändern? Hier ist jsfiddle: https://jsfiddle.net/JVhpJ/11/

0
McLaren 28 Aug. 2015 im 14:19

2 Antworten

Beste Antwort

Zuerst habe ich ein Div namens editorcontainer erstellt und die Werte eingefügt, die Sie in Ihrem HTML für den Container von NicEditor verwendet haben.

Durch Hinzufügen von width:auto und Hinzufügen von display:inline-block und Entfernen aller Überlaufwerte wird das div nun an die Breite und Höhe der untergeordneten Elemente angepasst.

Unter dem Beispiel:

<script src="js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>
.nicEdit-main {
    resize:both;
    border:1px solid grey;
}

.editorcontainer{
	width:auto;
	border-width: 0px 1px 1px;
	border-style: none solid solid;
	border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204);
	-moz-border-top-colors: none; 
	-moz-border-right-colors: none;
	-moz-border-bottom-colors: none;
	-moz-border-left-colors: none;
	border-image: none;
        display:inline-block;
    
}
<div class="editorcontainer">
<div class=" nicEdit-main" style="resize:both; width: 139px; margin: 4px; min-height: 45px; overflow: hidden;" contenteditable="true">
<br>
</div>
</div>

Finden Sie auch unten Ihre modifizierte Geige:

https://jsfiddle.net/JVhpJ/13/

1
Pierre Irani 28 Aug. 2015 im 12:09

Hmm, vielleicht so etwas (Haupt-Div-Stil: Überlauf: Auto; Größe ändern: beides)?

<div style="width: 147px; border-width: 0px 1px 1px; border-style: none solid solid; border-color: -moz-use-text-color rgb(204, 204, 204) rgb(204, 204, 204); -moz-border-top-colors: none; -moz-border-right-colors: none; -moz-border-bottom-colors: none; -moz-border-left-colors: none; border-image: none;  resize: both;
    overflow: auto;">
    <p>vw v wev wv vw ev</p>
</div>
-1
Tomasz Kubat 28 Aug. 2015 im 11:33