TechNucleus

I tried to branding my master page and everything works great if the page content is not big enough.

But when the page has wide horizontal data, I am having weird issue as show below. Somehow #s4-bodyContainer width is not set to 100%( tried both Min-width and width). Same behavior with default v4.master too.

I found the following hack from the internet to fix the issue.

BODY #s4-bodyContainer

        {

            display:-moz-inline-stack;

            display:inline-block;

            zoom:1;

            *display:inline;

            min-width:100%;

            *min-width:100%;

        }

This one works very well in IE8 but not in IE7. In IE7, second div pushes down.

I am trying to find any workaround for this issue and if i found any i will update this post.

Update:

02/09/2011 3:29 PM

I tired the Randy Drisgill master page, Real World Branding with SharePoint 2010 and it shows multiple scroll bars if have more data. Check the following screenshots. I feel, this is not user friendly as user has to vertically scroll down and then select horizontal scroll bar to see the data.

I got the following error when i deploying my custom web template in SharePoint 2010 environment.

After hours of troubleshooting, i figure it out that WebTemplate Name in the elements.xml has to match with the web template project name. See the highlighted section in the following screenshot. I hope this post will help someone and if so don’t forgot to leave a comment.

By default Microsoft uses the following styles for the input box.

If you want to modify the width of the input box, you have to do either one of the following option.

Using Custom Master Page: I preferred this option since almost everyone uses there own master page to specify their corporate branding and we can easily override the width by defining custom styles in master page. Add the following code at the end of the Header section

<style type="text/css">
        /* Change the Search box size */
        .s4-search input.ms-sbplain
        {
            width: 500px !important;
        }
    </style>

Using Feature: Choose this option if you are using out of the box master page and desperately want to change the size of search box. Since search box is a delegate control we can easily customize. so i am not going into the details . You will find lot of articles when you search online on this topic and i found this link helpful as a starting point.