Join Log in
Score:0
avatar Drupal

Drupal 7 and/or CKEditor adding paragraphs to code breaking styling

th flag
new_to_drupal_librarian

I've recently started a new job where I'm managing a Drupal 7 website for the first time. We will be moving away from this platform soon, but I have to maintain this site for the time being.

I'm trying to add a new form to one of our pages, but paragraph tags are being added after saving the code in the CKEditor which is breaking my styling.

Here is the relevant code added to CKEditor with rich text disabled:

<select id="scopeSelecter" name="scopeSelecter" onchange="primoScopeSwitch(this)">
<option value="Everything">Everything</option><option value="LibraryCatalog">Library Catalog</option>
<option value="CourseReserves">Course Reserves</option>
<option value="Theses">Theses</option></select>
<input id="primoQueryTemp" size="55" type="text" value=""> 
<input alt=" Search " id="go" onclick="searchPrimo()" title="Click to Search" type="button" value="Search">

When I inspect the output of the saved code, I see that it has place the input elements within a paragraph element:

<select id="scopeSelecter" name="scopeSelecter" onchange="primoScopeSwitch(this)">
<option value="Everything">Everything</option><option value="LibraryCatalog">Library Catalog</option>
<option value="CourseReserves">Course Reserves</option>
<option value="Theses">Theses</option></select>
<p><input id="primoQueryTemp" size="55" type="text" value="" placeholder="Discover books, articles, videos, etc."> 
<input alt=" Search " id="go" onclick="searchPrimo()" title="Click to Search" type="button" value="Search">&nbsp;</p>

Thanks for any advice.

26
0 + 0
Score:1
misterdidi avatar Drupal
de flag
misterdidi

This has to do with your CKEditor configuration and the fact that CKEditor tries to wrap tags around inline contents to help ensure the integrality of your content. I believe it is the config.autoParagraph option.

I tried reproducing your issue and globally disable this option (under the CKEditor profile edition page, section "Advanced options") but with no success.

Here, I give you two options to solve your issue:

  • Option1 - Simple workaround - Wrap your input elements in any other tag not affected by the style to prevent CKEditor adding the <p> tag.

e.g. with a <div> tag:

<select id="scopeSelecter" name="scopeSelecter" onchange="primoScopeSwitch(this)">
    <option value="Everything">Everything</option><option value="LibraryCatalog">Library Catalog</option>
    <option value="CourseReserves">Course Reserves</option>
    <option value="Theses">Theses</option>
</select>
<div> <!-- Use this tag to wrap your input elements -->
    <input id="primoQueryTemp" size="55" type="text" value=""> 
    <input alt=" Search " id="go" onclick="searchPrimo()" title="Click to Search" type="button" value="Search">
</div>
  • Option 2 - In your text format edition page (e.g. admin/config/content/formats/filtered_html), untick the box Convert line breaks into HTML. I do not recommend this solution, though, as it will impact all your content using this text format. Or, you might create a new text format to be used when the editor contains a form.

enter image description here

0 + 0
ธงชาติไทย
Elon Musk
I sit in a Tesla and translated this thread with Ai:

mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.