jqgrid viewGridRow dialog big span and icon
The View form will be displayed as a HTML table. About wrapping of the text in the table you can read this and this old answers.
In case of View form you can use for example the following CSS style
div.ui-jqdialog-content td.form-view-data {
white-space: normal !important;
height: auto;
vertical-align: middle;
padding-top: 3px; padding-bottom: 3px
}
In the case the view form with long data can look like
The problem with the wrong left float in the first line of long text will be clear if you examine the corresponding HTML code. You will see
at the beginning of every cell with the data. The empty cell has <span> </span>
as the HTML contain. I am not sure whether it's a bug that
will be inserted twice, but in case of wrapping of the text the
is not good. It can be removed for example with the following code:
beforeShowForm: function ($form){
$form.find("td.DataTD").each(function () {
var html = $(this).html(); // <span> </span>
if (html.substr(0, 6) === " ") {
$(this).html(html.substr(6));
}
});
}
The demo shows that after the above changes the long text will be displayed good enough:
You don't post how you fill the icons from the Status column. I hope, that after the above changes the icon will be look better. If you will still have any problem you can examine the HTML code from the corresponding cell (you can include alert(html)
in the code of beforeShowForm
) and modify the code so that it will be displayed better.
You can find the demo which I wrote for the answer here. You need just select the row with the long text to display the view form.
jqGrid navigator view text word-wrap
Solved it by using this solution by Oleg. I had to edit the CSS for the dialog window itself with this style:
div.ui-jqdialog-content td.form-view-data {
white-space: normal !important;
height: auto;
vertical-align: middle;
padding-top: 3px; padding-bottom: 3px
}
jqgrid long text wrapping
In case of the test which you need to display has no blanks or other white-space you can't use the CSS style described here and here.
I would recommend you to use another CSS style:
<style type="text/css">
.ui-jqgrid tr.jqgrow td {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto;
vertical-align: middle;
padding-top: 3px;
padding-bottom: 3px
}
</style>
How you can see from the demo the text "testtesttesttesttesttesttesttesttest" will be displayed as the following:
jqGrid onSelectRow getRowData issue
I think you can use the following
onSelectRow: function (id) {
$(this).jqGrid('viewGridRow', id);
}
See the demo from the answer as an example.
Wrapping text in JQGrid column using JSON data
Here there are some references to old answers about the same subject: the answer, the answer, this one, this one, this one, this one.
jqgrid- add scroll bar to long viewModel
Found the answer for this.
When declaring the view options add the dataheight option...
{ dataheight: 250, jqModal: false, closeOnEscape: true} // view options
How to wrap single column header text into multiple lines in jqgrid
In your example with character wrapping you forgot to use !important
after the height: auto
setting.
I agree that the problem with column resizer really exists in my demo from the my old answer. So I improved it. Moreover I try to describe in which situations can be important to use character wrapping instead of word wrapping.
The new demo with the word wrapping is here. the code is the following:
var grid = $("#list"), headerRow, rowHight, resizeSpanHeight;
grid.jqGrid({
...
});
// get the header row which contains
headerRow = grid.closest("div.ui-jqgrid-view")
.find("table.ui-jqgrid-htable>thead>tr.ui-jqgrid-labels");
// increase the height of the resizing span
resizeSpanHeight = 'height: ' + headerRow.height() +
'px !important; cursor: col-resize;';
headerRow.find("span.ui-jqgrid-resize").each(function () {
this.style.cssText = resizeSpanHeight;
});
// set position of the dive with the column header text to the middle
rowHight = headerRow.height();
headerRow.find("div.ui-jqgrid-sortable").each(function () {
var ts = $(this);
ts.css('top', (rowHight - ts.outerHeight()) / 2 + 'px');
});
It use the following CSS
th.ui-th-column div {
white-space: normal !important;
height: auto !important;
padding: 2px;
}
and produce the following picture
(I included <br/>
after every character in the first column to make the text "Inv No" by placed on many rows).
Everything look very good, but it can be some situations that you can one very long word in the column header. Some languages like German build sometimes long words like "Softwareberetstellungsform" which consist from many words. In the example it was "Software", "bereitstellung" and "form". In other languages the same situation is also possible, but is not so frequently. As a result one will receive the following (less perfect) picture (see the demo here):
You can see that the texts "AmountInEUR", "TaxInEUR" and "TotalInEUR" are cut off. One can either include manual line brakes (<br/>
) in the column text or use character wrapping which I described in the answer. If we change only the described above CSS for th.ui-th-column div
to the following
th.ui-th-column div {
word-wrap: break-word; /* IE 5.5+ and CSS3 */
white-space: pre-wrap; /* CSS3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
overflow: hidden;
height: auto !important;
vertical-align: middle;
}
we will receive the following results (see the demo here)
By the way the character wrapping work in some browsers like Google Chrome as word wrapping (!!!) if the text contains spaces. So the demo will be displayed in Google Chrome, Safari, Opera, Firefox like in the picture above with the word wrapping, but the same demo in IE (inclusive IE9) will be seen as
So no way is absolutely perfect, but the character wrapping have some advantages for all modern web browsers with the exception Internet Explorer (version < 10). The usage of <br/>
inside of column text or the usage of CSS which depend on the currently used web browser can make the solution much better.
Related Topics
Open Url in New Tab or Reuse Existing One Whenever Possible
How to Print HTML Content on Click of a Button, But Not the Page
How to Pass Along Variables with Xmlhttprequest
How to Set Textarea Scroll Bar to Bottom as a Default
How to Get the Position of an Element After CSS3 Translation in JavaScript
How to Darken an Image on Mouseover
Using Queryselectorall(). Is the Result Returned by the Method Ordered
How to Detect in iOS Webapp When Switching Back to Safari from Background
How to Format a Float in JavaScript
Is There an Equivalent of the _Nosuchmethod_ Feature for Properties, or a Way to Implement It in Js
Set a Callback Function to a New Window in JavaScript
How to Set HTML Content into an Iframe
How to Window.Scrollto() with a Smooth Effect
Ckeditor: Class or Id for Editor Body
Bootstrap Collapsed Menu Links Not Working on Mobile Devices
Is There an Alternative Method to Use Onbeforeunload in Mobile Safari