问:
Allow element to overflow in table with table-layout:fixed
A few threads exist on this topic but none of them have worked for me.

I have a HTML table element containing standard rows and columns, and I am trying to introduce subheaders to break up the data. The subheader needs to overlap (overflow into) a few columns to the right of it as it will often be wider than the first data column

Here's the table

.REMOVETHISANDITWILLWORK {
  /*display:none;*/
}

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <td class="th th1" colspan="14">Contracts</td>
        </tr>
        <tr class="trh trh2 REMOVETHISANDITWILLWORK">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Hardware Maintenance Contract</td>
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div></code>```

In the above the headers display, but its ignored column width and every column has the same width.

When the subheader td's exist the columns in the data lose their width even though its stamped on each TD with a style.

When the subheader td's do not exist or are hidden with display:none (uncomment that bit of css to try it), the columns in the table now size correctly respecting the width specified in style

Its all to do with the formatting of the first row - if we hide the first row, even if subsequent subheaders exist, it works ok. But of course the whole point of headers is you need them at the top.

I've tried giving subheader rows the same number of TD's as the data rows, and the same "width styling", but I then can't get the text to flow out of its TD so it gets chopped. It nearly works with display:inline; on that TD - but that makes the first column in the data rows disappear.

Here's the snippet with the columns how they should be, but the first subheaderrows had to be removed:

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div></code>```

In the above, the columns have the correct width, but we had to remove the first headers to achieve this.

And finally I hope, here's the fiddle with the first subheader row mimicing the data rows - if we can get the text in "This is a long header chopped" to flow out of its TD without messing up the rest of the table, that will do the job.

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <td class="th1" style="width: 30px;">This is a longer header chopped</td>
          <td style="width: 240px;"></td>
          <td style="width: 60px;"></td>
          <td style="width: 130px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="display: none;"></td>
          <td style="display: none;"></td>
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div></code>```

In the above, the columns have the correct width, and the headers are displaying, but the top header is getting chopped because it can only be as wide as the first TD.

答:
Changing the td to a th will solve the issue.

Change:

```<code><td class="th1" style="width: 30px;">This is a longer header chopped</td>
</code>```

To:

```<code><th class="th1" style="width: 30px;">This is a longer header chopped</th>
</code>```

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <th class="th1" style="width: 30px;">This is header is NO longer chopped</th>
          <td style="width: 240px;"></td>
          <td style="width: 60px;"></td>
          <td style="width: 130px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="display: none;"></td>
          <td style="display: none;"></td>
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div></code>```

Body:
A few threads exist on this topic but none of them have worked for me.

I have a HTML table element containing standard rows and columns, and I am trying to introduce subheaders to break up the data. The subheader needs to overlap (overflow into) a few columns to the right of it as it will often be wider than the first data column

Here's the table

.REMOVETHISANDITWILLWORK {
  /*display:none;*/
}

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

          Contracts

          Contracts - Hardware Maintenance Contract

          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          Contracts - Lease

          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          Contracts - Software License Agreement

          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

In the above the headers display, but its ignored column width and every column has the same width.

When the subheader td's exist the columns in the data lose their width even though its stamped on each TD with a style.

When the subheader td's do not exist or are hidden with display:none (uncomment that bit of css to try it), the columns in the table now size correctly respecting the width specified in style

Its all to do with the formatting of the first row - if we hide the first row, even if subsequent subheaders exist, it works ok. But of course the whole point of headers is you need them at the top.

I've tried giving subheader rows the same number of TD's as the data rows, and the same "width styling", but I then can't get the text to flow out of its TD so it gets chopped. It nearly works with display:inline; on that TD - but that makes the first column in the data rows disappear.

Here's the snippet with the columns how they should be, but the first subheaderrows had to be removed:

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          Contracts - Lease

          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          Contracts - Software License Agreement

          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

In the above, the columns have the correct width, but we had to remove the first headers to achieve this.

And finally I hope, here's the fiddle with the first subheader row mimicing the data rows - if we can get the text in "This is a long header chopped" to flow out of its TD without messing up the rest of the table, that will do the job.

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

          This is a longer header chopped

          1622
          IBM Hardware Maintenance Contract 2018-2019
          00534211
          Default Custodian
          Hardware Maintenance Contract

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          Contracts - Lease

          1621
          Server Lease 2018-2019
          00534210
          Default Custodian
          Lease

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          Contracts - Software License Agreement

          1307
          Corporate SPLA Standard Enrollment 938746
          00533896
          Default Custodian
          Software License Agreement
          938746

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

          1308
          Standard OPEN License Confirmation Number 127543
          00533897
          Default Custodian
          Software License Agreement
          127543

          Default Department
          Default Location

          Default Cost Centre
          Contracts
          1

In the above, the columns have the correct width, and the headers are displaying, but the top header is getting chopped because it can only be as wide as the first TD.

Body:
Changing the td to a th will solve the issue.

Change:

<td class="th1" style="width: 30px;">This is a longer header chopped</td>

To:

<th class="th1" style="width: 30px;">This is a longer header chopped</th>

.datatable {
  outline: none;
  font-size: 8pt;
  /* stop chrome highlighting table which is focussed to allow key scrolling */
}

.datatable>.scrollingdiv {
  overflow-y: scroll;
  overflow-x: auto;
}

/* record selectors in first td */

.datatable>.scrollingdiv>table>tbody>tr>td:first-child {
  width: 16px;
  background-color: #eee;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
}

.datatable table {
  table-layout: fixed;
  border-collapse: collapse;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: top;
  text-align: left;
}

.datatable .scrollingdiv tr {
  height: 21px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f0f0;
  border-right: 1px solid #f0f0f0;
}

.datatable .scrollingdiv td {
  overflow: hidden;
  padding: 1px 0 1px 2px;
  border-right: 1px solid #ccc;
  min-height: 13px;
}

.datatable .scrollingdiv tr.trh {
  border-top: 1px solid #777;
  border-bottom: 1px solid #777;
}

.datatable .scrollingdiv .trh td {
  border-right: none;
  background-color: #f4f7fd;
  cursor: default;
}

td.th>div {}

td.th1 {
  font-weight: bold;
}

.th2 {
  font-weight: bold;
}

<div class="datatable" tabindex="0">
  <div class="scrollingdiv" style="height: 797px;">
    <table style="width: 1429px;">
      <tbody>
        <tr class="trh trh1 REMOVETHISANDITWILLWORK">
          <td></td>
          <th class="th1" style="width: 30px;">This is header is NO longer chopped</th>
          <td style="width: 240px;"></td>
          <td style="width: 60px;"></td>
          <td style="width: 130px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 100px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;"></td>
          <td style="display: none;"></td>
          <td style="display: none;"></td>
        </tr>
        <tr data-k0="1622" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1622</td>
          <td class="assetlink ba" style="width: 240px;">IBM Hardware Maintenance Contract 2018-2019</td>
          <td style="width: 60px;">00534211</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Hardware Maintenance Contract</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Lease</td>
        </tr>
        <tr data-k0="1621" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1621</td>
          <td class="assetlink ba" style="width: 240px;">Server Lease 2018-2019</td>
          <td style="width: 60px;">00534210</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Lease</td>
          <td style="width: 150px;"></td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr class="trh trh2">
          <td></td>
          <td class="th th2" colspan="14">Contracts - Software License Agreement</td>
        </tr>
        <tr data-k0="1307" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1307</td>
          <td class="assetlink ba" style="width: 240px;">Corporate SPLA Standard Enrollment 938746</td>
          <td style="width: 60px;">00533896</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">938746</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
        <tr data-k0="1308" data-k1="1" class="">
          <td></td>
          <td style="width: 30px;">1308</td>
          <td class="assetlink ba" style="width: 240px;">Standard OPEN License Confirmation Number 127543</td>
          <td style="width: 60px;">00533897</td>
          <td class="editrecord ba" style="width: 130px;">Default Custodian</td>
          <td style="width: 120px;">Software License Agreement</td>
          <td style="width: 150px;">127543</td>
          <td class="assetlink ba" style="width: 120px;"></td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Department</td>
          <td style="width: 100px;">Default Location</td>
          <td style="width: 150px;"></td>
          <td style="width: 100px;">Default Cost Centre</td>
          <td style="display: none;">Contracts</td>
          <td style="display: none;">1</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>


来源: stackexchange

问:
Transitions on the CSS display property
I'm currently designing a CSS 'mega dropdown' menu - basically a regular CSS-only dropdown menu, but one that contains different types of content.

At the moment, it appears that CSS 3 transitions don't apply to the 'display' property, i.e., you can't do any sort of transition from display: none to display: block (or any combination).

Is there a way for the second-tier menu from the above example to 'fade in' when someone hovers over one of the top level menu items?

I'm aware that you can use transitions on the visibility: property, but I can't think of a way to use that effectively.

I've also tried using height, but that just failed miserably.

I'm also aware that it's trivial to achieve this using JavaScript, but I wanted to challenge myself to use just CSS, and I think I'm coming up a little short.

答:
It is as simple as the following :)

```<code>@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;
</code>```

Get it to fade away, and then make it height 0;. Also make sure to use forwards so that it stays in the final state.

ContentLicense: CC BY-SA 4.0

Title: Transitions on the CSS display property

Body:
It is as simple as the following :)

@keyframes fadeout {
    0% { opacity: 1; height: auto; }
    90% { opacity: 0; height: auto; }
    100% { opacity: 0; height: 0;
}
animation: fadeout linear 0.5s 1 normal forwards !important;

Get it to fade away, and then make it height 0;. Also make sure to use forwards so that it stays in the final state.


问:
How to place a small square box across every td element having text in css?
I am working on a table in html in which I want to place a square box across every td element in css

```<code><tr>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["series_title"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["episode_title"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["description"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["series_title_fr"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["episode_title_fr"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"><?php echo $program["description_fr"]; ?></td>
    <td style="width:8%; text-align:center; border: 1px solid #000; margin-left: 30px;"> <?php echo basename($file, ".mp4"); ?></td>
</tr>
</code>```

The above html/php code display the table/td element in the following fashion:

Problem Statement:

I am wondering what changes I should make in the inline css code above so that I am able to make a small square box (as shown below) across every td element having text in css. At this moment, as shown above in an image it is
making a big square box

答:
Set id for table and set css:</p>

```<code>#table-id td {
    border: 1px solid black;
}
</code>```

Body:
I am working on a table in html in which I want to place a square box across every td element in css

    <?php echo $program["series_title"]; ?>
    <?php echo $program["episode_title"]; ?>
    <?php echo $program["description"]; ?>
    <?php echo $program["series_title_fr"]; ?>
    <?php echo $program["episode_title_fr"]; ?>
    <?php echo $program["description_fr"]; ?>
     <?php echo basename($file, ".mp4"); ?>

The above html/php code display the table/td element in the following fashion:

Problem Statement:

I am wondering what changes I should make in the inline css code above so that I am able to make a small square box (as shown below) across every td element having text in css. At this moment, as shown above in an image it is
making a big square box

Body:
Set id for table and set css:

#table-id td {
    border: 1px solid black;
}


问:
how to play video in asp.net with thumbnail support?
friends,

i am using asp.net 2.0
my requirement is  when form is loaded it should show thumbnail of video in that control first and then on play button click streaming should start.

any one guide me is this possible or not ?
any help would be appreciated.

答:
You can also use Windows Media Player activex control for the job. Take a look at it here.
Another alternative is the use of Silverlight.</p>

ContentLicense: CC BY-SA 2.5

ContentLicense: CC BY-SA 3.0


问:
Serve static files with golang
I'm trying to develop a simple web application but I'mhaving problem with serving my static files.

The file structure is:

main

--main.go

-serve

--listenAndServe.go

--templates

---login.html

---assets

----css

----fonts

----js

my code is this:

```<code>    import (
        "log"
        "net/http"
        "time"

        "github.com/gorilla/mux"
    )

    var (
        router = mux.NewRouter()
    )

    func (c *Conn) ListenAndServe() {
        fs := http.FileServer(http.Dir("./templates/assets"))
        http.Handle("/assets/", http.StripPrefix("/assets/", fs))
        router.HandleFunc("/", c.IndexPageHandler)
        router.HandleFunc("/login.html", c.LoginPageHandler)
        log.Println("Listening...")
        http.Handle("/", router)
        muxWithMiddlewares := http.TimeoutHandler(router, time.Minute*30,
        "Timeout!")
         http.ListenAndServe(":8080", muxWithMiddlewares)
      }
</code>```

But for some reason when I run it from main.go it serves the html but not the assets. I would really apreciate some tips. Thanks!

答:
Try This:

```<code>mux.Handle("/static/", http.StripPrefix("/static", fileServer))
</code>```

Note that static, in your case assets only has a single forward slash within the stripPreFix function.

Hope this helps.

Title: Serve static files with golang

Body:
I'm trying to develop a simple web application but I'mhaving problem with serving my static files.

The file structure is:

main

--main.go

-serve

--listenAndServe.go

--templates

---login.html

---assets

----css

----fonts

----js

my code is this:

    import (
        "log"
        "net/http"
        "time"

        "github.com/gorilla/mux"
    )

    var (
        router = mux.NewRouter()
    )

    func (c *Conn) ListenAndServe() {
        fs := http.FileServer(http.Dir("./templates/assets"))
        http.Handle("/assets/", http.StripPrefix("/assets/", fs))
        router.HandleFunc("/", c.IndexPageHandler)
        router.HandleFunc("/login.html", c.LoginPageHandler)
        log.Println("Listening...")
        http.Handle("/", router)
        muxWithMiddlewares := http.TimeoutHandler(router, time.Minute*30,
        "Timeout!")
         http.ListenAndServe(":8080", muxWithMiddlewares)
      }

But for some reason when I run it from main.go it serves the html but not the assets. I would really apreciate some tips. Thanks!

Body:
Try This:

mux.Handle("/static/", http.StripPrefix("/static", fileServer))

Note that static, in your case assets only has a single forward slash within the stripPreFix function.

Hope this helps.


问:
Extract rundeck executions from DB
I would like to extract my executions of all projects in rundeck directly from DB, my rundeck is in a cluster and DB is in Oracle.

I've tried to do a Select from executions table, but was not what I expected.

答:
A good option is to use Rundeck API wrapped on a bash script. Based on this:

https://github.com/rundeck/rundeck/blob/master/test/api/test-job-executions-status.sh

Check that:

https://docs.rundeck.com/docs/api/#getting-executions-for-a-job

And here a lot of examples:

https://documenter.getpostman.com/view/95797/rundeck/7TNfX9k?version=latest#096b9ef3-0017-931b-4991-235d014185c3

Title: Extract rundeck executions from DB


问:
How to make machine independent and .Net framework(dependency) independent 'EXE' file from .Net
I am creating a project on C#-.Net. The 'exe' file generated from the project is not executable on machines which do not have the .Net already installed. This error is popping up:

To run this application you first must install one of the following versions of the .NET.Framework: V4.0.30319

I don't want to make an installer file which installs the dependency files (.Net FW and other...) on PC.

As project requirement, I want to make an 'exe' that runs on every Windows PC without installing software or dependency sofware -> .Net FW. Just when clicked and the s/w exe should execute.

Is it possible to make such machine independent 'exe' for Windows from .Net ??

答:
"As project requirement, I want to make an 'exe' that runs on every Windows PC without installing software or dependency sofware -> .Net FW. Just when clicked and the s/w exe should execute.".

1) What if the version of Windows doesn't have any .Net Framework?

2) What if the version of Windows doesn't support any version of .Net Framework? (.Net didn't come around until Win2K/ME ish times, and Windows 95 won't take most .Net frameworks, 3.1 / 3.5 wont even take Mono)

"Is it possible to make such machine independent 'exe' for Windows from .Net ??"

Sounds like you're trying to make something like a Setup.exe that can be a single download that will work out the specifics after the fact... Actually the "machine independent" makes even C++ unsuitable, because while C++ will work on Windows, Mac, Linux, Unix, and a whole slew of more exotic systems with x86, x64, i64, PPC, ARM24/32/64 etc. (all of which exist with Windows installed on them, out there, in the wild, but are pretty rare) once the executable is compiled and linked, it will be targeted towards a single CPU architecture and OS. (OS/2, GEM and DOS all use .exe files, and there are some similarities between them, but most other OS don't require any specific file extension for executable binaries)

So, .Net isn't a terrible idea for this reason, any more than a .jar, .pl or .py would be. (which is relatively common for *nix software that you hope will run on Linux, Mac and BSD Unix... maybe even Solaris or HP/UX etc.) If you target MSIL, rather then x86 or x64, then your .exe will run on PPC Windows, DEC Alpha Windows, Itanium Windows, and ARM Windows, as well as the other two. (although this isn't what you are asking about) If you build it without a dependence on the WPF, or other Windows specific GUI engine, it will also work on Mac, Linux and BSD, so long as they have Mono installed. (it just may be worth considering, while you're at it... Versions of Windows Microsoft don't support with the appropriate .Net version will also need Mono to work this way)

To that end, I would recommend building a command-line executable in Mono, rather than .Net development environment. (Mono executable will run on .Net easier than .Net executables run on Mono... Though either is possible if you are careful about the dependencies you include in headers you import into your source)

I've had some success with this, writing a background service that would install on either Windows or Linux with the same binary executable. I used MonoDevelop. (https://www.monodevelop.com/) However, it's really just a flashy IDE around the core Mono development tools. (https://www.mono-project.com/)


问:
Table and Proc dependency
I am new to schema and not sure how the table is being populated  (How the data is being inserted into the table ). How can we find out ?

This should work.

```<code>select *
from dba_source
where upper(text) like '%TABLE_NAME%'
</code>```

But as I do not have DBA rights , can not execute this command. What is the other way to find this out ?

答: If you know the query you need to run but do not have the necessary privileges then perhaps you can write the query using USER_ or ALL_ views to validate the syntax then change the view to DBA_ and ask the DBA to run the query for you.</p>

Title: Table and Proc dependency

Body:
I am new to schema and not sure how the table is being populated  (How the data is being inserted into the table ). How can we find out ?

This should work.

select *
from dba_source
where upper(text) like '%TABLE_NAME%'

But as I do not have DBA rights , can not execute this command. What is the other way to find this out ?


问:
How do I add a string to a Java list in a Transform Message component?
I am setting a var like follow:

```<code><set-variable value='#[[]]' doc:name="Set Doc Array" doc:id="bfb46451-ac45-4d73-8189-5b73cdc300b3" variableName="docHashMap"/>
</code>```

Then I am trying to add elements to that list inside a foreach loop as follow:

```<code><ee:transform doc:name="Transform Message" doc:id="ad2a1dd7-0973-4854-b44c-bdfe8eb54778">
    <ee:message>
        <ee:set-payload><![CDATA[%dw 2.0
import * from dw::core::Binaries
output application/java
---

vars.docHashMap.add({
  "Attachment_Document_Type": vars.factIntakeDocPayload.documentId,
  "Attachement_Content_Type": vars.documentMetadata.contentType,
  "Attachment_Content": toBase64(payload)
})]]></ee:set-payload>
    </ee:message>
</ee:transform>
</code>```

After the loop I have added a Logger component and I am logging the docHashMap variable as follow:

```<code><logger level="WARN" doc:name="Logger" doc:id="482034d9-00c2-4ae1-8fd3-e999f8ece196" message="#[vars.docHashMap]"/>
</code>```

But it is empty meaning what I got on the console is just [], why? What I am missing here? I am new to Mule4 by the way.

答:
Basically what you need to do is to set again the variable with the new name. Use the set-variable</p>

```<code><ee:transform doc:name="Transform Message" doc:id="ad2a1dd7-0973-4854-b44c-bdfe8eb54778">

            <ee:set-variable variableName="docHashMap"><![CDATA[%dw 2.0
    import * from dw::core::Binaries
    output application/java
    ---

    vars.docHashMap + ({
      "Attachment_Document_Type": vars.factIntakeDocPayload.documentId,
      "Attachement_Content_Type": vars.documentMetadata.contentType,
      "Attachment_Content": toBase64(payload)
    })]]></ee:set-variable>

    </ee:transform>
</code>```

Body:
I am setting a var like follow:

<set-variable value='#[[]]' doc:name="Set Doc Array" doc:id="bfb46451-ac45-4d73-8189-5b73cdc300b3" variableName="docHashMap"/>

Then I am trying to add elements to that list inside a foreach loop as follow:

<ee:transform doc:name="Transform Message" doc:id="ad2a1dd7-0973-4854-b44c-bdfe8eb54778">
    <ee:message>
        <ee:set-payload><![CDATA[%dw 2.0
import * from dw::core::Binaries
output application/java
---

vars.docHashMap.add({
  "Attachment_Document_Type": vars.factIntakeDocPayload.documentId,
  "Attachement_Content_Type": vars.documentMetadata.contentType,
  "Attachment_Content": toBase64(payload)
})]]></ee:set-payload>
    </ee:message>
</ee:transform>

After the loop I have added a Logger component and I am logging the docHashMap variable as follow:

<logger level="WARN" doc:name="Logger" doc:id="482034d9-00c2-4ae1-8fd3-e999f8ece196" message="#[vars.docHashMap]"/>

But it is empty meaning what I got on the console is just [], why? What I am missing here? I am new to Mule4 by the way.

Body:
Basically what you need to do is to set again the variable with the new name. Use the set-variable

<ee:transform doc:name="Transform Message" doc:id="ad2a1dd7-0973-4854-b44c-bdfe8eb54778">

            <ee:set-variable variableName="docHashMap"><![CDATA[%dw 2.0
    import * from dw::core::Binaries
    output application/java
    ---

    vars.docHashMap + ({
      "Attachment_Document_Type": vars.factIntakeDocPayload.documentId,
      "Attachement_Content_Type": vars.documentMetadata.contentType,
      "Attachment_Content": toBase64(payload)
    })]]></ee:set-variable>

    </ee:transform>


问:
Macro to Get Data from Iseries (AS400) using Excel VBA
I am getting data from AS400 via Excel add-in and I'm trying to find an automated to do this because I have to do this many times with various source files and it's annoying to constantly to having to log in whenever I use a new source file.

For instance, for the source file "bond.tto" I would do this to download it:

In Excel,
go to "Add-Ins" --> "Transfer Data from iSeries." A "Transfer Request" window pops up and from there I choose "create a new file"... the path and the file name is c:\bond.tto.

"starting cell position" I chose column A and row 1 and click "include column headings."  I press "OK."

then I enter my credentials which let's say my user name is "abc" and pw is "abc."  The server...let's call it "BLUE.TOR.MCFLY.COM."

Could somebody suggest code to automate this?  Please and thank you.

The macro recorder doesn't give me any lines of code to work with.
No errors as the macro recorder doesn't work.

答:
As a side note, you can also use open JT400 in java to use DB2 SQL to query your tables.

Using VBA you can also use queries as follows:

The code I am using here is primarily from VBA New Database Connection.

However, of importance to you is your database connection string.
This is using the Client Access ODBC driver to connect to an IBM i DB2 database on a server with the name POWER7 and other options. The "translate" option I believe takes it from the 65535 CSSID and converts it to something nice from EBDIC.

```<code>

Sub DbConnection()

    Dim cn As Object ' ADODB.Connection
    Set cn = CreateObject("ADODB.Connection") ' New ADODB.Connection
    Dim rs As Object ' ADODB.Recordset

    Dim strConn As String
    strConn = "DRIVER={Client Access ODBC Driver (32-bit)};" & _
                "Database=<myDataBase>;" & _
                "Hostname=<POWER7>;" & _
                "Port=1234;" & _
                "Protocol=TCPIP;" & _
                "Uid=<USERID>;" & _
                "Pwd=<PASSWORD>;" & _
                "SYSTEM=<POWER7>;" & _
                "DBQ=QGPL <YOUR BASE LIBRARY> <ANOTHER>;" & _
                "DFTPKGLIB=QGPL;" & _
                "LANGUAGEID=ENU;" & _
                "PKG=QGPL/DEFAULT(IBM),2,0,1,0,512;QRYSTGLMT=-1;" & _
                "TRANSLATE=1;" & _
                "CONNTYPE=2;" & _
                "REGIONAL=NO;"

    cn.Open strConn

    Dim queryArr, i
    queryArr = Array("SELECT * FROM <LIBRARY>.<TABLE>")

    For i = LBound(queryArr) To UBound(queryArr)
        ExecuteQuery queryArr(i), cn, rs
    Next i

    cn.Close
    Set cn = Nothing
End Sub

Private Sub ExecuteQuery(query As Variant, ByRef cn As Object, ByRef rs As Object)
    Set rs = CreateObject("ADODB.Recordset") ' New ADODB.Recordset
    With rs
        .ActiveConnection = cn
        .Open CStr(query)
        Sheets("Sheet1").Range("A1").CopyFromRecordset rs
        .Close
    End With
    Set rs = Nothing
End Sub

</code>```

Body:
As a side note, you can also use open JT400 in java to use DB2 SQL to query your tables.

Using VBA you can also use queries as follows:

The code I am using here is primarily from VBA New Database Connection.

However, of importance to you is your database connection string.
This is using the Client Access ODBC driver to connect to an IBM i DB2 database on a server with the name POWER7 and other options. The "translate" option I believe takes it from the 65535 CSSID and converts it to something nice from EBDIC.

Sub DbConnection()

    Dim cn As Object ' ADODB.Connection
    Set cn = CreateObject("ADODB.Connection") ' New ADODB.Connection
    Dim rs As Object ' ADODB.Recordset

    Dim strConn As String
    strConn = "DRIVER={Client Access ODBC Driver (32-bit)};" & _
                "Database=<myDataBase>;" & _
                "Hostname=<POWER7>;" & _
                "Port=1234;" & _
                "Protocol=TCPIP;" & _
                "Uid=<USERID>;" & _
                "Pwd=<PASSWORD>;" & _
                "SYSTEM=<POWER7>;" & _
                "DBQ=QGPL <YOUR BASE LIBRARY> <ANOTHER>;" & _
                "DFTPKGLIB=QGPL;" & _
                "LANGUAGEID=ENU;" & _
                "PKG=QGPL/DEFAULT(IBM),2,0,1,0,512;QRYSTGLMT=-1;" & _
                "TRANSLATE=1;" & _
                "CONNTYPE=2;" & _
                "REGIONAL=NO;"

    cn.Open strConn

    Dim queryArr, i
    queryArr = Array("SELECT * FROM <LIBRARY>.<TABLE>")

    For i = LBound(queryArr) To UBound(queryArr)
        ExecuteQuery queryArr(i), cn, rs
    Next i

    cn.Close
    Set cn = Nothing
End Sub

Private Sub ExecuteQuery(query As Variant, ByRef cn As Object, ByRef rs As Object)
    Set rs = CreateObject("ADODB.Recordset") ' New ADODB.Recordset
    With rs
        .ActiveConnection = cn
        .Open CStr(query)
        Sheets("Sheet1").Range("A1").CopyFromRecordset rs
        .Close
    End With
    Set rs = Nothing
End Sub


问:
Difference between events and delegates and its respective applications
I don't see advantages of using events over delegates, other than being syntactical sugar. Perhaps I am misunderstanding, but it seems that event is just a placeholder for delegate.

Would you explain to me the differences and when to use which?  What are the advantages and disadvantages? Our code is heavily rooted with events, and I want to get to the bottom of it.

When would you use delegates over events and vice versa? Please state your real world experience with both, say in the production code.

答:
From the technical standpoint, other answers have addressed the differences.

From a semantics perspective, events are actions raised by an object when certain conditions are met. For example, my Stock class has a property called Limit, and it raises an event when the stock prices reaches the Limit. This notification is done via an event. Whether anyone actually cares about this event and subscribes to it is beyond the concern of the owner class.

A delegate is a more generic term to describe a construct similar to a pointer in C/C++ terms. All delegates in .Net are multicast delegates. From a semantics perspective, they are generally used as a kind of input. In particular, they are a perfect way to implement the Strategy Pattern. For example, if I want to sort a List of objects, I can provide a Comparator strategy to the method to tell the implementation how to compare two objects.

I have used the two methods in production code. Tons of my data objects notify when certain properties are met. Most basic example, whenever a property changes, a PropertyChanged event is raised (see INotifyPropertyChanged interface). I have used delegates in code to provide different strategies of turning certain objects into string. This particular example was a glorified ToString() list of implementations for a particular object type to display it to users.

OwnerDisplayName: Sasha

LastEditorDisplayName: RoBorg

OwnerDisplayName: siz

LastEditorDisplayName: siz


问:
Get column value onClick in nested HTML Table [Javascript]
I have a nested HTML table which expands on click. When I click inner row, I would like to get column value. Right now, I am getting the column value on click of outer row.
For instance in the below image, when I click coding/testing, I would like to pass an alert as "Place". Right now, I get alert as "place" when I click city.

Component:

```<code> trigger(){
  var table: any = document.getElementById("table");
  var rows = table.rows;
  for (var i = 0; i < rows.length; i++) {
  rows[i].onclick = (function (e) {
    var j = 0;
    var td = e.target;
    while( (td = td.previousElementSibling) != null )
        j++;
    alert(rows[0].cells[j].innerHTML);
 });
 }
 }
</code>```

Demo

答:
I'm not sure why you have this code in your trigger function. But, if you need to get the column name when a data cell is clicked, you can use the following approach.

Inject into your trigger function call a current event object and your header row element template variable:

```<code><table class="table table-hover table-bordered table-responsive-xl" id="table">
    <tr #header>
    </tr>
    <tbody>
        <ng-container *ngFor="let data of data1">
            <ng-container *ngIf="data.expanded">
                <tr *ngFor="let data of findDetails(data)" (click)="trigger($event, header)">
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>
</code>```

So, #header name is assigned to the first tr element and then it's passed along with $event to the trigger function.

In your trigger function, consume these two parameters. $event will be a regular MouseEvent object and header will be a regular tr element. After this, you can find the clicked column header by the clicked cell index in your row. gsnedders in the StackOverflow thread provided a solution for how to find the element index inside its parent. Your trigger function may look like:

```<code>trigger($event, header) {
  const index = this.getChildNumber($event.target);
  alert(header.childNodes[index].textContent.trim());
}
</code>```

This StackBlitz project illustrates this approach.

Body:
I have a nested HTML table which expands on click. When I click inner row, I would like to get column value. Right now, I am getting the column value on click of outer row.
For instance in the below image, when I click coding/testing, I would like to pass an alert as "Place". Right now, I get alert as "place" when I click city.

Component:

 trigger(){
  var table: any = document.getElementById("table");
  var rows = table.rows;
  for (var i = 0; i < rows.length; i++) {
  rows[i].onclick = (function (e) {
    var j = 0;
    var td = e.target;
    while( (td = td.previousElementSibling) != null )
        j++;
    alert(rows[0].cells[j].innerHTML);
 });
 }
 }

Demo

Body:
I'm not sure why you have this code in your trigger function. But, if you need to get the column name when a data cell is clicked, you can use the following approach.

Inject into your trigger function call a current event object and your header row element template variable:

<table class="table table-hover table-bordered table-responsive-xl" id="table">
    <tr #header>
    </tr>
    <tbody>
        <ng-container *ngFor="let data of data1">
            <ng-container *ngIf="data.expanded">
                <tr *ngFor="let data of findDetails(data)" (click)="trigger($event, header)">
                </tr>
            </ng-container>
        </ng-container>
    </tbody>
</table>

So, #header name is assigned to the first tr element and then it's passed along with $event to the trigger function.

In your trigger function, consume these two parameters. $event will be a regular MouseEvent object and header will be a regular tr element. After this, you can find the clicked column header by the clicked cell index in your row. gsnedders in the StackOverflow thread provided a solution for how to find the element index inside its parent. Your trigger function may look like:

trigger($event, header) {
  const index = this.getChildNumber($event.target);
  alert(header.childNodes[index].textContent.trim());
}

This StackBlitz project illustrates this approach.


问:
command line sftp: email address as username
I need to connect to an sftp server from Mac OS X and the username given is an email address (someone@example.com)

So my connection string looks like:

```<code>sftp someone@example.com@ftp.example.com
</code>```

The connection does not accept the password so I assume it is confused by the double "@".

I tried to escape the first "@" with "\@" But that crashed the sftp server and would only have an effect for the shell I'd think.

What is the proper way to escape this in order to get it to work.

Unfortunately the sftp command on Mac OS X does not allow me an option for interactive username prompt.

答: As a workaround I use YummyFTP. It bypasses a lot of the complicated options and gives you a visual interface. It has been a time saver for me with lots of different sites to interact with.</p>

Body:
I need to connect to an sftp server from Mac OS X and the username given is an email address (someone@example.com)

So my connection string looks like:

sftp someone@example.com@ftp.example.com

The connection does not accept the password so I assume it is confused by the double "@".

I tried to escape the first "@" with "\@" But that crashed the sftp server and would only have an effect for the shell I'd think.

What is the proper way to escape this in order to get it to work.

Unfortunately the sftp command on Mac OS X does not allow me an option for interactive username prompt.


问:
How to continuously deploy from jenkins to Kubernetes
i have a Maven project on my local machine and a docker image in my repo and im using gitlab and jenkins to automate builds, and now with current setup I want to continously deploy to Kubernetes. I have no idea on how this is done. Any input will be appreciated.

my yaml file looks like this

apiVersion: v1
kind: Pod
metadata:
  name: client-pod
  labels:
    component: web
spec:
  containers:
    - name: client
      image: <image>
      ports:
        - containerPort: 3000```

答:
Once the image is built and pushed to the container repository you just have to set the new image</p>

```<code>>>> docker build -t repo-name/whatever-app:<version>
>>> docker push repo-name/whatever-app:<version>
>>> kubectl set image deployment/my-deployment mycontainer=repo-name/whatever-app:<version>
</code>```

Body:
Once the image is built and pushed to the container repository you just have to set the new image

>>> docker build -t repo-name/whatever-app:<version>
>>> docker push repo-name/whatever-app:<version>
>>> kubectl set image deployment/my-deployment mycontainer=repo-name/whatever-app:<version>


问:
How can I add an onclick event to an HTMLAnchorElement?
I'm working on an ionic app. As a part of this app, I'm sending a get request and get an html page. Now, I need to present it in my app. I've tried to present it in an iframe using the srcdoc but the web page has links to another pages and when it is being clicked I need to provide an Authorization header. Therefore I decided I should take the html string and manipulate it so when the anchor is being clicked it will call a function and send a get request with the authorization head (to the href url)

I'm converting my html string to a Document object and get all the "a" items:

```<code>var doc = (new DOMParser).parseFromString(this.htmlPage, "text/html");
var links = doc.body.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
      const element = links.item(i);
      var self = this;
      element.onclick = function() {
        self.redirect(element.href);
      };
      element.removeAttribute("href");
    }
</code>```

The href attribute is being removed but the onclick event is not added. How can I fix it?

答:
Figured it out.
Just did:

```<code>element.addEventListener("click", () => {
    this.redirect(element.href);
  });
</code>```

and then added to the page by calling:

```<code>this.webview.nativeElement.appendChild(doc.body);
</code>```

Body:
I'm working on an ionic app. As a part of this app, I'm sending a get request and get an html page. Now, I need to present it in my app. I've tried to present it in an iframe using the srcdoc but the web page has links to another pages and when it is being clicked I need to provide an Authorization header. Therefore I decided I should take the html string and manipulate it so when the anchor is being clicked it will call a function and send a get request with the authorization head (to the href url)

I'm converting my html string to a Document object and get all the "a" items:

var doc = (new DOMParser).parseFromString(this.htmlPage, "text/html");
var links = doc.body.getElementsByTagName("a");
for (let i = 0; i < links.length; i++) {
      const element = links.item(i);
      var self = this;
      element.onclick = function() {
        self.redirect(element.href);
      };
      element.removeAttribute("href");
    }

The href attribute is being removed but the onclick event is not added. How can I fix it?

Body:
Figured it out.
Just did:

element.addEventListener("click", () => {
    this.redirect(element.href);
  });

and then added to the page by calling:

this.webview.nativeElement.appendChild(doc.body);


问:
How to extract address in excel?
I have addresses in one cell and I want to extract them in different cells on the same row. Some cells have four lines of address and some have three. I am able to easily split using text to column and various delimiters for the ones with three but not the ones with four.

enter image description here

In the first example I have four lines and second has three

```<code>Anchorage Oncology Centre
3801 University Lake Drive
Suite 300-B2
Anchorage, AK 99508 US
</code>```

I would like the above as split into 5 cells. One cell each for address, City, State, Zip code and country

```<code>Anchorage Oncology Centre
3801 University Lake Drive
Suite 300-B2

Anchorage

AK

99508

US
</code>```

in second example below

```<code>Providence Alaska Medical Center
3200 Providence Drive
Anchorage, AK 99508 US
</code>```

I would like

```<code>Providence Alaska Medical Center
3200 Providence Drive

Anchorage

AK

99508

US
</code>```

Could this be done using a formula?

What I have done so far is that the full address is in cell A1 and I want them in B1, C1, D1, E1, and F1. What i have done is for the country I use =RIGHT(A2,2), zip code, i use =MID(A2, LEN(A2)-7, 5), state =MID(A2, LEN(A2)-10, 2). Now I am trying to extract the city. The city is before the comma and after the line break (Char(10)) and Address is first 2 or 3 lines. I don't know how to do that.

There is a line break between each line.

Thank you

答:
If you use SUBSTITUTE() you can substitute the n'th occurrence of a character with a new character, then use FIND() to return that character. For example, if you SUBSTITUTE your CHAR(10), the third occurrence, you can find that character again that would be the end of the address.

So if your FULL address is in A1, then you could extract the address with LEFT(A1,FIND("~",SUBSTITUTE(A1,CHAR(10),"~",3)))

Title: How to extract address in excel?

Body:
I have addresses in one cell and I want to extract them in different cells on the same row. Some cells have four lines of address and some have three. I am able to easily split using text to column and various delimiters for the ones with three but not the ones with four.

enter image description here

In the first example I have four lines and second has three

Anchorage Oncology Centre
3801 University Lake Drive
Suite 300-B2
Anchorage, AK 99508 US

I would like the above as split into 5 cells. One cell each for address, City, State, Zip code and country

Anchorage Oncology Centre
3801 University Lake Drive
Suite 300-B2

Anchorage

AK

99508

US

in second example below

Providence Alaska Medical Center
3200 Providence Drive
Anchorage, AK 99508 US

I would like

Providence Alaska Medical Center
3200 Providence Drive

Anchorage

AK

99508

US

Could this be done using a formula?

What I have done so far is that the full address is in cell A1 and I want them in B1, C1, D1, E1, and F1. What i have done is for the country I use =RIGHT(A2,2), zip code, i use =MID(A2, LEN(A2)-7, 5), state =MID(A2, LEN(A2)-10, 2). Now I am trying to extract the city. The city is before the comma and after the line break (Char(10)) and Address is first 2 or 3 lines. I don't know how to do that.

There is a line break between each line.

Thank you


问:
Kittens - ambiguous imports
I have taken the following code almost entirely from the 'derive show' example found here: https://github.com/milessabin/kittens

```<code>import cats._, cats.derived._, cats.implicits._

object Test extends App {

  case class Address(street: String, city: String, state: String)

  case class ContactInfo(phoneNumber: String, address: Address)

  case class People(name: String, age: Double,  contactInfo: ContactInfo)

  val mike = People("Mike", 1.23,  ContactInfo("202-295-3928", Address("1 Main ST", "Chicago", "IL")))

  implicit val addressShow: Show[Address] = new Show[Address] {
    def show(a: Address) = s"${a.street}, ${a.city}, ${a.state}"
  }

//  I would like to use a custom version of Show for Doubles...
//  implicit val doubleShow: Show[Double] = new Show[Double] {
//    def show(d: Double) = s"Custom Double Show: $d"
//  }

  implicit val peopleShow: Show[People] = {
    import auto.show._
    semi.show
  }

  println(mike.show)

}
</code>```

I would like to be able to use a custom version of Show[Double] (I don't really, but this is a nice minimal example which illustrate the problem I'm actually having)

If I un-comment my doubleShow I get the following error:

```<code>Error:(25, 10) ambiguous implicit values:
 both value emptyProductDerivedShow in trait MkShowDerivation of type => cats.derived.MkShow[shapeless.HNil]
 and method emptyCoproductDerivedShow in trait MkShowDerivation of type => cats.derived.MkShow[shapeless.CNil]
 match expected type cats.derived.MkShow[A]
    semi.show
</code>```

How can I get this working? I would have expected my locally defined implicits to win out over any imported from cats...

答:
Try implicit object instead of implicit val

```<code>implicit object doubleShow extends Show[Double] {
  def show(d: Double) = s"Custom Double Show: $d"
}
</code>```

or use implicit val and change imports (don't import cats.instances.double._)

```<code>import cats._, cats.derived._
import cats.syntax.show._
import cats.instances.string._ // People uses String and Double

implicit val doubleShow: Show[Double] = new Show[Double] {
  def show(d: Double) = s"Custom Double Show: $d"
}
</code>```

Title: Kittens - ambiguous imports

Body:
I have taken the following code almost entirely from the 'derive show' example found here: https://github.com/milessabin/kittens

import cats._, cats.derived._, cats.implicits._

object Test extends App {

  case class Address(street: String, city: String, state: String)

  case class ContactInfo(phoneNumber: String, address: Address)

  case class People(name: String, age: Double,  contactInfo: ContactInfo)

  val mike = People("Mike", 1.23,  ContactInfo("202-295-3928", Address("1 Main ST", "Chicago", "IL")))

  implicit val addressShow: Show[Address] = new Show[Address] {
    def show(a: Address) = s"${a.street}, ${a.city}, ${a.state}"
  }

//  I would like to use a custom version of Show for Doubles...
//  implicit val doubleShow: Show[Double] = new Show[Double] {
//    def show(d: Double) = s"Custom Double Show: $d"
//  }

  implicit val peopleShow: Show[People] = {
    import auto.show._
    semi.show
  }

  println(mike.show)

}

I would like to be able to use a custom version of Show[Double] (I don't really, but this is a nice minimal example which illustrate the problem I'm actually having)

If I un-comment my doubleShow I get the following error:

Error:(25, 10) ambiguous implicit values:
 both value emptyProductDerivedShow in trait MkShowDerivation of type => cats.derived.MkShow[shapeless.HNil]
 and method emptyCoproductDerivedShow in trait MkShowDerivation of type => cats.derived.MkShow[shapeless.CNil]
 match expected type cats.derived.MkShow[A]
    semi.show

How can I get this working? I would have expected my locally defined implicits to win out over any imported from cats...

Body:
Try implicit object instead of implicit val

implicit object doubleShow extends Show[Double] {
  def show(d: Double) = s"Custom Double Show: $d"
}

or use implicit val and change imports (don't import cats.instances.double._)

import cats._, cats.derived._
import cats.syntax.show._
import cats.instances.string._ // People uses String and Double

implicit val doubleShow: Show[Double] = new Show[Double] {
  def show(d: Double) = s"Custom Double Show: $d"
}


问:
Jquery hide and show content in div on hover errors on fast mouse movement
I'm having an issue with menu buttons using jquery to show and hide two images in the button on mouseover. If a user mouses in and then out before the animation is complete both images will show.

Jsfiddle at: https://jsfiddle.net/wckilby/d8wrs1gf/1/

HTML:

```<code><div id="wrapper">
  <img id="flag" src="https://dev.creativeforthepeople.org/assets/globals/flag-icon.svg">
  <img id="name" src="https://dev.creativeforthepeople.org/assets/globals/cftp-logo.svg">
</div>
</code>```

JS:

```<code>$(document).ready(function () {
  $( "#wrapper" ).mouseenter(function() {
    $( "#flag" ).fadeOut(150);
    $( "#wrapper" ).css("width", "360px");
    $( "#name" ).delay(150).fadeIn(150);
  });
  $( "#wrapper" ).mouseleave(function() {
     $( "#name" ).hide();
     $( "#wrapper" ).css("width", "40px");
     $( "#flag" ).delay(150).fadeIn(150);
  });
});
</code>```

答:
You can call finish() to force an animation to finish before its duration.

// Home button hover effects
$(document).ready(function () {
 if($(window).width() >= 576) {
  $( "#wrapper" ).mouseenter(function() {
   $( "#flag" ).finish().fadeOut(150);
   $( "#wrapper" ).css("width", "360px");
   $( "#name" ).finish().delay(150).fadeIn(150);
  });
  $( "#wrapper" ).mouseleave(function() {
   $( "#name" ).finish().hide();
   $( "#wrapper" ).css("width", "40px");
   $( "#flag" ).finish().delay(150).fadeIn(150);
  });
 }
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>#flag {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

#name {
  display: none;
  height: 18px;
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

#wrapper {
  position: relative;
  transition: all 0.15s;
  background: #e5515f;
  border-radius: 50px;
  height: 40px;
  text-align: center;
  width: 40px;
}</code>```

```

Body:
I'm having an issue with menu buttons using jquery to show and hide two images in the button on mouseover. If a user mouses in and then out before the animation is complete both images will show.

Jsfiddle at: https://jsfiddle.net/wckilby/d8wrs1gf/1/

HTML:

JS:

$(document).ready(function () {
  $( "#wrapper" ).mouseenter(function() {
    $( "#flag" ).fadeOut(150);
    $( "#wrapper" ).css("width", "360px");
    $( "#name" ).delay(150).fadeIn(150);
  });
  $( "#wrapper" ).mouseleave(function() {
     $( "#name" ).hide();
     $( "#wrapper" ).css("width", "40px");
     $( "#flag" ).delay(150).fadeIn(150);
  });
});

Body:
You can call finish() to force an animation to finish before its duration.

// Home button hover effects
$(document).ready(function () {
 if($(window).width() >= 576) {
  $( "#wrapper" ).mouseenter(function() {
   $( "#flag" ).finish().fadeOut(150);
   $( "#wrapper" ).css("width", "360px");
   $( "#name" ).finish().delay(150).fadeIn(150);
  });
  $( "#wrapper" ).mouseleave(function() {
   $( "#name" ).finish().hide();
   $( "#wrapper" ).css("width", "40px");
   $( "#flag" ).finish().delay(150).fadeIn(150);
  });
 }
});

#flag {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

#name {
  display: none;
  height: 18px;
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

#wrapper {
  position: relative;
  transition: all 0.15s;
  background: #e5515f;
  border-radius: 50px;
  height: 40px;
  text-align: center;
  width: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <img id="flag" src="https://dev.creativeforthepeople.org/assets/globals/flag-icon.svg">
  <img id="name" src="https://dev.creativeforthepeople.org/assets/globals/cftp-logo.svg">
</div>


问:
Android Studio Logcat not showing logs
There is very awkward thing I am facing. Logcat is shown in debugging application, but while running (not debugging) application, it is not showing Logcat.

I tried restarting it but nothing is happening.

答:
Try the following Steps:-

Step 1.
Goto File > Invalidate Caches and Restart > Invalidate and Restart.
Android Studio will restart automatically and logcat will work as expected.

Refer screenshots :

Step 2.
If Step(1) didn't worked then try this :
Goto Terminal > cd till your platform-tools directory (eg. in Windows default location is C:\Users\\AppData\Local\Android\Sdk\platform-tools).
Now type following command :

adb kill-server

adb start-server

Step 3:
If Step(1)&(2) both didn't worked then simply try clicking on Re-Start Logging button available in Logcat option. Refer screenshot - (Green colour curved arrow with grey box)

Title: Android Studio Logcat not showing logs


问:
Getting an InvalidCharacterError when running app through UWP and Visual Studio
This code is generated through BuckleScript -> JS, I can't see where the invalid character is.

However, I think that this may be an issue where UWP doesn't allow access to the internalhost as a feature, and thus is throwing an error.

I have already added a loop-back exception added the SID and that. I have run CheckNetIsolation LoopbackExempt -is -n=packageFamilyName.

```<code>function getJidFromUrl(url) {
  var match = url[
  /* path */
  0];

  if (match && !match[1]) {
    var jidString = atob(match[0]); //error line here
    return toJid(jidString);
  }
}
</code>```

Unhandled exception at line *, column 5 in index.bs.js

0x800a139e - JavaScript runtime error: InvalidCharacterError

答:
Perhaps you meant to write

```<code>atob(match);
</code>```

and not

```<code>atob(match[0]);
</code>```

considering you're doing

```<code>var match = url[0];
</code>```

Body:
This code is generated through BuckleScript -> JS, I can't see where the invalid character is.

However, I think that this may be an issue where UWP doesn't allow access to the internalhost as a feature, and thus is throwing an error.

I have already added a loop-back exception added the SID and that. I have run CheckNetIsolation LoopbackExempt -is -n=packageFamilyName.

function getJidFromUrl(url) {
  var match = url[
  /* path */
  0];

  if (match && !match[1]) {
    var jidString = atob(match[0]); //error line here
    return toJid(jidString);
  }
}

Unhandled exception at line *, column 5 in index.bs.js

0x800a139e - JavaScript runtime error: InvalidCharacterError

Body:
Perhaps you meant to write

atob(match);

and not

atob(match[0]);

considering you're doing

var match = url[0];


问:
How can I keep Google Cloud Functions warm?
I know this may miss the point of using Cloud Functions in the first place, but in my specific case, I'm using Cloud Functions because it's the only way I can bridge Next.js with Firebase Hosting. I don't need to make it cost efficient, etc.

With that said, the cold boot times for Cloud Functions are simply unbearable and not production-ready, averaging around 10 to 15 seconds for my boilerplate.

I've watched this video by Google (https://www.youtube.com/watch?v=IOXrwFqR6kY) that talks about how to reduce cold boot time. In a nutshell: 1) Trim dependencies, 2) Trial & error for dependencies' versions for cache on Google's network, 3) Lazy loading.

But 1) there are only so many dependencies I can trim. 2) How would I know which version is more cached? 3) There are only so many dependencies I can lazy load.

Another way is to avoid the cold boot all together. What's a good way or hack that I can essentially keep my (one and only) cloud function warm?

答: You can trigger it via cron job as explained here: https://cloud.google.com/scheduler/docs/creating</p>


问:
Dynamic vs JObject for JSON deserialization
Let's say I have the following string:

```<code> string MyString = @"{""name"":""John"",""url"":""https://www.john.com""}";
</code>```

And I can deserialize it two ways like:

```<code>JObject jobj = (JObject)JsonConvert.DeserializeObject(MyString);
dynamic jobj2 = JsonConvert.DeserializeObject(MyString);
</code>```

When I do a GetType of both objects I get for both:

```<code>Newtonsoft.Json.Linq.JObject
</code>```

Yet when I log jobj2.name I get John but when I log jobj.name I get:

```<code>Newtonsoft.Json.Linq.JObject' does not contain a definition for 'name' and no extension method 'name' accepting a first argument of type 'Newtonsoft.Json.Linq.JObject'
</code>```

And have to call it like jobj["name"]

What is the reason for the different syntax since both are JObject?

答: The reason is that JObject (or rather one of its base classes) implements  IDynamicMetaObjectProvider. This interface allows objects to customize how dynamic expressions are resolved, rather than just reflecting over their public members. This is also how ExpandoObject works.

Body:
Let's say I have the following string:

 string MyString = @"{""name"":""John"",""url"":""https://www.john.com""}";

And I can deserialize it two ways like:

JObject jobj = (JObject)JsonConvert.DeserializeObject(MyString);
dynamic jobj2 = JsonConvert.DeserializeObject(MyString);

When I do a GetType of both objects I get for both:

Newtonsoft.Json.Linq.JObject

Yet when I log jobj2.name I get John but when I log jobj.name I get:

Newtonsoft.Json.Linq.JObject' does not contain a definition for 'name' and no extension method 'name' accepting a first argument of type 'Newtonsoft.Json.Linq.JObject'

And have to call it like jobj["name"]

What is the reason for the different syntax since both are JObject?


答:
To prevent this behaviour this you can call stop() before you perform any further animations within each event handler:

$(document).ready(function() {
  $("#wrapper").mouseenter(function() {
    $("#flag").stop(true).fadeOut(150);
    $("#wrapper").css("width", "360px");
    $("#name").delay(150).fadeIn(150);
  });

  $("#wrapper").mouseleave(function() {
    $("#name").stop(true).hide();
    $("#wrapper").css("width", "40px");
    $("#flag").delay(150).fadeIn(150);
  });
});```
<pre class="snippet-code-css lang-css prettyprint-override"><code>#flag {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

#name {
  display: none;
  height: 18px;
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

#wrapper {
  position: relative;
  transition: all 0.15s;
  background: #e5515f;
  border-radius: 50px;
  height: 40px;
  text-align: center;
  width: 40px;
}</code>```

```

Title: Jquery hide and show content in div on hover errors on fast mouse movement

Body:
To prevent this behaviour this you can call stop() before you perform any further animations within each event handler:

$(document).ready(function() {
  $("#wrapper").mouseenter(function() {
    $("#flag").stop(true).fadeOut(150);
    $("#wrapper").css("width", "360px");
    $("#name").delay(150).fadeIn(150);
  });

  $("#wrapper").mouseleave(function() {
    $("#name").stop(true).hide();
    $("#wrapper").css("width", "40px");
    $("#flag").delay(150).fadeIn(150);
  });
});

#flag {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}

#name {
  display: none;
  height: 18px;
  position: absolute;
  top: 50%;
  left: calc(50% + 1px);
  transform: translate(-50%, -50%);
}

#wrapper {
  position: relative;
  transition: all 0.15s;
  background: #e5515f;
  border-radius: 50px;
  height: 40px;
  text-align: center;
  width: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
  <img id="flag" src="https://dev.creativeforthepeople.org/assets/globals/flag-icon.svg">
  <img id="name" src="https://dev.creativeforthepeople.org/assets/globals/cftp-logo.svg">
</div>


问:
What is best control in Java for simple editor
I need to implement light editor ( recognize part of key words, syntax highlight and suggest all of word in dropdown list if user type part with same prefix). What is best control in Java for this task ?</p>

答: You could use JEditTextArea as a start point.


问:
Native code in C#?
I was watching the Microsoft build conference from October last year and I noticed they announced that for building the new Metro style apps, developers can write native code in C#. How is this possible? I'm just curious. Wasn't C# designed (as part of CLI standards) to first be compiled to intermediate byte code and then run on a virtual machine? How can something that runs on a virtual machine be called "native code"?</p>

答:
The CoreRT project is an example of trying to natively compile C#.

https://msdn.microsoft.com/en-us/magazine/mt830370.aspx

Title: Native code in C#?


问:
On changing input using ajax only 1st row works not all
When I try to change the number of quantity and then I want to update the total price according to that...using ajax but only first row works and all others rows does not work. Ajax request is only working for 1st rows not for other rows.

Cart Page :

DB Structure :

cart.php

```<code><tbody>
                    <?php
                        require_once 'config.php';
                        $stmt = $conn->prepare("SELECT * FROM cart");
                        $stmt->execute();
                        $result = $stmt->get_result();
                        $sum = 0;
                        while($row = $result->fetch_assoc()):
                    ?>
                    <tr>
                        <td><?= $row['id'] ?></td>
                        <input id="pid" type="hidden" value="<?= $row['id'] ?>">
                        <td><img src="<?= $row['product_image'] ?>" width="50"></td>
                        <td><?= $row['product_name'] ?></td>
                        <td>Rs. <?= number_format($row['product_price'],2) ?></td>
                        <input type="hidden" value="<?= $row['product_price'] ?>" id="pprice">
                        <td><input type="number" class="form-control" value="<?= $row['qty'] ?>" id="itemQty" style="width:75px;"></td>
                        <td>Rs. <?= number_format($row['total_price'],2) ?></td>
                        <td><a href="action.php?remove=<?= $row['id'] ?>" class="badge-danger badge">Remove</a></td>
                    </tr>
                    <?php $sum += $row['total_price']; ?>
                <?php endwhile; ?>
                <tr>
                    <td colspan="5"><b>Grand Total</b></td>
                    <td><b>Rs. <?= number_format($sum,2); ?></b></td>
                    <td><a href="#" class="btn btn-info">Checkout</a></td>
                </tr>
                </tbody>
</code>```

ajax code

```<code>$("#itemQty").on('change',function(){
            var qty = $(this).val();
            var pid = $("#pid").val();
            var pprice = $("#pprice").val();
            location.reload(true);
            $.ajax({
                url: 'action.php',
                method: 'post',
                cache: false,
                data: {qty:qty,pid:pid,pprice:pprice},
                success: function(response){
                    console.log(response);
                }
            });
        });
</code>```

action.php

```<code>if(isset($_POST['qty'])){
        $qty = $_POST['qty'];
        $pid = $_POST['pid'];
        $pprice = $_POST['pprice'];
        $tprice = $qty*$pprice;

        $stmt = $conn->prepare("UPDATE cart SET qty=?,total_price=? WHERE id=?");
        $stmt->bind_param("iis",$qty,$tprice,$pid);
        $stmt->execute();
    }
</code>```

答:
Yes, because you use id and it takes element from first row. You should use class instead of id:

id="pid" change by class="pid"

id="itemQty" change by class="itemQty"
etc.

And take element from current row. Something like this:

```<code>$(".itemQty").on('change',function(){

    var $el = $(this).closest('tr'); //Find parent tr element
    var qty = $(this).val();
    var pid = $el.find(".pid").val(); //Find element with class pid in current tr ($el)
    var pprice = $el.find(".pprice").val();

    $.ajax({
        url: 'action.php',
        method: 'post',
        cache: false,
        data: {qty:qty,pid:pid,pprice:pprice},
        success: function(response){
            console.log(response);
        }
    });
});
</code>```

Body:
When I try to change the number of quantity and then I want to update the total price according to that...using ajax but only first row works and all others rows does not work. Ajax request is only working for 1st rows not for other rows.

Cart Page :

DB Structure :

cart.php

                    <?php
                        require_once 'config.php';
                        $stmt = $conn->prepare("SELECT * FROM cart");
                        $stmt->execute();
                        $result = $stmt->get_result();
                        $sum = 0;
                        while($row = $result->fetch_assoc()):
                    ?>

                        <?= $row['id'] ?>
                        <input id="pid" type="hidden" value="<?= $row['id'] ?>">
                        <img src="<?= $row['product_image'] ?>" width="50">
                        <?= $row['product_name'] ?>
                        Rs. <?= number_format($row['product_price'],2) ?>
                        <input type="hidden" value="<?= $row['product_price'] ?>" id="pprice">
                        <input type="number" class="form-control" value="<?= $row['qty'] ?>" id="itemQty" style="width:75px;">
                        Rs. <?= number_format($row['total_price'],2) ?>
                        <a href="action.php?remove=<?= $row['id'] ?>" class="badge-danger badge">Remove

                    <?php $sum += $row['total_price']; ?>
                <?php endwhile; ?>

                    Grand Total
                    Rs. <?= number_format($sum,2); ?>
                    Checkout

ajax code

$("#itemQty").on('change',function(){
            var qty = $(this).val();
            var pid = $("#pid").val();
            var pprice = $("#pprice").val();
            location.reload(true);
            $.ajax({
                url: 'action.php',
                method: 'post',
                cache: false,
                data: {qty:qty,pid:pid,pprice:pprice},
                success: function(response){
                    console.log(response);
                }
            });
        });

action.php

if(isset($_POST['qty'])){
        $qty = $_POST['qty'];
        $pid = $_POST['pid'];
        $pprice = $_POST['pprice'];
        $tprice = $qty*$pprice;

        $stmt = $conn->prepare("UPDATE cart SET qty=?,total_price=? WHERE id=?");
        $stmt->bind_param("iis",$qty,$tprice,$pid);
        $stmt->execute();
    }

Body:
Yes, because you use id and it takes element from first row. You should use class instead of id:

id="pid" change by class="pid"

id="itemQty" change by class="itemQty"
etc.

And take element from current row. Something like this:

$(".itemQty").on('change',function(){

    var $el = $(this).closest('tr'); //Find parent tr element
    var qty = $(this).val();
    var pid = $el.find(".pid").val(); //Find element with class pid in current tr ($el)
    var pprice = $el.find(".pprice").val();

    $.ajax({
        url: 'action.php',
        method: 'post',
        cache: false,
        data: {qty:qty,pid:pid,pprice:pprice},
        success: function(response){
            console.log(response);
        }
    });
});