Showing the options up of Dropdown list

Hi, 

On the previous ticket. 

"JotForm Support" said : The fields showing the options up or down, that will depends where the field is positioned, example:

 

Our site : https://en.rihting.com

The fields showing the options down.

How to show the options up?

Thanks!

What I suggest you try doing first is to re-embed the form on your website using instead its iframe embed.

User guide: Getting the Form iFrame Code

Make sure to clean/remove previous script embed codes of the form before you re-embed using its iframe code.

Let us know how it goes.

Hi,

Please kindly check below URL:

https://en.rihting.com/home-2-2-2/

I tried the  iframe embed.  

The fields still showing the options down.

How to show the options up?

Thanks!

Are you referring to this Form?

https://en.rihting.com/contact/

The dropdown options showing up or down depends on the space above or below in your site or the screen size.

If you do not have any space below the dropdown then the options in the dropdown would be shown above and vice versa.

If there is no space above the dropdown then the option would be displayed down.

Hope this information helps!

Thanks.

Hi, Roneet

No. I am referring to this Form.

Screenshot:

https://nimb.ws/9Lzu78

It on the Homepage.

https://en.rihting.com/home-2-2-2/

Hope your help.

Thanks!

I'm afraid that you cannot change the direction of opening the select element, at least not with CSS.

Especially, since you're using the widget and not the regular dropdown field, it might be possible to move the whole drop up with CSS, but let me test that and get back to you.

Thank you!

Please try this, insert the below CSS to your Custom CSS:

iframe#customFieldFrame_4 {

    height: 300px!important;

}

button#input_5 {

    margin-top: 247px!important;

}

And this CSS to your widget's CSS:

div#dropdownsContainer {

    position: relative;

    top: 245px!important;

}

You can check my test form: https://form.jotform.com/91332092343955

Let us know how it worked.

Thank you!

Hi, It works! but the button not on the same line. Screenshot : https://nimb.ws/xOYFag Thank you for the help.

The button not on the same line.

I have injected the following CSS in your Form:

button#input_5 {
 position: relative;
 bottom: -245px;
}

Let us know how it goes.

Thanks.

It's great now.

Thanks!

Hi, again

 

After tried the code.

 

When click submit.   It will display a "yellow" square.  also, It didn't jump to the page.  

 

screenshot :

https://nimb.ws/o9vqun

 

Please check our page:

https://tw.rihting.com/

 

Thanks!

Hi, 

On mobile version.

The submit button disappear.

screenshot:

https://nimb.ws/RgjiIf

Hope your help, Thanks!

I was able to replicate, could you please try re-embedding your form by using this code:

 <iframe id="JotFormIFrame-81051736142449" title="Rihting產品塗裝線搜尋-繁中" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.me/81051736142449" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

We'll wait for your response.

Thank you!

Hi Nik_C

It still not working. 

Feedback:

1) Click it not working also cannot click our slideshow left & right button

2) It shows a yellow square

https://nimb.ws/rF9DHV

3) No button on mobile view

https://nimb.ws/OgE7oB

4) Show a very light shadow frame around the form.

Hope your help and thanks again.

-J

I've added this custom CSS code to your form: 

@media screen and (max-width: 653px){
    #id_5, button#input_5, #id_4, #cid_4 {
               top: 5px!important;
               width:100%!important;
}}

Guide: How-to-Inject-Custom-CSS-Codes

Please check your webpage and see if the submit button is now showing on mobile devices.

Hi jherwin

Great, the submit button is now showing on mobile devices.

but when click the button, It will display a yellow square around the button.

Hope it can disappear if possible.

Thanks!

The issue was in CSS that moved the button and not the whole div. So div, where the button was, was flickering on clicking (which normally happens) but div and button weren't aligned so that's why the issue.

In the form that issue is no longer happening (I corrected the CSS).

But in embedded form, I'm still replicating.

Could you please re-embed the form and see if the issue persists?

 <iframe id="JotFormIFrame-81051736142449" title="Rihting產品塗裝線搜尋-繁中" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" allowfullscreen="true" allow="geolocation; microphone; camera" src="https://form.jotform.me/81051736142449" frameborder="0" style="width: 1px; min-width: 100%; height:539px; border:none;" scrolling="no" > </iframe>

Hi Nik_C

Please kindly check the URL:

https://tw.rihting.com/

I just replace the code.

Still got the same problem.

1) Click it not working also cannot click our slideshow left & right button

2) It shows a yellow square

https://nimb.ws/rF9DHV

3) No button on mobile view

https://nimb.ws/OgE7oB

4) Show a very light shadow frame around the form.

Could you please check your form now, the square should be removed and button is visible on mobile.

We'll wait for your response.

Thank you!

Hi Nik_C

"square should be removed and button is visible on mobile."

YES!  Thank you!!

Two issues:

1) I can not click the slideshow left & right button.

Note:

Hope it can be solved. If it is not easy to solve it.   I will consider removing the slideshow buttons.

2) We have three other same forms.   We just clone the CSS code and the iframe code(except the form number) to other languages form.   It will be solved?  Am I correct?

THANK YOU AGAIN!

1) I can not click the slideshow left & right button.

Since the Slider is not a part of the Form and you have used a Revolution slider plugin to display the images in the slider in your website so you have to make modification in your website. There may be an issue with the template that you have used. You make try using another slider plugin on your website.

You may also use JotForm's slider widget:

https://widgets.jotform.com/widget/image_slider

2) We have three other same forms.   We just clone the CSS code and the iframe code(except the form number) to other languages form.   It will be solved?  Am I correct?

If you clone the first Form which is corrected by my colleague then automatically CSS would also be cloned in the Form. You just need to copy paste the iFrame code in your website.

Let us know if you have further questions.

Thanks.