Select Dropdown

Hi @live4dlife

Is it possible to tell me the URL of the post or page that is having the problem?

Thank you.

General description

When writing inline element(phrasing content) in a custom HTML block.

The described inline elements(flow content) are displayed on the left edge of the page and are not laid out properly.

You need to wrap it in the appropriate element.

In the old classic editor, wpautop () was automatically corrected by the function that complements the element, but in the custom HTML block, this function is not used and must be written.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories

Thank you.

• This reply was modified 3 years, 1 month ago by nobita.

I don’t have the page published yet. Maybe you could clarify how to use the wpautop function? Below is the basic html, and I would expect the select dropdown do show next to the Gender:, but the select dropdown is showing up towards the top of the page. I do not have any other css for the rda class.

<div class=”rda”>
<div>Age: <input type=”number” id=”age” min=”0″ max=”120″ step=”0.1″
style=”width:6em”>
</div>
<div>Gender:
<select id=”gender”>
<option value=””>–Choose an option–</option>
<option value=”male”>Male</option>
<option value=”female”>Female</option>
<option value=”pregnant”>Female: pregnant</option>
<option value=”lactate”>Female: lactating</option>
</select>
</div>
…
</div>

The wpautop() function is the ability to finally enclose the content in P elements. Specifically, it is a function to insert a br element when there is one line break in the source, and to wrap it with a P element using it as a mark when there are two consecutive line breaks.

This function is disabled in custom HTML blocks.

It’s enabled in the code editor, so you can test what wpautop () does by testing it with just text and line breaks, without writing any tags.

I tried to reproduce the HTML you wrote

I tried it with a custom HTML block and it seems that there is a problem with the core source analysis.
Each time I save, the source changes and the block fails.
Note:Form elements may not be supported in custom HTML blocks, as common elements do not have this problems

If you use a code editor, it looks okay.

<div class="rda is-style-responsive">
	<div style="display:inline-block; padding:0 var(--thm_content_gap)">
		<label for="age">Age：</label><input type="number" id="age" min="0" max="120" step="1" style="width:6em"></div>
	<div style="display:inline-block; padding:0 var(--thm_content_gap)">
		<label for="gender">Gender:</label><select id="gender">
		<option value="">–Choose an option–</option>
		<option value="male">Male</option>
		<option value="female">Female</option>
		<option value="pregnant">Female: pregnant</option>
		<option value="lactate">Female: lactating</option>
		</select>
	</div>
</div>

The is-style-responsive class is placed vertically on a small screen such as a mobile device when the side-by-side arrangement does not work.

If you want to arrange the fields side by side, use inline-block.

A label breaks when there is a line break between the label and the selection element.

I hope it helps you to solve your problem.

Thank you.

• This reply was modified 3 years ago by nobita.
• This reply was modified 3 years ago by nobita.
• This reply was modified 3 years ago by nobita.

The test result using a custom HTML block is strange, so I tested it again.

I will inform you that it worked without problems.

The cause seems to be that the double quote of the source you presented was different from the usual one.

When pasting code, this issue occurs because even normal code has been sanitized.
From the next time, select a code and press the code button. ??

• This reply was modified 3 years ago by nobita.

i am still unclear how using the code button helps

WordPress has a function to convert input strings. (This forum is bbpress to be exact, but it’s probably a common feature)

The following link is an explanation of wptexturize() that converts the input character string.

https://developer.www.ads-software.com/reference/functions/wptexturize/

For example, double quotes are replaced with & 8220;. Double quotes are often used in HTML code, but they are incorrect as HTML code.

The code button in this forum wraps the selection with a backslash.

The string conversion stops in the section enclosed by the backslash.

That’s why you need a code button when writing HTML source code.

Thanks

• This reply was modified 3 years ago by nobita.

Two weeks have passed since my last reply
Suppose it has been resolved

It has been a while, but I still cannot get the dropdowns to show up correctly. They either show up entirely in the wrong place or not at all. I wish I could share a screenshot. Any way you can still help?

Thanks

Is it possible to tell me the URL of the post or page that is having the problem?

Thank you.

Yes, we will publish the page soon and I will get you the URL

here is the page:

https://live4dlife.com/calculators/

Hi

https://snipboard.io/sh7q0O.jpg

Want to display in a layout similar to capture?

In the group blocks, turn off the Inner blocks use full width setting.
No need to set wide width

It looks like you’re adding the following styles, but you don’t need them either

select {
	  position: absolute;
	  top: 130px;
	  left: 29%;
	  width: 350px;
	  z-index: 1;
 }

Customize/ Theme Scheme
Site Editor with Custom CSS.
change enabled and save

Once saved, open the blog once and then open the customizer again to see the Additional CSS entry.

Add CSS

div.wide table th,
div.wide table td{
	white-space:pre;
}
div.wide{
	width:100%;
	overflow-x:auto;
}

For block image, select full width from the menu displayed above the block

Thank you.

• This reply was modified 2 years, 7 months ago by nobita.

thank you