Home/ Questions/Q 9174263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-17T16:43:25+00:00

I am creating a simple eCommerce application using rails. I have a form on

  • 0

I am creating a simple eCommerce application using rails. I have a form on each product page that allows the user to select a number of color variants for that product and then a simple add to cart button.

The problem is that, on two different pages, the button appears in two different places while the code is exactly the same.

Here is the first example, it only shows three variants, and the button appears under these variants, like it should

enter image description here

The html to generate this is as follows (jsfiddle code example here http://jsfiddle.net/zYAVW/)

<form accept-charset="UTF-8" action="http://192.168.1.113:3000/orders/populate" method="post">    
<ul> # A bunch of styled list elements # </ul>
<br><br>
<button type="submit">Add to cart</button>
</form>

But on my other page, where I have around 85 list elements the button appears inline with the styled list elements, but uses the EXACT same code, there is no css styling for the button or form and I can’t figure out anyway to make it stay under the list.

Here is the image of the second page

enter image description here

(jsfiddle code example here http://jsfiddle.net/zBAMN/)

Does anyone know

  1. why this is happening?
  2. how to fix it?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Use overflow:hidden on the ul element.

    JSFiddle: http://jsfiddle.net/zBAMN/3/

    • 0