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
Subscribe to this list via RSS Blog posts tagged in sharepoint 2013

User request to have a SharePoint 2013 list hyperlink column to open in a new tab.  

The code (my hyperlink is the 4th column in the list) that worked even when going to page 2 in the list view:

$(function() {
        var $t;

        var interval = setInterval(function() {
            $t = $("table.ms-listviewtable>tbody tr td:nth-child(4) a");

            $t.each(function(){
              $(this).attr("target", "_blank");
            });
        }, 1000);
    });

Special thanks for the help on this issue to Patrick_Liang (MSFT CSG, Partner)

Hits: 94488
0

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;

}

Hits: 26723
0

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.