Sol Web Solutions Blog

Sol Web Solutions Blog is aimed to help, inform, educate and enable our site visitors.

  • Home
    Home This is where you can find all the blog posts throughout the site.
  • Categories
    Categories Displays a list of categories from this blog.
  • Tags
    Tags Displays a list of tags that have been used in the blog.
  • Login
    Login Login form

Custom Styles Fixing Responsive Images in SharePoint 2013 Ribbon

Posted by on in SharePoint
  • Font size: Larger Smaller
  • Hits: 26252
  • 0 Comments
  • Subscribe to this entry
  • Print

Creating custom SharePoint 2013 templates could possibly render the page ribbon incorrectly.  

Why????

Custom styling can have a tendency to interfere with the default SharePoint 2013 styling...particularly the ribbon.  Box sizing has a lot to do with how dropdown lists and images are displayed in the ribbon.

Box-sizing allows us to specify how we want the browser to calculate the CSS box model. 

In particular, should the “width” of a box or container include padding and the border, or is the width just what is inside of the padding? 

Content-box means that the specified width and height do not include margins, borders, or padding. 

Border-box, on the other hand is similar to how Internet Explorer determines width and height when a document is rendered in Quirks mode

...meaning the width and height include the border and padding, but not the margin.

 The following CSS can help you with your ribbon displaying properly after using custom SharePoint design in your templates:

*, *:before, *:after {

   -webkit-box-sizing: content-box; /*border-box causes many issues with SP*/

   -moz-box-sizing: content-box; /*border-box causes many issues with SP*/

   box-sizing: content-box; /*border-box causes many issues with SP*/

}

* [class^="span"], * [class^="span"]:before, , * [class^="span"]:after {

   -webkit-box-sizing: border-box; /*re-enable border-box for framework spans*/

   -moz-box-sizing: border-box; /*re-enable border-box for framework spans*/

   box-sizing: border-box; /*re-enable border-box for framework spans*/

}

img {

   max-width: none;

   width: auto;

}

* [class^="span"] img {

   max-width: 100%; /*for images inside span grid*/

}

#scriptWPQ2 img, img.ms-webpart-menuArrowImg, #applist img {

   /*within a span may still need to have width of image not 100% for SP2013 OOTB features/imges*/

   width: auto;

   max-width: none;

}

.ms-siteactions-imgspan {

   float: none;

   margin: 0px;

}

 

 

/*Custom Styles to Fix Ribbon Layout Issues*/

 

#s4-ribbonrow [class*="span"] {

   float: none;

   margin-left: 0px;

   line-height: 1.2em;

}

input.ms-cui-cb-input {

   height: 21px; /*14 was from first try*/

   padding: 3px 7px 2px;

}

 

 

@media (min-width: 1200px) {

   header > .container-fluid, nav#topnav > .container-fluid, footer > .container-fluid,

   .footer-bottom  > .container-fluid  {

      max-width: 1160px;

      margin-left: auto;

      margin-right: auto;

   }

   #main {

      max-width: 1200px;

      margin-left: auto;

      margin-right: auto;

   }

}

 

/*Fix Absolutely Positioned divs in a Grid Framework*/

 

header > .container-fluid {

   position: relative;

}

header .searchbox {

   bottom: auto;

   right: auto;

   position: relative;

   float: right;

   margin-top: 60px;

   text-align: left;

   width: 260px;

}

header #searchInputBox input[type=text]{

   box-shadow: none;

   transition: none;

   -moz-transition: none;

   -webkit-transition: none;

}

0

Comments

  • No comments made yet. Be the first to submit a comment

Leave your comment

Guest
Guest Thursday, 28 March 2024

YOU ARE AWESOME!
I'm so blessed to
have people like you who
continue to make this
operation go.

Love the website.

Thanks for your hard work.

...thanks! I will pass it on to
our amazing web master
at Sol Web Solutions.

I LOVE the photos
on your web site.

It's really exciting to see the
site come together.
THANKS!!!

Get Started!

Help Today

Send an email here!

Sol Web Solutions will be glad to help you anytime with general or technical questions, suggestions or comments.

Website Hosting

Web Hosting

Sol News

We will not share, trade, or sell any of your information in any way. Your privacy is completely respected.