Guriddo » Topic: is it possible to have 100% width

is it possible to have 100% width

Guriddo
is it possible to have 100% width

This topic has 18 replies, 7 voices, and was last updated 15 years, 9 months ago by toolm.

Creator

Topic
October 18, 2008 at 5:14 pm #72234

asifkilwani
Participant

Insted of defining width in pixels, is that possible to provide width in percent so it can fit on size of resolution?
Creator

Topic

Viewing 15 replies - 1 through 15 (of 18 total)

1 2 →

Author

Replies
October 19, 2008 at 8:01 am #83886

tony
Keymaster

Hello,

Check this form.

If you enclose the grid in div or other element

then

var gwdth = $(divelement).width();

$(…).jqGrid({

…

width: gwidth,

…

});

Then you can use setGridWidth method when the element resizes.

Regards

Tony

October 23, 2008 at 2:33 pm #83932

vinceblackmc
Participant

please Tony, can you explain more or give a live example!!

October 25, 2008 at 6:57 am #83952

tony
Keymaster

Hello,

It is possible to use the entry width of grid as percentage, but not

columns. See my example aboveexample. Percentage have

sence only if you have parent element to wich you can set percent. You can use the javascript onresize event fort this purpose.

Regards

Tony

October 26, 2008 at 11:55 am #83963

vinceblackmc
Participant

Which file do I have to add that piece of code to and where!!!. Sorry but am not getting it well.

November 15, 2008 at 9:56 am #84249

victorz
Participant

Hi, Tony!

I've tried to set the grid width to the parent div element width – exactly

as you've proposed:

outerwidth = $(“#outer”).width()

…

$(“#testreport”).jqGrid({

…

width: outerwidth;

…

});

But it doesn't seem to work for me ( at least with FF 3.0.3 – I could not

check it with other browsers / versions ). The grid still goes way beyound

the right border

November 17, 2008 at 7:29 am #84266

tony
Keymaster

Does the outer div have any width?

Regards

Tony

November 20, 2008 at 8:32 am #84331

victorz
Participant

Yes, it has:

#outer {

November 21, 2008 at 3:49 am #84314

tony
Keymaster

Hello

Try with:

#outher {

….

width : 500px

…

}

Width 95% means 95% from parent element

Regards

Tony

November 24, 2008 at 3:48 am #84348

victorz
Participant

Tried to do it your way:

#outher {

….

width: 500px;

…

}

No luck though – the grid still get wider then the container div.

Thanks.

November 25, 2008 at 1:16 am #84369

tony
Keymaster

Hello,

If this does not help we can use another approach.

After creating a grid

outerwidth = $(”#outer”).width();

(“#mygrid”).jqGrid({

…

}).setGridWidth(outerwidth);

Regards

Tony

November 26, 2008 at 7:30 am #84403

victorz
Participant

This one worked.

Thanks a lot!!!

November 26, 2008 at 11:47 am #84410

Armorfist
Participant

I'm using the following method with the jquery “dimensions” plugin:

$(window).bind('resize', function() {
jQuery(”#s1list”).setGridWidth($(window).width());
});

In firefox its fine, but in IE 7 the horizontal scroll is all messed up and it shows a vertical scroll even with height: 100% after resizing. Any input on this?

Thanks!

November 27, 2008 at 3:41 am #84422

tony
Keymaster

Hello,

Try to set not $(window).width(), but $(window).width()-5 or

something else

Regards

Tony

November 27, 2008 at 5:42 am #84427

Armorfist
Participant

Hello tony,

Already tried that, no success.

From what i understand, in IE7 a vertical and horizontal scroll is added, but without purpose because i can see all the fields (screenshot below).

I have shrinkToFit: true.

November 30, 2008 at 12:19 pm #84459

sv72
Participant

You can set

shrinkToFit: true,
forceFit: true

this gets rid of the horizontal scroll-bar.

Note that this is not perfect for loads of columns since there is no horizontal scroll-bar at all.

I hope this helps,

Sven
Author

Replies