Tekst onder elkaar krijgen.

[Atwist]

Ik weet niet of ik hier op de juiste plek ben.

Maar ik heb een vraag over de onderstaande code

<div class="form-group">
    <label class="col-sm-3 control-label">Bereiding</label>
    <div class="col-sm-6">
        <textarea class="form-control" id="description" name="description" rows="10" type="text" required="true" value="">
        </textarea>
    </div>

Hier wordt de tekst in gevoerd voor een recept
De tekst is een stap voor stap-handleiding.
Maar de tekst wordt achter elkaar aangeplakt in plaats van een enter (volgende regel)achter de punt.
Zie afbeelding

Maar hoe kan ik dit oplossen.
Of moet ik deze ergens anders wijzigen

Zoveel ervaring heb ik hiermee ook niet.

 

[alphamax]

Heb hier ook geen ervaring mee, maar hier hetzelfde probleem en een oplossing, zie https://stackoverflow.com/questions...line-breaks-when-getting-text-from-a-textarea

 

[bron]

Maar de tekst wordt achter elkaar aangeplakt in plaats van een enter

Dit komt door de \n (control teken van newline) die in de textarea wordt gebruikt. De html verwacht een <br> om naar de volgende regel te gaan.

Bij Mac en Linux is het een \n (newline) maar bij Windows is het een \r\n (return + newline). Dit kan, afhankelijk van de oplossing, invloed hebben.

Waar en wanneer wordt het resultaat niet goed getoond? Op een andere pagina, op dezelfde pagina, in een verstuurde email, of ergens anders?


edit: je mist een </div> in de html van berichtje #1 en type="text" mag niet worden gebruikt in een textarea.

 

[Atwist]

Heb nog verder zitten graven en hier heb ik de code waar de tekst bekeken kan worden.

<div class="row">
    <div class="col-12 col-lg-8">
        <!-- Single Preparation Step -->
        <div class="single-preparation-step d-flex">
            <p><?php  echo $row['recipeDescription'];?> </p>
        </div>

Nu heb ik de site bezocht die Alphamax voorstelde en heb het volgende gedaan.
In style.css de regel white-space: pre-wrap; ingevoegd.

.single-preparation-step {
    white-space: pre-wrap;
    position: relative;
    z-index: 1;
    margin-bottom: 50px;
}
.single-preparation-step h4 {
    color: #474747;
    -webkit-box-flex: 0;
    -ms-flex: 0 0 60px;
    flex: 0 0 60px;
    max-width: 60px;
    width: 60px;
    margin-bottom: 0;
}

Helaas is er geen verandering te zien

 

[Aar]

Kan je een voorbeeld op JSfiddle zetten?

 

[bron]

Is dit iets? Het vervangt de \n door een <br>

html van berichtje #4
Ergens daaronder deze JS

<script>
var paragraph = document.querySelector(".single-preparation-step p");
var txtPar = paragraph.innerHTML;
var txtNew = txtPar.replace(/\n/g, '<br>\n');
paragraph.innerHTML = txtNew;
</script>

 

[Atwist]

Hallo Bron,

Heb jou script eronder geplakt.

                <div class="row">
                    <div class="col-12 col-lg-8">
                        <!-- Single Preparation Step -->
                        <div class="card-stack p ">
                            <p><?php  echo $row['recipeDescription'];?> </p>
                        </div>
<script>
var paragraph = document.querySelector(".single-preparation-step p");
var txtPar = paragraph.innerHTML;
var txtNew = txtPar.replace(/\n/g, '<br>\n');
paragraph.innerHTML = txtNew;
</script>

Helaas is er niets gewijzigd zoals je op de afbeelding kunt zien

 

[Atwist]

Aar

Kan je een voorbeeld op JSfiddle zetten?

Hier kom ik helaas niet verder

 

[Aar]

Aar

Hier kom ik helaas niet verder

Hoezo niet?

HTML-code invullen, CSS-code incullen, eventueel de javascript
Druk op RUN, druk daarnaast op SAVE, en deel het resultaat met ons.

 

[bron]

In #4 zie ik dit

<div class="single-preparation-step d-flex">
  <p><?php echo $row['recipeDescription'];?> </p>

In #7 zie ik dit

<div class="card-stack p ">
   <p><?php  echo $row['recipeDescription'];?> </p>

Dan gaat de JS idd niet werken. Ik ben de weg kwijt.

Wat bedoel je met de textarea in #1 ?
Moeten Enters van $row['recipeDescription'] in "html enters worden omgezet ?
Hoe vaak? 1x of meerdere keren op 1 pagina?
Of begrijp ik je vraag niet?

 

[Atwist]

Hoezo niet?

HTML-code invullen, CSS-code incullen, eventueel de javascript
Druk op RUN, druk daarnaast op SAVE,

Ja dat snap ik wel, maar ik zie niet wat je daar uit kunt halen.

Bij het saven en ook tijdens de RUN krijg de telkens deze foutmelding, vandaar dat ik het niet snap.

 

[Atwist]

In #4 zie ik dit

<div class="single-preparation-step d-flex">
  <p><?php echo $row['recipeDescription'];?> </p>

In #7 zie ik dit

<div class="card-stack p ">
   <p><?php  echo $row['recipeDescription'];?> </p>

Dan gaat de JS idd niet werken. Ik ben de weg kwijt.

Wat bedoel je met de textarea in #1 ?
Moeten Enters van $row['recipeDescription'] in "html enters worden omgezet ?
Hoe vaak? 1x of meerdere keren op 1 pagina?
Of begrijp ik je vraag niet?

Ik weet dat ik af en toe in deze materie het slecht kan uit leggen
Maar bij #1 staat "Hier wordt de tekst in gevoerd voor een recept"

Bij #4 "code waar de tekst bekeken kan worden."

Ik probeer zoveel mogelijk zelf alles uit te dokteren, ben niet iemand die gaat zitten wachten tot dat jullie een site voor mij hebben gemaakt die werkt.

 

[Aar]

Ja dat snap ik wel, maar ik zie niet wat je daar uit kunt halen.

Bij het saven en ook tijdens de RUN krijg de telkens deze foutmelding, vandaar dat ik het niet snap.

Dan kunnen we meekijken. Dat wil je toch? Afbeeldingen die je deelt zijn statisch, en daarmee kunnen we niet je code bekijken of aanpassen.

 

[Atwist]

Heb het nog een paar keer geprobeerd, maar opslaan wil niet krijg telkens de foutmelding dat er iets mis is gegaan.

 

[Aar]

Druk je op SAVE?
Zie je geen unieke URL verschijnen in de url balk?

 

[bron]

In de jsfiddle screenshot lijkt het alsof je de hele pagina erop hebt gezet, o.a. met relatieve linkjes naar scripts. Dat werkt niet. Heb je ook php in jsfiddle staan? Dat werkt ook niet.
Zet alleen code snippets in jsfiddle, daarmee kunnen we helpen. Voorbeeld

edit: je kan ook nl2br proberen dan is JS niet nodig.

<p><?php echo nl2br($row['recipeDescription']); ?></p>

 

[Gouwepeer]

Mocht @Atwist het nog niet hebben gevonden: wellicht heeft hij hier iets aan:

<!DOCTYPE html>
<html>

<head>
    <title>Mijn recept</title>
</head>

<body>
<h1>Recept</h1>
<h2>Benodigdheden</h2>
  <ul>
    <li>pan</li>
    <li>alle ingrediënten</li>
  </ul>
<h2>Bereiding</h2>
  <ul>
    <li>Stap 1: Tekst van stap 1.</li>
    <li>Stap 2: Tekst van stap 2.</li>
    <li>Stap 3: Tekst van stap 3.</li>
    <li>Stap 4: Tekst van stap 4.</li>
  </ul>
<p>Eet Smakelijk.</p>

</body>

</html>

Uiteraard kan het met CSS nog verder worden uitgewerkt.

 

[Aar]

@Gouwepeer Waar is je CSS dan?

 

[Gouwepeer]

Waar is je CSS dan?

Zoals het al onder de code staat:

Uiteraard kan het met CSS nog verder worden uitgewerkt.

Mijn voorbeeld was dus nog geheel in HTML zonder CSS. Ik heb puur de Unordered List (ul tags) gebruikt om een lijst te maken zodat gewenste zaken onder elkaar komen te staan. Uiteraard kan het ook genummerd worden met Ordered List (ol tags):

<!DOCTYPE html>
<html>

<head>
    <title>Mijn recept</title>
</head>

<body>
<h1>Recept</h1>
<h2>Benodigdheden</h2>
  <ol>
    <li>pan</li>
    <li>alle ingrediënten</li>
  </ol>
<h2>Bereiding</h2>
  <ol>
    <li>Stap 1: Tekst van stap 1.</li>
    <li>Stap 2: Tekst van stap 2.</li>
    <li>Stap 3: Tekst van stap 3.</li>
    <li>Stap 4: Tekst van stap 4.</li>
  </ol>
<p>Eet Smakelijk.</p>

</body>

</html>

Met die ol-tags zie je dat het lijstje wordt genummerd.

Uiteraard kan er met CSS ook wat worden aangepast.

<!DOCTYPE html>
<html>

<head>
    <title>Mijn recept</title>
<style>
body {
  background-color: #FFFACD;
}
ol {
  background-color: #66CDAA;
}
</style>
</head>

<body>
<h1>Recept</h1>
<h2>Benodigdheden</h2>
  <ol>
    <li>pan</li>
    <li>alle ingrediënten</li>
  </ol>
<h2>Bereiding</h2>
  <ol>
    <li>Stap 1: Tekst van stap 1.</li>
    <li>Stap 2: Tekst van stap 2.</li>
    <li>Stap 3: Tekst van stap 3.</li>
    <li>Stap 4: Tekst van stap 4.</li>
  </ol>
<p>Eet Smakelijk.</p>

</body>

</html>

Aangezien mijn glazen bol net nu stuk is kan ik helaas niet zien wat @Atwist precies wilt, hoe zijn kennis van HTML en CSS is, of er iets van bootstrap wordt gebruikt, Wordpress of een andere CMS (in zijn voorbeeldcode zie ik verschillende naar CSS verwijzende classes staan).
Mijn voorbeeld is puur de basis om tekst onder elkaar te kunnen krijgen, wat ook de vraag is in de startpost. En die basis is zonder CSS mogelijk.

 

[bron]

Mijn voorbeeld is puur de basis om tekst onder elkaar te kunnen krijgen, wat ook de vraag is in de startpost.

@Gouwepeer De vraag is volgens mij dat de regels die IN de textarea (berichtje 1) worden getypt met echo $row['recipeDescription'] (berichtje 4) onder elkaar komen.

In een <textarea> staan regels onder elkaar met een CR+LF maar in een <p> wordt een <br> verwacht om regels onder elkaar te zetten. Zie MDN textarea attribuut wrap
"The browser ensures that all line breaks in the entered value are a CR+LF pair, but no additional line breaks are added to the value".

@Atwist Is het gelukt? met welke oplossing?