It appears that when jqGrid has only a few rows, it increases the height of the rows to fill the available space. Is there a way to disable this behavior?
I know it is very old question but if anyone has this problem
remove height attribute from table if specified in css.
for Ex.
<div id="divGrid">
<table id="tbl" style="height:350px;overflow-y:auto;"></table>
<div id="tblPager"></div>
</div>
change to
<div id="divGrid">
<table id="tbl"></table>
<div id="tblPager"></div>
</div>
to make fix height of jqgrid please use height option of jqGrid
documentation can be find on http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
Probably you use height: "auto" or height: "100%" option of jqGrid. You can use any numeric value to specify the height of the grid in pixel. By the way the default value of the height parameter is 150 (see the documentation).
So, it turns out that after some investigation, there was a style applied higher up that somebody had been using to try to set the size of the grid even though we were also setting it in code. That was somehow trickling down to the row height. I'm still not sure how it happened, since F12 tools couldn't see anything.
I guess the recommendation from this is to not rely on CSS to set the size. The grid size must be set in JavaScript.
Related
I realise this is another basic question sorry, but I can't see where to set the height of a row that is presented in an XPage.
I want to be able to set the row to a height of 3 rows (or dynamically adjust if possible).
thanks so much.
Depending on the Xpage control being used to generate rows, apply css styling to the control. For a repeat control:
<xp:repeat id="repeat1"
value="#{viewdata}"
var="thisRowData"
indexVar="thisRowIndex"
styleClass="css-for-row">
...
</xp:repeat>
Apply CSS styling :
<style>
.css-for-row { height:3em;}
<style>
Or with JQuery:
$('.css-for-row').height('3em');
how can I remove z-index of the kendo window? I don`t want window to be modal, so I did like this .Modal(false). But of no use , window is rendering with z-index of 10003 like a popup. My intention is to render 9 windows on a same page ,put 3 windows per row in a table. Because of z-index , layout is distracting. If I can able to remove z-index, I can succeed.
#(Html.Kendo().Window()
.Name("window")
.Title("About Alvar Aalto")
.Modal(false)
.Content(#<text>
<div class="armchair">
<img src="#Url.Content("~/content/web/window/armchair-402.png")"
alt="Artek Alvar Aalto - Armchair 402" />
Artek Alvar Aalto - Armchair 402
</div>
<p>
Alvar Aalto is one of the greatest names in modern architecture and design.
Glassblowers at the iittala factory still meticulously handcraft the legendary
vases that are variations on one theme, fluid organic shapes that let the end user
ecide the use. Interpretations of the shape in new colors and materials add to the
growing Alvar Aalto Collection that remains true to his original design.
</p>
</text>)
.Draggable()
.Resizable()
.Width(600)
.Actions(actions => actions.Pin().Minimize().Maximize().Close())
)
I don't believe this can be done with the available configuration options. You could try using .Visible(false) and then manually adjust the z-index for each window to make it visible, but I imagine this would be brittle.
So I would recommend extending the window widget to create your own window type which doesn't manipulate the z-index in this way; this would keep your code encapsulated in its own class. See my answer here for some more information regarding extending kendoWindow (and a simple example). As far as I can see, the main method responsible for the z-index behavior is window.toFront(), so you'd probably have to rewrite that.
Since you plan to render the windows in a 3 by 3 grid I guess that you don't want to move or resize them and what you need from a KendoUI window is just the styling, correct? If so, you should take a look into panels styling (see KendoUI demo here) where you can style your code as a KendoUI window but, of course, you can neither move, nor hide nor resize.
You just need to use the following HTML:
<div class="k-block"><div class="k-header">Header</div>Block with header</div>
the z-index is set on the "style" property dynamically of the div.
with css all you need is an !important rule that will override styles defined on the element.
#mycontainer .k-window{
z-index: 3 !important;
}
Im trying to create a horizontally scrolling gallery but I would like to avoid defining the width on the div. Someone else is touching the html - I want her to be able to drop in as many li as possible without having to touch the css and redefining the width.
The mock site is here: rachelbeen.com/Carmen.
Safari recognizes where the content ends and stops the horizontal scroll - but firefox maintains that extra space as defined by the width:6600px; on the #gallery ul. How do I stop that from happening?
Would like to avoid plugins if possible and use only CSS.
Thanks,
-Rachel
I had the same problem and I tried this:
#full{margin:0 auto; overflow:auto; height:100%; width:1050px;}
// width is just for controlling the viewport.
#holder{float:left; margin-right:-30000px;}
.box{float:left; margin:2px;}
and HTML should be like:
<div id="full">
<div id="holder">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</div>
add many DIVs as you want and it'll make more space for you boxes without giving it a specific width. I hope it helps you.
I have following snippet to load the table generated by jqGrid.
<div id="result">
<table id="resultTable">
<tr>
<td />
</tr>
</table>
</div>
My other css interfering with jqGrid css, it causes the "caption layer" (The orange color bar at the very top of the table) height becomes very large and overlapped with other part of the page. Sorry, post image is not allowed.
The height is about 10 times larger and seems contains 3 rows with slightly different color in each. If I remove all my css, the "caption layer" display properly, but I lost all the headers, footers etc. I tried the suggestion by Tony in the link at jgGrid forum,
<style>
#result table.scroll thead th {height:30px;}
</style>
and suggestions by others, but none of them works for me. Please help me to set the "caption layer" height overwrite.
I suppose that you have some problem with CSS style "float:left" used somewhere on the page. I recommend you to look at the answer which solved close problem. If you have the same problem you should add to the <div id="result"> an additional style definition which set the floating like style="float:left" or which remove it like style="clear:left", style="clear:right" or style="clear:both".
If you have no "floating" problem and the title div will be just increased to some unwanted height you can fix the problem by setting additional CSS statically or set the height dynamically. The answer
shows how to find the caption of the grid and get its height. In the same way you can set the height.
I want to use jquery.selectable on a table inside a div which has the setting overflow:auto.
<div style="overflow:auto; height: 250px">
<table id="#selectable">
<!-- big table with lots of cells -->
</table>
</div>
In the case where the table does overflow I want to be able to select a range of cells larger than the visible area. When I drag to the edge of the visible area it should scroll to allow me to select a larger area.
This works without jquery.selectable, for example when you highlight plain text inside a div with scroll bars. But with jquery.selectable enabled, it won't scroll. Is there a way to enable scrolling while selecting?
Can you copy more code ?
I think you can change :
<table id="#selectable">
By
<table id="selectable">