Hallo gebruikers!

Ik heb een klein probleem met mijn conversatie systeem. Het aanmaken en het overzicht van de conversaties zijn prima. Maar als ik de conversatie wil bekijken, wordt het bericht 'afgesneden'. Als het bericht aan 1 stuk door is getypt dan wordt (als de pagina is afgelopen) het bericht dus afgesneden. ik kan het niet echt beter uitleggen, dus ik heb voor jullie een account aangemaakt op mijn test site. https://www.beta.novarabank.eu Gebruikersnaam: gebruiker en het wachtwoord is: Test12345
Als je bent ingelogd kun je rechtsboven op je naam (gebruiker) drukken en vervolgens op conversaties. Als u dan een nieuwe coversatie aanmaakt kunt u bij titel en leden gewoon wat invullen. Bij bericht moet u langer dan 2 regels typen (zodat u kan zien dat het wordt afgesneden) vervolgens kunt u op bekijk deze conversatie drukken waar uw titel van de conversatie bijstaat. Dan ziet u dat het bericht wordt afgesneden. Zelf weet ik niet waar het probleem ligt. Ligt het aan de CSS? Aan mijn code?

           <div class="box-body no-padding">
			  <style>
			  </style>
			  <div id="test" class="mailbox-read-info">
			   <h3 style="font-weight: bold; margin-left: 10px !important;"><?= $data['title'] ?></h3>
			  <?php
				foreach ($berichten as $value)
				{
				?>
              <div class="mailbox-read-info">
			     
			    <h3 style="font-size: 11pt;">Geplaatst door <a href="/profiel/<?= $user->idToUsername($value['from_user']) ?>"><b><?= $user->idToUsername($value['from_user']) ?></b></a>
                  <span class="mailbox-read-time pull-right">Op <?= date("d-m-Y", $value['timestamp']) ?> om <?= date("H:i", $value['timestamp']) ?></span></h3>
		
			  </div>
              <div class="mailbox-read-message">
                <?= $value['message'] ?>
              </div><hr>
			  <?php
				}
			  ?>
              <!-- /.mailbox-read-message -->
            </div>
			<?php
			if ($data['closed'] == 0 || $user->isAdmin($_SESSION["habbonaam"]) === true)
	{
	?>
		<form style="margin-bottom: 10px; float: left; margin-top: 10px; margin-left: 10px; margin-right: 10px;" action="<?= $_SERVER["REQUEST_URI"] ?>" method="post">
			<textarea name="message" id="message" cols="80" rows="10" placeholder="Vul hier je bericht in."></textarea>
			<div class="t-a-right">
				<button style="margin-top: 5px;" type="submit" class="btn btn-primary btn-cons flex-bg message-submit">Reactie toevoegen</button>
			</div>
			<script>
				CKEDITOR.replace( 'message', {
					height: 150,
					contentsCss: [ 'https://cdn.ckeditor.com/4.6.1/full-all/contents.css', 'https://sdk.ckeditor.com/samples/assets/css/classic.css' ]
				} );
			</script>
		</form>
			  
			  	<form style="float: right; margin-top: 10px; margin-right: 25px; margin-bottom: 10px;" action="<?= $_SERVER["REQUEST_URI"] ?>" method="post">
					<input type="hidden" name="leave_conversation" id="leave_conversation" value="<?= $_SESSION['ID'] ?>" />
					<button type="submit" class="btn btn-primary btn-cons flex-bg message-submit">Ik wil deze conversatie verlaten</button>
				</form>
	<?php
	}
	else
	{
		?>
		<span>Deze conversatie is gesloten. Hierop reageren is niet mogelijk.</span>
		<?php
	}
	?>
            <!-- /.box-footer -->
          </div>

Alvast bedankt voor de reacties!
Ik heb wel kennis van css :P, en ja het is gedownload. Maar het template en het systeem zijn van 2 verschillende mensen. DUs ik voeg ze samen, zelf volg ik nog wel lessen voor css/js/php in het echte leven, maar die gaan pas door na de vakantie.
Ik zou dan in een nieuw bestand werken, zodat je alles uit het framework lekker intact kan houden.
Zelf kan ik echt nergens vinden waar ik het moet aanpassen... Bij elke class (van de messages) heb ik gekeken, geprobeerd (ik heb bij de classes width: 200px; toegevoegd), maar het hielp niet... Als één van jullie toevallig een oplossing weet hoor ik hem graag.
Het lijkt erop dat er ergens een onnodige overflow is, want normaal wordt de content netjes gewrapped binnen een divje.
Het probleem zit hem in ieder geval niet in de css die je hierboven hebt neergezet... het komt ergens anders vandaan...

Ik heb de html code van de pagina met het probleem even los opgeslagen, en de css die jij hierboven hebt neergezet ook. Als je alleen dit gebruikt, dus zonder alle andere stylesheets, dan krijg je dit:
http://marliesmaalderink.nl/test/test.html

je ziet dat de regels nu netjes in de div staan en niet worden afgebroken...

Als je echt niet weet waar het zit kun je proberen het via trial en error op te lossen. Alle stylesheetlinks even weghalen en stuk voor stuk weer toevoegen, zien bij welke het fout gaat.

Of check alle classes in de html en kijk welken daarvan niet in de css staan die je hierboven hebt gepost, dan heb je ook een beginpunt

[size=xsmall]Toevoeging op 07/01/2017 15:46:03:[/size]

Of misschien even in het css forum vragen, misschien weet iemand daar meer...
Marlies Maalderink op 07/01/2017 15:43:59

Of misschien even in het css forum vragen, misschien weet iemand daar meer...

Ik verhuis hem zelf wel even.
.mailbox-read-message {
word-break: break-all;
}
Mitch PHP op 07/01/2017 15:49:13

.mailbox-read-message {
word-break: break-all;
}


Thank you, dit werkt :D
You're welcome :)

Nog even terugkomend op mijn vorige reactie.

Ja, de word-break property werkt wel maar woorden worden door midden gehakt. Dit leest natuurlijk niet heel lekker. Als je dit wil veranderen gebruik dan
word-wrap: break-word en haal de no breaking space's (&nbsp;) weg. Ik weet niet waar deze vandaan komen maar het beïnvloed wel wat de gebruiker ziet.

Voor een wat meer gevisualiseerde uitleg:


PS: na het schrijven van dit bericht realiseerde ik mij dat door de code spaties (&nbsp;) alles als 1 lang woord gezien wordt. Hierdoor werd alles afgesneden. Als je van de &nbsp; gewoon spaties maakt heb je de word-wrap en/of de break-word niet nodig.

Good luck :)

Reageren