Please find the working sample code as below. This code contains 1 sample html table having 1 record.But this logic if i try to implement in my project having knockout binding , its not working.Kindly suggest me some options to re-size table columns having knockout binding. I tried jQuery Plugin but it was not working with knockout binding.
colResizable demo
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/colResizable.js"></script>
<script type="text/javascript">
$(function(){
$("#examTable").children().colResizable();
});
</script>
</head>
<body>
<div id="patientInfo">
<div id="examTable" style="width: 100%;">
<table cellspacing="0" id="WLcolumn-header-table" style="width: 100%;">
<thead>
<tr id="WLheaderRow">
<th w="1.3" style="width: 5.2%;" ><a class="select"></a></th>
<th w="6" style="width: 22%;">Student Name <img class='' ></th>
<th w="3" style="width: 12%;">Student ID <img class='' ></th>
<th w="2" style="width: 8%;">Date <img class='image-arrow-up' ></th>
<th w="3" style="width: 12%;">ABC # <img class='' ></th>
<th w="4" style="width: 14%;">Description <img class='' > </th>
<th w="2" style="width: 10%;">Teacher <img class='' ></th>
<th w="2" style="width: 8%;">Class <img class='' ></th>
<th w="2" style="width: 10%;">Status <img class='' ></th>
</tr>
</thead>
<tbody >
<tr >
<td id="check_selected" style="width: 5.2%;">
<a >1</a>
</td>
<td style="width: 22%;" >xyz</td>
<td style="width: 12%;" >zyz111</td>
<td style="width: 8%;" >12-12-1912</td>
<td style="width: 12%;" >Acc121</td>
<td style="width: 14%;" >HELLO</td>
<td style="width: 10%;" >me</td>
<td style="width: 8%;" >ECE</td>
<td style="width: 10%;" >ACTIVE</td>
</tr>
</tbody>
</table>
</div>
</div>
<br/>
<div class="sampleText">
<label id="sample2Txt">Drag the columns to start</label>
</div>
<br/><br/>
</div>
</body>
</html>
To give a max-height to cell contents you'll need to wrap it in another element (e.g. a div). In addition, I'd recommend using the style binding, like this:
<td>
<div data-bind="text: rowInfo[colInfo.DataColumn],
style: { width: Width, height: '30px' }"></div>
</td>
See this fiddle for a working demo.
Or you can try this
<table>
<tr>
<td><div style="height:40px; overflow:hidden">Sample</div></td>
<td><div style="height:40px; overflow:hidden">Text</div></td>
<td><div style="height:40px; overflow:hidden">Here</div></td>
</tr>
</table>
Related
I want to change the below html to required format as in below image,
<div id="pdfTable" #pdfTable style="display: none;">
<table class="table table-borderless mb-0" style="font-size:14px;">
<thead>
<label for="" style="text-align: center;">Recommendation: </label>
<tr style="">
<td *ngFor="let recommendation of recommendations" style="border:0;width:25%">
<span *ngIf="recoName == recommendation.listTypeValueName">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYA alt="">
{{recommendation.listTypeValueName}}
</span>
<p *ngIf="recoName != recommendation.listTypeValueName"><img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAA alt="">
{{recommendation.listTypeValueName}} </p>
</td>
</tr>
</thead>
</table>
</div>
Required Format
What I am getting from above html
<div id="pdfTable" #pdfTable style="display: none;">
<table class="table table-borderless mb-0" style="font-size:14px;">
<thead>
<tr style="">
<th colspan="2" style="text-align: center;">Recommendation:</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let recommendation of recommendations">
<td style="width:25%;text-align:center;">
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYA">
</td>
<td style="width:75%;text-align:left;">
{{recommendation.listTypeValueName}}
</td>
</tr>
</tbody>
</table>
</div>
I using the code to create header freeze table but the width of both the tables are not matching. Here is the Code
<div id="view_feedback_table">
<table id="crosstable" border =1 cellpadding="6px" style="margin-top: 30px;TEXT-ALIGN: left;float:left;width:1200px;BORDER-COLLAPSE: collapse;">
<thead>
<tr>
<th colspan="9" style="text-align: center;">
<span style="color: #1b4a84;font-size: 14px;font-weight: 900;">Response</span>
</th>
<th style="text-align: right;">
Download
</th>
</tr>
<tr style="color: white; background-color: rgb(31, 73, 125);">
<th style="width: 10%;">Activity Code</th>
<th style="width: 10%;">No of Completed Associates</th>
<th style="width: 10%;">No of Participants Submitted Feedback</th>
<th style="width: 7%;">Instructor</th>
<th style="width: 7%;">Courseware</th>
<th style="width: 7%;">Environment</th>
<th style="width: 8%;">Learner Support</th>
<th style="width: 7%;">Overall</th>
<th style="width: 10%;">Overall Activity Feedback</th>
<th style="width: 8%;">Overall Activity NPS</th>
</tr>
</thead>
</table>
<table id="crosstable" border =1 cellpadding="6px" style="TEXT-ALIGN: left;float:left;width:1200px;BORDER-COLLAPSE: collapse;display: block;max-height: 50px;overflow-y: auto;">
<tbody>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td style="width: 10%;">
Activity_Code1
</td>
<td style="width: 10%;">No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td style="width: 10%;">No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td style="width: 7%;">Instructor</td>
<td style="width: 7%;">Courseware</td>
<td style="width: 7%;">Environment</td>
<td style="width: 8%;">Learner_
<wbr>Support
</td>
<td style="width: 7%;">Overall</td>
<td style="width: 10%;">Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td style="width: 8%;">Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
<tr style="color: rgb(31, 73, 125); background-color: rgb(220, 230, 241);">
<td>
Activity_Code2
</td>
<td>No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td>No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td>Instructor</td>
<td>Courseware</td>
<td>Environment</td>
<td>Learner_
<wbr>Support
</td>
<td>Overall</td>
<td>Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td>Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td>
Activity_Code3
</td>
<td>No_
<wbr>of_
<wbr>Completed_
<wbr>Associates
</td>
<td>No_
<wbr>of_
<wbr>Participants_
<wbr>Submitted_
<wbr>Feedback
</td>
<td>Instructor</td>
<td>Courseware</td>
<td>Environment</td>
<td>Learner_
<wbr>Support
</td>
<td>Overall</td>
<td>Overall_
<wbr>Activity_
<wbr>Feedback
</td>
<td>Overall_
<wbr>Activity_
<wbr>NPS
</td>
</tr>
</tbody>
</table>
</div>
Any suggestions to make this correct. I need freeze header effect so can't use the same table to adjust the width.
Thanks it worked but still have some minor alignment issue when the auto scroll comes into the picture. Is there any way to adjust that one too in the code.
<div style="position: fixed;background:#fff;z-index: 999;">
<table id="crosstable" cellpadding="6px" border=1 style="margin-top: 30px;TEXT-ALIGN: left;width:1200px;">
<tbody>
<tr>
<td colspan="9" style="text-align: center;">
<span style="color: #1b4a84;font-size: 14px;font-weight: 900;">L1 Feedback Response</span>
</th>
<td style="text-align: right;">
<a onclick="download excel("default","default","AC")">
<img src="/pentaho-style/1235/images/excel icon.png" title="Download" style="height: 24px;">
</a>
</th>
</tr>
<tr style="color: white;background-color: rgb(31, 73, 125);/* position: fixed; */">
<td style="width: 10%;">Activity Code</th>
<td style="width: 10%;">No of Completed Associates</th>
<td style="width: 10%;">No of Participants Submitted Feedback</th>
<td style="width: 7%;">Instructor</th>
<td style="width: 7%;">Courseware</th>
<td style="width: 7%;">Environment</th>
<td style="width: 8%;">Learner Support</th>
<td style="width: 7%;">Overall</th>
<td style="width: 10%;">Overall Activity Feedback</th>
<td style="width: 8%;">Overall Activity NPS</th>
</tr>
</tbody>
</table>
</div>
<div style="padding-top:125px;">
<table id="crosstable" cellpadding="6px" border=1 style="TEXT-ALIGN: left;max-height: 500px;width:1200px;">
<tbody>
<tr style="color: rgb(31, 73, 125); background-color: white;">
<td style="width: 10%;">
Activity Code2
</td>
<td style="width: 10%;">No_<wbr>of_<wbr>Completed_<wbr>Associates</td>
<td style="width: 10%;">No_<wbr>of_<wbr>Participants_<wbr>Submitted_<wbr>Feedback</td>
<td style="width: 7%;">Instructor</td>
<td style="width: 7%;">Courseware</td>
<td style="width: 7%;">Environment</td>
<td style="width: 8%;">Learner_<wbr>Support</td>
<td style="width: 7%;">Overall</td>
<td style="width: 10%;">Overall_<wbr>Activity_<wbr>Feedback</td>
<td style="width: 8%;">Overall_<wbr>Activity_<wbr>NPS</td>
</tr>
</tbody>
</table>
</div>
<td> content with "underscores" like No_of_Participants_Submitted_Feedback are unbreakable, therefore it would push the width of the columns. So you might want to use space instead of underscores.
If you must have the underscores, add <wbr> after every underscore like this No_<wbr>of_<wbr>Participants_<wbr>Submitted_<wbr>Feedback.
Also note that you missed % in <td style="width: 7;">Environment</td>.
Just by doing this, you would see a huge change in your result, then you can tweak your codes to match perfectly.
in my html i wanna use "th:unless". i wanna compare two coming variable,if any one match with other, i want to hide the button in that raw.
here is my code..
Art-in-Nisantasi-Id
Art-in-Nisantasi-Text
Art-in-Nisantasi-Url
Art-in-Nisantasi-Coordinate
<h3>All Contents</h3>
<table border="1">
<tr align="left">
<th style="width: 20px;">Art-in-Nisantasi-Id</th>
<th style="width: 100px;">Art-in-Nisantasi-Text</th>
<th style="width: 50px;">Art-in-Nisantasi-Url</th>
<th style="width: 50px;">Art-in-Nisantasi-Coordinate</th>
</tr>
<tr th:each="contentType:${contentTypes}">
<td th:text="${contentType.art_in_nisantasi_id}"></td>
<td th:text="${contentType.art_in_nisantasi_text}"></td>
<td th:text="${contentType.art_in_nisantasi_url}"></td>
<td th:text="${contentType.art_in_nisantasi_coordinate}"></td>
</tr>
<div>
<td
th:unless="${contentType.art_in_nisantasi_id}+'='+${selectedContent.art_in_nisantasi_id}"></td>
<td th:attr="data-id=${contentType.art_in_nisantasi_id}">
<button type="button" class="action-addButton" onclick="show">Ekle</button>
</td>
</div>
</table>
try this way :
<td th:unless="${contentType.art_in_nisantasi_id == selectedContent.art_in_nisantasi_id}"></td>
this td element will be produced or created in dom when both are not equal
I am working with ExtJS 3.3.0 with an RTL fix, and I have an override on all of the required classes to align the fields correctly.
I keep having an issue with floating forms, though, where my field labels sometimes disappear. I have investigated the issue, and discovered that the label is not actually gone - it has just popped over to the left (and therefore doesn't show) for no discernable reason.
Here is what my dialog should look like (and does the first time it's shown):
Unfortunately, here is what it looks like the second time it gets shown:
This is the window HTML as created by ExtJS (Note: the HTML of the document is marked dir="rtl"):
<div class="x-window-tl">
<div class="x-window-tr">
<div class="x-window-tc">
<div style="mozuserselect: none; khtmluserselect: none" id="ext-gen129" class="x-window-header x-unselectable x-window-draggable"
unselectable="on">
<div id="ext-gen135" class="x-tool x-tool-close">
</div>
<span id="ext-gen141" class="x-window-header-text">שינוי תאריך אספקה</span>
</div>
</div>
</div>
</div>
<div id="ext-gen130" class="x-window-bwrap">
<div class="x-window-ml">
<div class="x-window-mr">
<div id="ext-gen134" class="x-window-mc">
<div style="width: 297px; height: 40px" id="ext-gen131" class="x-window-body">
<div style="width: 297px" id="ext-comp-1046" class=" x-panel x-form-label-left">
<div id="ext-gen147" class="x-panel-bwrap">
<form style="padding-bottom: 8px; padding-left: 8px; width: 297px; padding-right: 8px; height: 40px; padding-top: 8px"
id="ext-gen128" class="x-panel-body x-panel-body-noheader x-form"
method="post">
<div style="width: 300px" dir="rtl" id="ext-gen149" class="x-form-item " tabindex="-1">
<label style="width: 75px" id="ext-gen150" class="x-form-item-label" for="ext-comp-1045">
תאריך חדש:</label>
<div style="padding-right: 80px" id="x-form-el-ext-comp-1045" class="x-form-element">
<div style="width: 133px" dir="rtl" id="ext-gen152" class="x-form-field-wrap x-form-field-trigger-wrap">
<input style="width: 133px" id="ext-comp-1045" class="x-form-text x-form-field x-trigger-noedit"
name="ext-comp-1045" readonly value="2012-11-22" size="10" autocomplete="off"
qtip><img id="ext-gen153" class="x-form-trigger x-form-date-trigger" alt="" src="http://localhost/bDox/NipImages/s.gif">
</div>
</div>
<div class="x-form-clear-left">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="ext-gen133" class="x-window-bl">
<div class="x-window-br">
<div class="x-window-bc">
<div style="width: 297px" id="ext-gen132" class="x-window-footer x-panel-btns">
<div style="width: 287px" id="ext-comp-1049" class="x-panel-fbar x-small-editor x-toolbar-layout-ct">
<table class="x-toolbar-ct" cellspacing="0">
<tbody>
<tr>
<td class="x-toolbar-right" align="center">
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-right-row">
<td id="ext-gen142" class="x-toolbar-cell">
<table style="width: 75px" id="ext-comp-1047" class="x-btn x-btn-noicon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-right">
<tr>
<td class="x-btn-tl">
<i> </i>
</td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-ml">
<i> </i>
</td>
<td class="x-btn-mc">
<em unselectable="on">
<button style="" id="ext-gen143" class=" x-btn-text">
אשר</button></em>
</td>
<td class="x-btn-mr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-bl">
<i> </i>
</td>
<td class="x-btn-bc"></td>
<td class="x-btn-br">
<i> </i>
</td>
</tr>
</tbody>
</table>
</td>
<td id="ext-gen144" class="x-toolbar-cell">
<table style="width: 75px" id="ext-comp-1048" class="x-btn x-btn-noicon" cellspacing="0">
<tbody class="x-btn-small x-btn-icon-small-right">
<tr>
<td class="x-btn-tl">
<i> </i>
</td>
<td class="x-btn-tc"></td>
<td class="x-btn-tr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-ml">
<i> </i>
</td>
<td class="x-btn-mc">
<em unselectable="on">
<button style="" id="ext-gen145" class=" x-btn-text">
ביטול</button></em>
</td>
<td class="x-btn-mr">
<i> </i>
</td>
</tr>
<tr>
<td class="x-btn-bl">
<i> </i>
</td>
<td class="x-btn-bc"></td>
<td class="x-btn-br">
<i> </i>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
<td class="x-toolbar-left" align="left">
<table class="x-toolbar-left-ct" cellspacing="0">
<tbody>
<tr>
<td>
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-left-row">
</tr>
</tbody>
</table>
</td>
<td>
<table cellspacing="0">
<tbody>
<tr class="x-toolbar-extras-row">
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<div id="ext-gen137" class="x-clear">
</div>
</div>
</div>
</div>
</div>
</div>
<a id="ext-gen138" class="x-dlg-focus" tabindex="-1" href="http://localhost/bDox/Asn.aspx?n=20112112_18&cid=8ab8ba6a-1de0-4344-bed6-a48b93c497e6&vid=4cf57ca1-78ea-4d6a-94b5-cd20b322a2f8#"> </a>
Note: this only occurs in IE.
I have read several times that IE has issues with floating elements in RTL mode, and that the fix was to set the width to the container of the floating element.
I have done this on the after render event, but to no avail:
newDateField.on('afterrender', function (field) {
var elem = field.getEl(),
p = elem.parent(),
formItem = elem.parent('.x-form-item');
p.setWidth(elem.getWidth());
formItem.setWidth(300);
}, this);
I have also tried removing the DOCTYPE and using a STRICT DOCTYPE. Also no help.
Any suggestions?
Here is my code:
<form id="form1" style="height: 800px; width:1000px" >
<table style="width: 90%; height: 193;">
<tr>
<td class="style4">
<table style="width: 100%; height: 701px;">
<tr>
<td style="height: 587px; width: 629px;" colspan="4" >
<div id="tableTree" style="height:600px;">
<table style="width: 150px;">
<div id="treeboxbox_tree" style="width:280px; height:100%; ">
</div>
</table>
</div>
</td>
</tr>
<tr>
<td >
<input type="button" value="Add" id="btnAdd" onclick="return someMethod()" />
</td>
<td >
//other button
</td>
<td >
//other button
</td>
</tr>
</table>
</td>
<div>
<td>
<table width="100%" id="smth">
<div style="float:left"><%Html.RenderPartial("Something"); %></div>
</table>
</td>
</div>
</tr>
</table>
</form>
And smth is not shown until I click on a button. But since smth has very large height, the td which has style4 goes down, where the middle of smth is. It is very frustrating. How to resolve it?
I think you mean the vertical alignment is off in the td?
<td class="style4">
Change it to
<td class="style4" valign="top">
Or add to style4
vertical-align: top;
Not sure which version of html you are defining...