Adding drop down menu in contact form in dawn theme

Solved

Adding drop down menu in contact form in dawn theme

Alinear7
Excursionist
31 0 9

Hello, 

I have added the following code in the "contact.form.liquid" but I am still unable to see the drop-down menu in my contact form. Just have this space but not an option. 

 

Attaching both the images for refernece. Screenshot 2021-12-28 at 1.12.56 PM.pngScreenshot 2021-12-28 at 1.14.37 PM.png

Accepted Solution (1)
suyash1
Shopify Partner
11061 1364 1745

This is an accepted solution.

@Alinear7 - remove previous cs and add this

#ContactForm .field select {
    position: initial;
    width: 100%;
    padding: 1.5rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    letter-spacing: .04rem;
    color: rgba(var(--color-foreground),.75);
}
To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com

View solution in original post

Replies 16 (16)

suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - can you please share this form page link?

To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9
suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - password not working

To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

sorry 
Yellow#7

suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - please add this css to the very end of your base.css file and check, 

#ContactForm .field select {position: initial;}
To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

I can now see the menu but it is a tiny menu. 

Not aligned to the whole form

Screenshot 2021-12-28 at 1.40.03 PM.png

suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - make width 100% so entire css becomes

#ContactForm .field select {position: initial;     width: 100%;}
To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

Screenshot 2021-12-28 at 1.44.59 PM.png

 

How to increase the height so it becomes the same as the rest of the form, with a rectangle box?
And change the drop-down icon to black

suyash1
Shopify Partner
11061 1364 1745

This is an accepted solution.

@Alinear7 - remove previous cs and add this

#ContactForm .field select {
    position: initial;
    width: 100%;
    padding: 1.5rem;
    line-height: calc(1 + .5 / var(--font-body-scale));
    letter-spacing: .04rem;
    color: rgba(var(--color-foreground),.75);
}
To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

it's still the same

suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - clear cache and other errors if any, code is not wrong, should look like this

 

suyash1_0-1640680112863.png

 

To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

tried saving it again. 

it says cannot save because of an error and i cannot seem to find the said error.

suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - try again in sometime please, code is not wrong for sure

To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
Alinear7
Excursionist
31 0 9

it worked. thank you !

suyash1
Shopify Partner
11061 1364 1745

@Alinear7 - welcome, do let me know if you need anything else, you have my email below.

To build shopify pages use PAGEFLY | Want authentic views on your video? Contact me - suyash.patankar@gmail.com
muleymadness
Visitor
1 0 0

Where exactly do you add this line of code to get it to work?