0

I've created a custom list to store a group of team members with skills, contact info, pictures, etc. When I chose the 'Boxed' style, it was almost perfect but I need to make the containers for each item in the list about 50% smaller so we can display 4 entries on each line instead of two.

When I look at the View.aspx file, I can only find label width/body width and table border width properties. I successfully shrunk the border to to half the container but I want to shrink the container.

Does anyone know a way to do this or to find these properties? I have a few books on sharepoint design/admin but none of them dive into this.

After Christoffer's reply, I followed the suggestions and updated the mod = 4 and then mod = 6 to see if it'd force any changes. I also added the Content Editor Web Part with the css. I'm attaching the updated images. With 6 on a row - aka - mod = 6

When I changed mod = 6, I updated the CSS for table width to 15%. I only did this after the original settings didn't take.

It looks a bit worse in Internet Explorer since it stretches across the page to make room for the additional boxes. I'm attaching how the CSS looks inside the .ASPX page as well. I can't post more than 3 links until I have 10 rep points or something like that so I removed the first image since it's similar to the other question Christoffer link's to in the comments.

enter image description here

  • Answered this before: sharepoint.stackexchange.com/questions/166547/… – Christoffer Jan 26 '17 at 15:30
  • @Christoffer For some reason, that fix doesn't work in SP2010 unless I've botched your instructions. I tried updating the Mod 2 = 0 to 4 = 0 and 6 = 0 with no luck. – Chris Pyle Jan 26 '17 at 17:16
  • Actually, maybe it works but perhaps I'm doing something wrong. I can't force the update to save in my .aspx file. For some reason the update disappears after I save it and close out. When I go back in, it's been reset to 2 = 0 – Chris Pyle Jan 26 '17 at 17:28
  • So, I'm not sure what I did differently this time but I finally got the 4=0 to save but now it's not respecting the CSS. I have two columns filling up the normal container size and two smashed at the end. Not sure if the table designations changed from SP2010 -> SP2013? – Chris Pyle Jan 26 '17 at 17:49
  • Might be something to do that you will need to check out the aspx page before doing the change, then save it, check it in and publish it. Can you snap a screenshot? I will try this in a 2010 site in my 2013 environment. – Christoffer Jan 27 '17 at 7:08
0

How to display items in one row in boxed style view in sharepoint 2013

Just follow the same steps for 2013, editing the aspx page in SPD.

For 2010, you need to do some slight modifications to your CSS.

Firstly, instead of using a script editor webpart described in my answer for 2013, use a normal txt document with the CSS and add it to a content editor on the same page where the list exists.

Then add this CSS to your text file to achieve the desired result.

<style type="text/css">
table.ms-listviewtable > tbody > tr > td.ms-stylebox {
width: 25%;
}
.s4-wpcell .s4-wpTopTable {
    padding-right: 10px;
    padding-left: 10px;
}
</style>
  • Thanks for your help Christoffer. We're getting much closer. I did as you said and it started to look better but it's still not respecting the css. I added the content editor webpart and pasted the above script into the html section where it said "edit html" – Chris Pyle Jan 28 '17 at 1:32
  • @ChrisPyle You are almost there. Instead of pasting the script directly in the content editor (SharePoint removes some parts sometimes), you should add it to a normal txt file. Just copy and paste it as it is to a txt file, save it, and upload it to a library on the same site. Copy the full URL to the txt document and then go edit your content editor wp, delete the content from "edit HTML" and then look at the edit menu on the right for the CEWP, there you can paste a URL that the webpart will add to the site. That should work. – Christoffer Jan 28 '17 at 6:40
  • @ChrisPyle Just saw your update in your question and the CSS you pasted directly into the CEWP does not get applied. Follow my comment above and you should be good. – Christoffer Jan 28 '17 at 6:43
  • Thanks again for your help. I did as you said and pointed the CEWP to the text file with the CSS. I tested the link and it opened the CSS script as expected. The formatting still isn't respecting it. I can get 4, 6 or more boxes on a single line but I'm unable to force the first two to honor the css. Could it be due to another web part on the page? I have an embedded search box (an HTML web part). I wouldn't think that would have any effect but I wanted to mention just in case. I may create a new list and see if I can get it to honor the CSS. – Chris Pyle Jan 30 '17 at 16:46
  • So the new list seems to have done the trick. I may have done some inline editing on the original list css which could be preventing it from respecting the CSS text file? The new list has properly spaced boxes for all of the content. I'm considering this resolved and if we ever come across one another in the real world, I'll buy you a beer or even two! Thanks for the help! – Chris Pyle Jan 30 '17 at 17:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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