Odd CSS Borders around Google Site Search Results

[vsential]

• This is a question about using the theme.
• I believe this to be a bug with the theme --- not Jekyll, GitHub Pages or one of the bundled plugins.
• This is a feature request.
• I have updated all gems with bundle update.
• I have tested locally with bundle exec jekyll build.

---

Environment informations

• Minimal Mistakes version: 4.1.1
• github-pages or jekyll gem version: 3.3.1
• Operating system: Ubuntu 16.04

---

Expected behavior

No boarder around the elements. I am pretty sure this is something simple but I can't seem to find the fix. See screenshot.

Here is the page generating this:

---
type: pages
title: ""
sitemap: false
permalink: /search/
---
 <div id="search">
   <form role="search" method="get" action="/search/">
   <input id="q" name="q"
          placeholder="vRealize Orchestrator, Containers, etc." type="text">
   <input id="searchButton" name="googleSearchName" type="submit" value="Search">
   </form>
 </div>

 <script>
   (function() {
     var cx = '';
     var gcse = document.createElement('script');
     gcse.type = 'text/javascript';
     gcse.async = true;
     gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(gcse, s);
   })();
 </script>
 <gcse:searchresults-only queryParameterName="q"></gcse:searchresults-only>

[mmistakes]

Do you have this page live somewhere? I can't seem to test it locally since it relies on Google indexing the site for it to produce search results.

All I get is the search box, which doesn't return anything for me to troubleshoot what CSS is adding the borders.

Your best bet would be to use your browser's web developer tools to inspect the elements with borders and see what CSS is being declared.

Only thing I can think of off-hand might be if those elements are constructed with table. There are some border styles in the theme for that, so they might need to be adjusted based on how things are cascading.

But hard for me to say since I can't see the actual HTML and CSS class names Google uses for the search widget.

[vsential]

I do have it live for you to check out now, here is the link to it:

http://aws-dev1.vsential.com:4000/search-test/

Thanks for looking at this, I truly appreciate it!

[mmistakes]

Sure no problem!

As I suspected it's the borders being applied to table, tr, and td. I'll eventually add some small CSS to the theme to zero them out but if you want a quick fix add these CSS styles after the _table.scss ones.

.gsc-control-cse table, 
.gsc-control-cse tr, 
.gsc-control-cse td {
    border: 0;
}

[vsential]

Awesome, that worked perfectly! I really appreciate your work and help on this!