1

I'm working on a Team site inside SharePoint 2013, and I've defined many issue tracking lists. and for all these lists I'm showing the Description field (which is of type Enhanced Rich Text) inside the list views . now some users whom are accessing the team site from relatively small-sized squared screens (not wide screens) , as facing a problem is that the list views became very crowded, and as a result the Description field will only show one word per line , and will expand vertically all the way as follow:-

enter image description here

so I try many approaches , and one of them worked , where I defined the following inside my custom CSS file:-

#WebPartWPQ2  {
    min-Width:105%;
    max-Width:105%;
}

after defining this css rule, the list views will show a horizontal tool bar and the description field will relax and show more words per line as follow:

enter image description here

but note sure if doing so is a recommended approach to follow? now even on wide screens I will get a horizontal tool bar since the list will always occupy 105% of the screen. So can anyone advice on this please ?

7
  • 1
    What about using a Content Query Web Part to display the list of issues in a more user-friendly manner with a link to the item if users need to update the item? Fiddling with SharePoint css can work out if it's minimal adjustments, but to try and optimize the list view I'd rather suggest finding others ways to present data.
    – user2536
    Oct 29, 2015 at 13:30
  • 1
    What if you use min-width in pixels?
    – Jussi Palo
    Oct 29, 2015 at 13:30
  • @DanielZiga thanks for the reply. but i did not get your point why you suggest finding other ways to present data ? i am using the defualt list view , and it is satisfying our custom requirements ,,, can you please explain your point in more details ?
    – John John
    Oct 29, 2015 at 13:36
  • 1
    @johnG I think it's a good idea because then you have more control over presentation rather than rely on SharePoints out-of-the-box way of displaying data. It's a personal opinion. If what you have now satisfies customer requirements and only want to widen the Description column, then @JussiPalo's suggestion is what I'd go with because then the Description column has a minimum width and the columns around it will adjust to it.
    – user2536
    Oct 29, 2015 at 13:42
  • 1
    @johnG Percentages vary, pixels don't. That's the main difference. If you go with percentages, then the column will still shrink if the user opens the list on an even smaller screen, where as if you used pixel, the column would stay the same and the content still be readable.
    – user2536
    Oct 29, 2015 at 16:54

1 Answer 1

1

Add Script Editor to the page containing JavaScript or CSS that will adjust the width of the column according to the width of the browser window.

JQuery

$(window).on('resize', function(){
      var win = $(this); //this = window
      if (win.width() >= 820) { /* ... */ }
      if (win.width() >= 1280) { /* ... */ }
});

CSS

#WebPartWPQ2
{
    /* default styles applied first */
}

@media screen and (min-width: 820px) /* width >= 820 px */
{
    #WebPartWPQ2 {
        min-width:105%;
        max-width:105%;
    }
}

@media screen and (min-width: 1280px) /* width >= 1280 px */
{
    #WebPartWPQ2 {
        min-width:100%;
        max-width:100%;
    }
}
3
  • thanks for the reply. but can you adivce on these two points please ; 1) why you use specifically 820 & 1280 for the screen height , is there a reason? 2) second point why you are checking the min-height inside the media query ? i think ti should be min-width inside the CSS ? is this correct ?
    – John John
    Oct 29, 2015 at 13:53
  • I cannot give you 100% correct answers as I have no access to your environment, so you will need to adjust my pseudo-code to your environment details.
    – Jussi Palo
    Oct 29, 2015 at 15:03
  • ok i modified the values to work in my case, but i used your approach of defining media queries.. thanks
    – John John
    Oct 30, 2015 at 12: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.