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

Question

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.

Answer 1

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.