How do I set a CSS width from a javascript function result?

Question

I have a GridView in a div wrapper, there is some row headers along the left side that need to be always visible. This all works so far, but I need the wrapper to have a variable width to fit the browser size.

I got the desired width of the wrapper based on the browser width using some javascript but I can't figure out how to set this width as the wrapper.width.
It doesn't have to update the wrapper width after the page loads or check for browser resizing.

my poor attempt at diagramming:

|   |column headers      |
| R |--------------|      
| O | gridview data      |
| W |              |      
|   |  this part         |
| H |  will scroll |<--->
| E |  while the         |
| A |  Row headers |
| D |  stay there        |
| E |              |
| R |______________      |
| S | scroll bar   |

asp:(see edit below)

<pseudocode>
 <table>
   <tr><td>row headers</td>
       <td><div class="Wrapper">
              <asp:GridView>dataBind()</asp:gridview>
       </div></td></tr>
 </table>
</pseudocode>

css:

div.Wrapper 
{
 width:800px;<--this needs to change based on the browser width
 overflow: auto;
}

javascript:

var Width = window.innerWidth - 275 || document.body.clientWidth - 275

I either need a way to set the wrapper.width = Width or a completely different and hopefully better way to achieve this.

I tried using a % for the width but it doesn't use the browser window as 100%, it takes the % of the full width of the whole GridView which does nothing for me.

Thanks in advance for any help.

Edit: added some code

<script type="text/javascript">
    var Width = window.innerWidth - 275 || document.body.clientWidth - 275;
    var divElement = document.getElementById("wrappist");
<!--I tried a few different things at this point, here are a couple of them-->
    divElement.offsetWidth = "80px";
    divElement.style.width = Width.toString() + 'px'; 
</script>

<div runat="server" id="wrappist" class="Wrapper">
  <asp:GridView runat="server" ID="ALPGrid" CssClass="Grid"
       CellPadding="5" GridLines="Both" AutoGenerateColumns="false"
       OnRowDataBound="ALP_RowDataBound" OnRowCreated="ALP_RowCreated"
       DataKeyNames="ItemID">
  <HeaderStyle CssClass="GridHeader" />
  <RowStyle CssClass="Row" />
  <columns>column stuff in here</columns>
  </asp:GridView>
</div>

I will check for more solutions when I get back to work again on Monday. Hopefully I have posted enough information to get some more help. thanks again for the advice so far. — 182764125216
– 182764125216, Commented Nov 19, 2010 at 22:27

Adrian · Accepted Answer · 2010-11-18 23:30:34Z

1

Try this:

var Width = window.innerWidth - 275 || document.body.clientWidth - 275
var divElement = document.getElementById('idOfDiv');
d.style.width = Width.toString() + 'px';

edit: forgot to explain it. This sets the width of the div inline on the element so it will override the styling in your class.

answered Nov 18, 2010 at 23:30

Adrian

2,9231 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

182764125216 Over a year ago

I can't get this to work, I've been reading up on the object.style.width but its not doing anything for me. I'm testing it in FireFox.

Adrian Over a year ago

Wrote that without testing against a specific example can you expose a page that tries and implements this so I could take a look?

182764125216 Over a year ago

I added some code at the bottom of the original question. The page is on an intranet that can't be accessed off site so I can't link it.

182764125216 Over a year ago

I got some other help, but this is correct. I had to take off the runat="server" on the <div> tags

Michael · Accepted Answer · 2010-11-19 09:44:43Z

1

How about a pure CSS solution?

<div class="wrapper">
<div class="row_headers"></div>
<div class="grid"></div>
</div>

the css

.wrapper
{
width:800px; /*remove/change */
}
.row_headers
{
float:left;
width:100px; /*keep same as .grid margin-left */
height:300px;
background-color:#333;
padding-bottom:16px;
}
.grid
{
margin-left:100px; /*keep same as .row_headers width */
height:300px;
padding-bottom:16px;
background-color:#ddd;
overflow:auto;
}

answered Nov 19, 2010 at 9:44

Michael

4,3362 gold badges17 silver badges6 bronze badges

2 Comments

182764125216 Over a year ago

Thanks for the input, I think this would be cleaner than the way I am doing it. Unfortunately it leaves me with the same problem. I don't know how to change the 800 on page load to the browser width.

Michael Over a year ago

800px? The wrapper width? You don't have to change anything. Just remove the value and it'll be as wide as its parent element so if the parent element is the body, it'll be as wide as the body. The body will be as wide as the browser unless you've set a different width.

Collectives™ on Stack Overflow

How do I set a CSS width from a javascript function result?

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related