NOTICE: We've Moved to a Ticket System for Support

As of August 31, 2017 (12am EST) our support forums will be retired (read-only), and we will be moving to a support ticket system. This will allow us to better organize and answer support requests, and provide a more personalized experience as we assist our customers.

For the time being, we will leave our forums open for reading and learning while we work on creating a more robust Knowledge Base for everyone to use.

If you are a WC Vendors Pro customer please open a support ticket here. 

If you are a WC Vendors user please open a support ticket on the Wordpress.org forums.

The information on this forum is outdated and in most instances no longer relevant. Please be sure to check our documentation for the most up to date information.

https://docs.wcvendors.com/

Thank you to all of our customers!

This topic has 4 replies, 3 voices, and was last updated 7 years, 1 month ago by Michael Matker.

Viewing 5 posts - 1 through 5 (of 5 total)

Author

Posts
February 28, 2017 at 9:38 am #57797

Michael Matker
Participant

Hello,

I am noticing some of the drop down styling is kind of funky. Here are two examples: https://i.imgur.com/KvtNUDp.png and https://i.imgur.com/z4vsyJ1.png . I checked out the styling with the Storefront theme as well to see if it was just the theme I am using but it seems to have the same issue. Is there a way to add css to fix these drop dowsn?

Thanks!

February 28, 2017 at 10:18 am #57799
DELETE
Participant
Yes, you can. The styling for the Select2 widget just sucks, here’s my SCSS code to override it:
```
  // Make the select combo boxes with select2 match bootstrap
  .select2-container {
    @extend .form-control; 
    .select2-choice, .select2-dropdown-open .select2-choice {
      border: none !important;
      padding: 0px !important;
    }

    .select2-search {
      padding: 10px;
    }
  }
}

// This needs to be in the root, because the .select2-drop element is a direct child of <body>
.select2-drop.select2-with-searchbox.select2-drop-active, .select2-drop, .select2-drop-multi {
  // border: 1px solid #666;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-top: none;
}
```
You can modify as you please, and put it into your child theme’s styles.css file.
February 28, 2017 at 10:54 am #57805

Michael Matker
Participant

Here is the code I put into the child theme style.css: https://i.imgur.com/KSho4hc.png

I am still getting a goofy drop down.

February 28, 2017 at 10:27 pm #57869
Anna
Member
Try this in the styles.css:
```
.select2-container .select2-choice {
height:36px;
line-height:30px;
}
```
If it does not show the changes, try:
```
.select2-container .select2-choice {
height:36px !important;
line-height:30px !important;
}
```
March 1, 2017 at 10:36 am #57914

Michael Matker
Participant

I tried both and neither worked. Both still show like this https://i.imgur.com/KvtNUDp.png
Author

Posts