[Payment]

Really awesome work with your plugin – great work!

Two issues:

<h1>1</h1>

Current Category drop down and search input box looks like this https://drive.google.com/uc?id=0BxLY7i5mkYkOQ1ZBQmJUUGZnZlE

Would like to look like your example: https://drive.google.com/uc?id=0BxLY7i5mkYkOZjdVakxmOFFVTXc on https://connections-pro.com/add-on/slim-plus/

<h1>2 Search input box does not work</h1>

Everything else is working amazing – thanks for the great plugin.

[Steven Zahm]

It appears from the screenshots that the theme or maybe another plugin is completely overriding the styles for the template. What is causing it I can not tell from a screenshot. You would need to share the link to the page having the issue.

You can also try these two FAQ:

• How do I check for a theme conflict?
• How do I check for a plugin conflict?

Hope that helps, let me know.

[Payment]

This reply has been marked as private.

[Steven Zahm]

Wow, that theme is pretty hostile with its styling!!! It has even written some HTML into the Connections search field code.

If the theme has a custom CSS area, add the following CSS to it:

body[data-form-style="minimal"] #cn-list .minimal-form-input {
    position: relative;
    padding-top: 0 !important;
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    display: inline-block;
    width: auto  !important;
}

input#cn-search-submit {
    background: url(http://bridge-alliance.com/wp-content/plugins/connections/assets/images/icons/search.png) 8px center no-repeat #FFF;
    border: 1px solid #DFDFDF;
    border-left-width: 0;
    -webkit-border-radius: 0 3px 3px 0 !important;
    border-radius: 0 3px 3px 0 !important;
    cursor: pointer;
    font-size: 12px;
    float: none !important;
    height: 28px;
    line-height: 20px;
    margin: 1px 1px 1px 0 !important;
    padding: 3px !important;
    text-align: left;
    vertical-align: bottom;
    width: 30px!important;
}

#cn-search-input {
    background: #FFF !important;
    border: 1px solid #DFDFDF !important;
    border-right-width: 0 !important;
    -webkit-border-radius: 3px 0 0 3px !important;
    border-radius: 3px 0 0 3px !important;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    color: #888;
    display: inline-block !important;
    font-size: 12px !important;
    float: none !important;
    height: 28px;
    line-height: 20px;
    margin: 1px 0 1px 1px!important;
    padding: 3px 6px !important;
    text-align: left;
    vertical-align: bottom;
    width: 140px !important;
}

#cn-search-input, input#cn-search-submit {
    box-shadow: inset 0 1px 1px rgba(0,0,0,.1) !important;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.1) !important;
}

#cn-list .chosen-container-single .chosen-search input[type=text] {
    color: #555;
    margin: 1px 0;
    padding: 4px 20px 4px 5px !important;
    width: 100%;
    height: auto;
    outline: 0;
    border: 1px solid #aaa !important;
    background: #fff url(http://bridge-alliance.com/wp-content/plugins/connections/vendor/chosen/chosen-sprite.png) no-repeat 100% -20px !important;
    background: url(http://bridge-alliance.com/wp-content/plugins/connections/vendor/chosen/chosen-sprite.png) no-repeat 100% -20px !important;
    font-size: 1em !important;
    font-family: sans-serif;
    line-height: normal;
    border-radius: 0;
}

This CSS should be sufficient to override the theme’s aggressive styling of forms.

Hope this helps, let me know.

[Payment]

This reply has been marked as private.

[Steven Zahm]

Seems the theme is setting width of selects to be 100% which causing the drop down to take the full with. I was not able to know this until the CSS I gave was added to the site.

Add this CSS (in addition to) the theme’s custom CSS area.

#cn-list .chosen-container.chosen-container-single {
    max-width: 240px !important;
}

The search always worked, you just were not able to type into the search field because the theme was hiding text inputs, globally. Have no idea why one would do that, I guess they have a reason.

[Author]

Posts