How to limit gridview control width?

Hi, I'm using VS2013, asp.net web form and C#
I used the asp.net web form template that came with bootstrap.  I have a gridview control with 9 columns.  The last 2 columns are too long and it extends out of the body content width, which I believe is 1170 px.  Is there a way to limit the datagrid control width not to grow beyond the body content width?  the follow CSS is taken form FireBug.  The class="container body-content" I believe defines the body container width of 1170 px for large screen.   thank you.

<div class="container body-content">
<div class="jumbotron">
<div class="navigate_buttons">
<br>
<br>
<div class="row spacer">
<div>
<table id="MainContent_gridIrb" cellspacing="0" cellpadding="4" align="Center" style="background-color:White;border-color:#CC9966;border-width:1px;border-style:None;width:98%;border-collapse:collapse;" rules="all">
</div>
</div>
lapuccaAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Russ SuterCommented:
I see a few things worth noting...

1. What you've posted is HTML markup. Not CSS.

2. Use of the <table> element is not best practice for manipulating layouts. You should use a container <div> element instead.

3. If you're using Bootstrap, you can leverage the existing css styles for table layouts.
http://www.tutorialspoint.com/bootstrap/bootstrap_tables.htm

4. To solve your problem you most likely need to avoid using the width="" and height="" properties and use the cssClass="" property instead. Manipulate all of your layout with CSS.

If you want to provide more detail I could probably give you a few more pointers.
0
lapuccaAuthor Commented:
Hi,
1.  I'm attaching my aspx and css file.  I also attached a screen cap of the css style in firebug when I select the grid.  
2.  the <table> tag you see is translated from gridview control in asp.net.  It's not something I coded.
3.  The bootstrip is buit-in in the asp.net template I used.  

Yes, still need help to make sure this gridview control doesn't grow in width that goes outside of the defined body width.

Thank you.
DEFAULT.html
Site.css
firebug-css.png
0
skijCommented:
#MainContent_gridIrb,  #MainContent_gridIrb * {
 max-width: 1170px;
}

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

hieloCommented:
Try:
table#MainContent_gridIrb{width: 98%; word-wrap:break-word;table-layout:fixed; } 

Open in new window


FYR:
http://www.456bereastreet.com/archive/200704/how_to_prevent_html_tables_from_becoming_too_wide/
0
lapuccaAuthor Commented:
thanks everyone but this is a gridview control in asp.net.  It doesn't have  word-wrap:break-word;table-layout:fixed as a property parameter that I can configure.    I also dont' want to set  max-width: 1170px; because it's using bootstrap.  Any way to configure this gridview control?  Thank you.
0
hieloCommented:
That was meant for your css file.  The markup that your grid is generating is the HTML you posted where you have a <table> with id='MainContent_gridIrb'.

So, if you have a css file, add the rule above OR add a <style> tag within the <head> of the document.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
skijCommented:
As Russ Suter already pointed out, the use of the <table> element is not best practice for manipulating layouts.   Bootstrap does not like it , and if you try to do it anyway you will run into problems like you already are.  I understand that you don't want to set  a max-width value.  You are right, it would be best NOT to hardcode a fixed max-width value, however if you insist on using <table>s for layout purposes alongside Bootstrap you are going to have to settle for a hack.
0
lapuccaAuthor Commented:
Skij, the girdview control is intepreted as table.  It's not what I use.  What I have is a gridview control!  

Hielo,
I used your css in the div above the gridview control but I have to add the Overflow to make it work or it still overflow.

Thanks everyone.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.