1

I've created a tabbed section on a SharePoint 2016 page, containing a number of list web parts. (I've used Christophe Humbert's Easy-Tabs-v5 to accomplish this, with modifications to suit the site's style theme.)

However, there is an unsightly 1px gap between the tab and its content:

enter image description here

This seems to be an allowance for the 1px blue border that appears when a list web part is selected. I have come across several sets of instructions on how to remove that blue border, which has resolved my issue for when the web part is selected.

enter image description here

I'd like the tabs to appear like the above, even when they are not selected. Is there a way to remove this 1px white border allowance around unselected list view web parts?

Any help would be greatly appreciated. I do not have access to SharePoint Designer, so would appreciate any suggestions that do not require this access.

Improve this question

1 Answer 1

Reset to default
1

Quite impossible to answer this without full page HTML and CSS, but you can find the cause for that 1px border using browser DOM developer tools and override it with your own style. Sometimes it will take some thorough investigation what CSS class to override.

As this appears to be just one page, you can add this overriding piece of CSS into, e.g., Script Editor web part on the page where you have the tabbed UI.

Improve this answer
5
  • Thanks. Any idea as to what I should be looking for in the code?
    – Felicity
    Jul 26, 2017 at 11:17
  • I would assume it is caused by the "border", so try setting "border: 0" on the tab HTML elements to see which one is causing it.
    – Jussi Palo
    Jul 26, 2017 at 11:39
  • Where can I find the tab HTML elements to change? Each tab is a List web part so I can't see how to access the HTML the way you would for a CEWP. (Note that CEWP does not have this issue - it seems to be isolated to List/Document View web parts.)
    – Felicity
    Jul 27, 2017 at 1:54
  • You don't want to change the actual HTML elements, but you want to add overriding CSS style (possibly by using !important on the style) on the page that will set border width to 0 (or whatever is needed).
    – Jussi Palo
    Jul 27, 2017 at 5:05
  • I've scoured the code but everything already has border = none or border = 0px. Is there anything else that it might be under? As I said, I've set the code to have an 0px border when the web part is selected, so is there a corresponding code that will allow me to do this when the web part is unselected? Existing Code: .s4-wpcell:hover .ms-WPHeader td, .s4-wpActive .ms-WPHeader td, .s4-wpcell .ms-WPSelected .ms-WPHeader td, .s4-wpActive .s4-wpTopTable, .s4-wpActive .ms-WPSelected { border-bottom: 0px solid transparent !important; border: 0px solid transparent !important;
    – Felicity
    Jul 27, 2017 at 6:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.