Responsive Dropdowns

Anonymous

#275309

Dear Trevor,

I used your recommendations in other topics, to optimize my form for responsivenes.

However I still have problems with long content dropdowns, they are just cut of in length.

Can you take a look at it and help me out?

This is the CSS Code I have used:

.searchandfilter[data-sf-form-id="4048"] > ul {
    margin: 0 7px 0 10px;
}

.searchandfilter[data-sf-form-id="4048"] li[data-sf-field-input-type="select"] select,
.searchandfilter[data-sf-form-id="4048"] li[data-sf-field-input-type="select"] label {
    width: 100%;
	padding: 5px;
	border-radius: 4px;
	color: #1a1a1b;
	font-size:16px
}
.sf-field-submit input  { 
    color: white;
    border: 0;
    border-radius: 4px;
    font-size: 18px;
    font-weight: 00;
    background-color: #005193;
    padding: 10px 30px;
	  display: block;
    width: 100%;

}

greetings,
philipp

Anonymous

#275310

This reply has been marked as private.

Trevor

#275321

I would possibly take a different approach. See this post:

https://support.searchandfilter.com/forums/topic/how-to-have-the-combobox-work-on-mobile/#post-273431

Follow the guidance there about using Select2, and then make the Dropdown fields Comboboxes. This will give mobile users, especially iOS users, a much better experience.

Anonymous

#275358

That is a much better approach: Thank you for your recommendation.

This ticket can be closed 🙂

Trevor

#275362

Thanks for getting back to me. I will close this thread for now.

[Author]

Posts