2

When i set the post width to fixed on the web part "Posts", like this:
enter image description here

I get a vertical scroll bar when loading the post, how can i remove this scrollbar? it is there no matter how "high" the post content is.

I do not have file access to the site as i am only simple user of it, please advise on how to remove the scrollbar.

enter image description here

EDIT: Another strange aspect, if I have set the Posts web part width to 900, it still does not allow the text to fill the boundries, is there a different way to do this?
enter image description here

Improve this question
  • In the screenshot though, your content is leaking. You can see it in that "0 comments" at the bottom of the post is not fully visible, hence you should get the vertical scrollbar. – Robert Lindgren Sep 29 '14 at 12:35
  • I see that, but it is an absolutly clean site, no changes made part from the fixed width ... how can i prevent it from leaking? – Allan Pedersen Sep 29 '14 at 12:48
  • It is the same issue with new posts as well, no difference, also leaking... – Allan Pedersen Sep 29 '14 at 12:55
  • For the record - i am viewing it in IE 11 - all standard settings – Allan Pedersen Sep 29 '14 at 13:08
2

I personally found that extending the maximum width of the main area and the Post List was the best method:

.ms-blog-MainArea
{
min-width:560px;
max-width:1460px;
width:100%;
}

.ms-blog-postList
{
padding:0px;
list-style-type:none;
margin-top:0px;
margin-right:24px;
margin-bottom:0px;
min-width:370px;
max-width:1270px;
}

This allows the blog post section to be much wider than the default while remaining dynamic for the window size.

For record here is the original code:

.ms-blog-MainArea
{
min-width:560px;
max-width:860px;
width:100%;
}

.ms-blog-postList
{
padding:0px;
list-style-type:none;
margin-top:0px;
margin-right:24px;
margin-bottom:0px;
min-width:370px;
max-width:670px;
}
Improve this answer
0

I managed to figure out the answer myself ... not sure if it is the best way to solve it, but is effective and learned me a lot :-)

This video helped me to a solution: http://www.youtube.com/watch?v=umB-26Hiqis

  1. Create and upload alternate CSS file to site assets
  2. Turn on publish features for the site
  3. In settings you now have a "Master page" feature that lets you set alternate css file, point to the site asset css you just uploaded...

I will do some fine tuning, but proof conecpt CSS comes here:
.ms-blog-postList
{
padding-bottom:5px;
background-color:gray;
}

.ms-blog-postBody
{
width:875px;
background-color:yellow;
}

This will make the posts wider and remove the scrollbar... and i am sure that this method will keep me up many nights for more tweaking and tuning :-)

enter image description here

EDIT BONUS:
Setting this width will make the edit post text box the same width as the display box... oh how great is that! :-)

.ms-rtefield
{
width:875px;
}

Improve this answer

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.