[Resolved] Default dropdown Placeholder only displays on Mac not PC

[Author]

Posts

[sharonb]

I am trying to: search by location dropdown

Link to a page where the issue can be seen:

I expected to see: The default placeholder "ALL LOCATIONS"

Instead, I got: "ALL LOCATIONS" appears on MAC but apparently its empty when viewing on a PC or non-mac phone?

here is the control code: how do I make sure that the default location placeholder shows on all devices?

[wpv-control-postmeta field="wpcf-depot-location" type="select" default_label="ALL LOCATIONS" url_param="wpv-wpcf-depot-location"]

hidden link

[Christian Cox]

Hi, it looks like a CSS issue. When I inspect the select element in IE 11, I can see that the box-sizing style "border-box" seems to be causing the problem. When I disable it, the default text appears in both the select field and the text search field. Do you have any idea what's going on here? It seems to be part of the stylesheet cached by Beaver Builder. If you're not sure, please clear the Beaver Builder stylesheet cache and refresh the page.

[sharonb]

Hi

this is my custom CSS for the view which a recommended expert developer from your site did for me:
What do I need to change or add to force the dropdown box to display properly?

.form-control {
margin-top: 20px;
padding: 20px;
font-size: 20px;
font-family: rubik;
}

.a-searchbar {
background: #000000;
margin-top: 0px;
padding: 30px 30px 40px 30px;
}
.search {
margin-top: 10px;
-webkit-border-radius: 60;
-moz-border-radius: 60;
border-radius: 60px;
width: 100%;
font-family: rubik;
-webkit-border-radius: 60;
-moz-border-radius: 60;
border-radius: 60px;
font-family: Arial;
color: #ffffff;
font-size: 20px;
background: #e1001a;
padding: 12px 20px 12px 20px;
text-decoration: none;
}

.search:hover {
background: #771c23;
color: #ffffff;
text-decoration: none;
}

.radio, .checkbox { display: inline !important; }

/* ::-moz-selection {
background: white;
} */

::selection { background: white; }

@-webkit-keyframes
icon-beat { 0% {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
}

@keyframes
icon-beat { 0% {
-webkit-transform: scale(2);
-ms-transform: scale(2);
transform: scale(2);
}
100% {
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

* {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

label {
margin-top: 20px;
display: inline-block;
position: relative;
/* padding: 0.5rem 1rem;*/
font-size: 20px;
line-height: 20px;
font-weight: normal;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}

label:last-of-type { margin-right: 1rem; }

label i {
display: inline-block;
height: 35px;
position: relative;
top: 8px;
font-style: normal;
color: #fff;
}

label span {
display: inline-block;
margin-left: 5px;
line-height: 35px;
color: #fff;
}

input[type="radio"],
input[type="checkbox"] { display: none; }

input[type="radio"] + i:before,
input[type="checkbox"] + i:before {
font-family: 'FontAwesome';
font-size: 38px;
height: 35px;
width: 35px;
display: inline-block;
}

input[type="radio"]:checked + i,
input[type="checkbox"]:checked + i {
position: relative;
-webkit-animation: icon-beat 0.1s ease;
animation: icon-beat 0.1s ease;
}

input[type="radio"]:checked + i + span,
input[type="checkbox"]:checked + i + span {
-webkit-transition: all 0.1s ease;
transition: all 0.1s ease;
}

input[type="radio"] + i:before { content: "f10c"; }

input[type="radio"]:checked + i:before { content: "\f111"; }

input[type="radio"]:checked + i + span,
input[type="radio"]:checked + i:before { color: #fff; }

input[type="checkbox"] + i:before { content: "\f096"; }

input[type="checkbox"]:checked + i:before { content: "\f046"; }

input[type="checkbox"]:checked + i + span,
input[type="checkbox"]:checked + i:before { color: #fff; }

[Christian Cox]

I don't have a simple solution for this, unfortunately. You can try adding a min-height of 60px to this select field, but any changes I try to make here cause other display shifts and alignment issues. Changes I introduce for those issues introduce other issues, and so on. Ultimately custom styles like this are not supported here in the forums.

[sharonb]

Thanks Christian,

Where exactly do I add the min-height: 60px;

If this doesnt work, which CSS do I need to remove so that this field is just the default bootstrap styling?

I appreciate that its custom styling but I would really appreciate your input as I dont want to break the rest of the CSS by removing the wrong lines.

Thanks very much!

[sharonb]

I have a very difficult client who because of this one thing has decided that unless it works he wont pay for anything!!!

Nice! so I would really appreciate your support or for you to point me in the direction of someone who can resolve the issue

I am also on a deadline, so its not looking good!

Thanks again for your help

[Christian Cox]

You can add CSS in the View's filter editor JS panel, something like this:

.wpv-filter-form select[name="wpv-wpcf-depot-location"] {
  min-height: 60px;
}

[sharonb]

Thanks very much Christian,

I had a play around with the CSS and managed to resolve it...(i hope) apparently microsoft doesnt like css being applied to the dropdown! and .formcontrol was the issue.

Thanks for your help and pointing me in the right direction

rgds

Sharon