问:
How to make responsive table and header fixed both on same html table
Here is the code pen https://codepen.io/shaswat/pen/EbwPNK

I have made an html table responsive by making all the columns getting repeated and show the correspondent row value up when its mobile display -- so the responsive part is done

Now having trouble to make the header fixed in this html table while scrolling the tbody - so tbody can have fixed height and that time scrolling header should be fixed -- applicable only for the resolutions greater than mobile display
--need help in this

HTML

```<code><h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>

<div class='rg-container'>
    <div class='rg-content'>
        <table class='rg-table'>
            <thead>
                <tr>
                    <th class='text '>id </th>
                    <th class='text '>somcol</th>
                    <th class='text '>biggger id</th>
                    <th class='text '>another id</th>
                    <th class='text '>med col</th>
                    <th class='text '>med col</th>
                    <th class='text '>sheet</th>
                    <th class='text '>sheet</th>
                    <th class='text '>anotherbigcoloumn</th>
                    <th class='text '>small</th>
                    <th class='text '>anotherbigcoloumn</th>
                    <th class='text '>dateformat</th>
                    <th class='text '>dateformat</th>
                    <th class='text '>small col</th>
                    <th class='text '>dateformat</th>
                    <th class='text '>averybigcolumnssssss</th>
                    <th class='text '>mediumclolumnss</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class='text' data-title='id'>id</td>
                    <td class='text' data-title='somcol'>somcol</td>
                    <td class='text' data-title='biggger id'>biggger id</td>
                    <td class='text' data-title='another id'>another id</td>
                    <td class='text' data-title='med col'>med col</td>
                    <td class='text' data-title='med col'>med col</td>
                    <td class='text' data-title='sheet'>sheet</td>
                    <td class='text' data-title='sheet'>sheet</td>
                    <td class='text' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text' data-title='small'>small</td>
                    <td class='text' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text' data-title='dateformat'>date format</td>
                    <td class='text' data-title='dateformat'>date format</td>
                    <td class='text' data-title='small col'>small col</td>
                    <td class='text' data-title='dateformat'>date format</td>
                    <td class='text' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
</code>```

CSS

```<code>.rg-container {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 1em 0.5em;
    color: #222;
}
.rg-header {
    margin-bottom: 1em;
    text-align: left;
}

.rg-header > * {
    display: block;
}

/* table */
table.rg-table {
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 1em;
    border-collapse: collapse;
    border-spacing: 0;
  overflow:scroll;
}
table.rg-table tr {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
    color: #333;
}
table.rg-table thead {
    border-bottom: 3px solid #ddd;
  background:black;
}

table.rg-table tr {
    border-bottom: 1px solid #ddd;
    color: #222;
}
table.rg-table tr.highlight {
    background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table th {
    font-weight: bold;
    padding: 0.35em;
    font-size: 0.9em;
  color:white;
}
table.rg-table td {
    padding: 0.35em;
    font-size: 0.9em;
}
table.rg-table .highlight td {
    font-weight: bold;
}
table.rg-table th.number, td.number {
    text-align: right;
}

/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
    max-width: 800px;
    margin: 0 auto;
}
table.rg-table {
    width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
    display: none;
}
table.rg-table thead {
    display: none;
}
table.rg-table tbody {
    width: 100%;

}
table.rg-table tr, table.rg-table th, table.rg-table td {
    display: block;
    padding: 0;
}
table.rg-table tr {
    border-bottom: none;
    margin: 0 0 1em 0;
    padding: 0.5em;
}
table.rg-table tr.highlight {
    background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
    background-color: none;
}
table.rg-table td {
    padding: 0.5em 0 0.25em 0;
    border-bottom: 1px dotted #ccc;
    text-align: right;
}
table.rg-table td[data-title]:before {
    content: attr(data-title);
    font-weight: bold;
    display: inline-block;
    content: attr(data-title);
    float: left;
    margin-right: 0.5em;
    font-size: 0.95em;
}
table.rg-table td:last-child {
    padding-right: 0;
    border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
    display: none;
}
table.rg-table .highlight td {
    background-color: inherit;
    font-weight: normal;
}
</code>```

答:
Not sure if this is what you're after. I made a separate table just for the head. (This is not for mobile, correct?) This is tricky because you'll probably have to set exact widths for all columns. https://codepen.io/wazz/pen/POJmzr?editors=1100.

```<code><h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>

<div class='rg-container'>
    <table class='rg-table'>
        <thead>
            <tr>
                <th class='text '>id </th>
                <th class='text '>somcol</th>
                <th class='text '>biggger id</th>
                <th class='text '>another id</th>
                <th class='text '>med col</th>
                <th class='text '>med col</th>
                <th class='text '>sheet</th>
                <th class='text '>sheet</th>
                <th class='text '>another big coloumn</th>
                <th class='text '>small</th>
                <th class='text '>another big coloumn</th>
                <th class='text '>date format</th>
                <th class='text '>date format</th>
                <th class='text '>small col</th>
                <th class='text '>date format</th>
                <th class='text '>a very big columnssssss</th>
                <th class='text '>medium clolumnss</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class='rg-content'>

        <table class='rg-table'>

            <tbody>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='another big coloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='another big coloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>

                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>

                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>
</code>```

css

```<code>.rg-container {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    color: #222;
}
.rg-content {
    height: 300px;
    overflow: scroll;
}
.rg-header {
    margin-bottom: 1em;
    text-align: left;
}

.rg-header > * {
    display: block;
}

/* table */
table.rg-table {
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 1em;
    border-collapse: collapse;
    border-spacing: 0;
  overflow:scroll;
}
table.rg-table tr {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
    color: #333;
}
table.rg-table thead {
    border-bottom: 3px solid #ddd;
  background:black;
}

table.rg-table tr {
    border-bottom: 1px solid #ddd;
    color: #222;
}
table.rg-table tr.highlight {
    background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table th {
    font-weight: bold;
    padding: 0.35em;
    font-size: 0.9em;
  color:white;
  border:1px solid #ccc;
}
table.rg-table td {
    padding: 0.35em;
    font-size: 0.9em;
  border:1px solid #ccc;
}
table.rg-table .highlight td {
    font-weight: bold;
}
table.rg-table th.number, td.number {
    text-align: right;
}

/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
    max-width: 800px;
    margin: 0 auto;
}
table.rg-table {
    width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
    display: none;
}
table.rg-table thead {
    display: none;
}
table.rg-table tbody {
    width: 100%;

}
table.rg-table tr, table.rg-table th, table.rg-table td {
    display: block;
    padding: 0;
}
table.rg-table tr {
    border-bottom: none;
    margin: 0 0 1em 0;
    padding: 0.5em;
}
table.rg-table tr.highlight {
    background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
    background-color: none;
}
table.rg-table td {
    padding: 0.5em 0 0.25em 0;
    border-bottom: 1px dotted #ccc;
    text-align: right;
}
table.rg-table td[data-title]:before {
    content: attr(data-title);
    font-weight: bold;
    display: inline-block;
    content: attr(data-title);
    float: left;
    margin-right: 0.5em;
    font-size: 0.95em;
}
table.rg-table td:last-child {
    padding-right: 0;
    border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
    display: none;
}
table.rg-table .highlight td {
    background-color: inherit;
    font-weight: normal;
}
</code>```

Body:
Here is the code pen https://codepen.io/shaswat/pen/EbwPNK

I have made an html table responsive by making all the columns getting repeated and show the correspondent row value up when its mobile display -- so the responsive part is done

Now having trouble to make the header fixed in this html table while scrolling the tbody - so tbody can have fixed height and that time scrolling header should be fixed -- applicable only for the resolutions greater than mobile display
--need help in this

HTML

Some more Header information

Some more Header information

Header

                    id
                    somcol
                    biggger id
                    another id
                    med col
                    med col
                    sheet
                    sheet
                    anotherbigcoloumn
                    small
                    anotherbigcoloumn
                    dateformat
                    dateformat
                    small col
                    dateformat
                    averybigcolumnssssss
                    mediumclolumnss

                    id
                    somcol
                    biggger id
                    another id
                    med col
                    med col
                    sheet
                    sheet
                    another big coloumn
                    small
                    another big coloumn
                    date format
                    date format
                    small col
                    date format
                    a very big columnssssss
                    medium clolumnss

CSS

.rg-container {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    padding: 1em 0.5em;
    color: #222;
}
.rg-header {
    margin-bottom: 1em;
    text-align: left;
}

.rg-header > * {
    display: block;
}

/* table */
table.rg-table {
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 1em;
    border-collapse: collapse;
    border-spacing: 0;
  overflow:scroll;
}
table.rg-table tr {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
    color: #333;
}
table.rg-table thead {
    border-bottom: 3px solid #ddd;
  background:black;
}

table.rg-table tr {
    border-bottom: 1px solid #ddd;
    color: #222;
}
table.rg-table tr.highlight {
    background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table th {
    font-weight: bold;
    padding: 0.35em;
    font-size: 0.9em;
  color:white;
}
table.rg-table td {
    padding: 0.35em;
    font-size: 0.9em;
}
table.rg-table .highlight td {
    font-weight: bold;
}
table.rg-table th.number, td.number {
    text-align: right;
}

/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
    max-width: 800px;
    margin: 0 auto;
}
table.rg-table {
    width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
    display: none;
}
table.rg-table thead {
    display: none;
}
table.rg-table tbody {
    width: 100%;

}
table.rg-table tr, table.rg-table th, table.rg-table td {
    display: block;
    padding: 0;
}
table.rg-table tr {
    border-bottom: none;
    margin: 0 0 1em 0;
    padding: 0.5em;
}
table.rg-table tr.highlight {
    background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
    background-color: none;
}
table.rg-table td {
    padding: 0.5em 0 0.25em 0;
    border-bottom: 1px dotted #ccc;
    text-align: right;
}
table.rg-table td[data-title]:before {
    content: attr(data-title);
    font-weight: bold;
    display: inline-block;
    content: attr(data-title);
    float: left;
    margin-right: 0.5em;
    font-size: 0.95em;
}
table.rg-table td:last-child {
    padding-right: 0;
    border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
    display: none;
}
table.rg-table .highlight td {
    background-color: inherit;
    font-weight: normal;
}

Body:
Not sure if this is what you're after. I made a separate table just for the head. (This is not for mobile, correct?) This is tricky because you'll probably have to set exact widths for all columns. https://codepen.io/wazz/pen/POJmzr?editors=1100.

<h1>Some more Header information</h1>
<h2>Some more Header information</h2>
<h3>Header</h3>

<div class='rg-container'>
    <table class='rg-table'>
        <thead>
            <tr>
                <th class='text '>id </th>
                <th class='text '>somcol</th>
                <th class='text '>biggger id</th>
                <th class='text '>another id</th>
                <th class='text '>med col</th>
                <th class='text '>med col</th>
                <th class='text '>sheet</th>
                <th class='text '>sheet</th>
                <th class='text '>another big coloumn</th>
                <th class='text '>small</th>
                <th class='text '>another big coloumn</th>
                <th class='text '>date format</th>
                <th class='text '>date format</th>
                <th class='text '>small col</th>
                <th class='text '>date format</th>
                <th class='text '>a very big columnssssss</th>
                <th class='text '>medium clolumnss</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <div class='rg-content'>

        <table class='rg-table'>

            <tbody>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='another big coloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='another big coloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>

                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>

                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>
                <tr class=''>
                    <td class='text ' data-title='id'>id</td>
                    <td class='text ' data-title='somcol'>somcol</td>
                    <td class='text ' data-title='biggger id'>biggger id</td>
                    <td class='text ' data-title='another id'>another id</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='med col'>med col</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='sheet'>sheet</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='small'>small</td>
                    <td class='text ' data-title='anotherbigcoloumn'>another big coloumn</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='small col'>small col</td>
                    <td class='text ' data-title='dateformat'>date format</td>
                    <td class='text ' data-title='averybigcolumnssssss'>a very big columnssssss</td>
                    <td class='text ' data-title='mediumclolumnss'>medium clolumnss</td>
                </tr>

            </tbody>
        </table>
    </div>
</div>

css

.rg-container {
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
    color: #222;
}
.rg-content {
    height: 300px;
    overflow: scroll;
}
.rg-header {
    margin-bottom: 1em;
    text-align: left;
}

.rg-header > * {
    display: block;
}

/* table */
table.rg-table {
    width: 100%;
    margin-bottom: 0.5em;
    font-size: 1em;
    border-collapse: collapse;
    border-spacing: 0;
  overflow:scroll;
}
table.rg-table tr {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    text-align: left;
    color: #333;
}
table.rg-table thead {
    border-bottom: 3px solid #ddd;
  background:black;
}

table.rg-table tr {
    border-bottom: 1px solid #ddd;
    color: #222;
}
table.rg-table tr.highlight {
    background-color: #dcf1f0 !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table th {
    font-weight: bold;
    padding: 0.35em;
    font-size: 0.9em;
  color:white;
  border:1px solid #ccc;
}
table.rg-table td {
    padding: 0.35em;
    font-size: 0.9em;
  border:1px solid #ccc;
}
table.rg-table .highlight td {
    font-weight: bold;
}
table.rg-table th.number, td.number {
    text-align: right;
}

/* media queries */
@media screen and (max-width: 800px) {
.rg-container {
    max-width: 800px;
    margin: 0 auto;
}
table.rg-table {
    width: 100%;
}
table.rg-table tr.hide-mobile, table.rg-table th.hide-mobile, table.rg-table td.hide-mobile {
    display: none;
}
table.rg-table thead {
    display: none;
}
table.rg-table tbody {
    width: 100%;

}
table.rg-table tr, table.rg-table th, table.rg-table td {
    display: block;
    padding: 0;
}
table.rg-table tr {
    border-bottom: none;
    margin: 0 0 1em 0;
    padding: 0.5em;
}
table.rg-table tr.highlight {
    background-color: inherit !important;
}
table.rg-table.zebra tr:nth-child(even) {
    background-color: none;
}
table.rg-table.zebra td:nth-child(even) {
    background-color: #f6f6f6;
}
table.rg-table tr:nth-child(even) {
    background-color: none;
}
table.rg-table td {
    padding: 0.5em 0 0.25em 0;
    border-bottom: 1px dotted #ccc;
    text-align: right;
}
table.rg-table td[data-title]:before {
    content: attr(data-title);
    font-weight: bold;
    display: inline-block;
    content: attr(data-title);
    float: left;
    margin-right: 0.5em;
    font-size: 0.95em;
}
table.rg-table td:last-child {
    padding-right: 0;
    border-bottom: 2px solid #ccc;
}
table.rg-table td:empty {
    display: none;
}
table.rg-table .highlight td {
    background-color: inherit;
    font-weight: normal;
}


来源: stackexchange

问:
Store config settings for a .NET DLL (not EXE or Web)
I have a .NET 4 class library project, which is used by multiple web projects. In this class library I need to get a DB connection string and it needs to be the same for all the web projects. Currently I've got it as a setting in each web.config file, but this is not ideal. Is there any way I can have that configuration stored with the DLL, but still allow it to be modified at runtime (ie. hardcoding the connection string is out)?

App.config seems to be generally ignored for a DLL, even though it does get renamed to assemblyname.dll.config and copied to the bin directory for the web. I tried making it an "application setting" (ie. using the auto-generated class derived from System.Configuration.ApplicationSettingsBase) and this appeared to work, but changing the value in the DLL .config file at runtime had no effect, so I suspect it's really just using the hardcoded default value of the setting.

答:
Personally, I would do that (even if you somehow manage to get it to work, and yes the built-in configuration mechanism won't let you). I would always store behavioral settings of an application with the application's own configuration. I have done and seen systems where such values were stored in a database - which is of course not very feasible for a connection string.

A DLL as such is passive (or should be) and only acts upon explicit calls from its users, and thus should not need any configuration for its own purpose (except may "global" diagnostics stuff, but even then...), as the caller can provide it when or before using the respective functionality.

If you have multiple applications that incidentally require the same settings, then this is nothing the DLL should know or even care about.

To make things more manageable, you might consider relocating this issue into the build or deployment process instead. In your application configuration files (web.config files for that matter) put a placeholder for the connectionstring. Then during build or deployment (whatever suits your needs better) replace that placeholder with the true connection string, which you can keep in a single file.

ContentLicense: CC BY-SA 2.5


问:
az cli 2.0 .... az webapp create runtime php|7.1 error
I am doing the following tutorial instructions. I using the CLI 2.0 that is integrated in the azure portal. Not the version on my laptop.

https://learn.microsoft.com/en-us/azure/app-service/app-service-web-get-started-php

```<code>az webapp create --resource-group xxxx-DevGroup --plan xxxxServicePlan --name hello --runtime "php|7.1" --deployment-local-git
</code>```

and at the instruction to create the webapp i am getting this error:

```<code>'7.1' is not recognized as an internal or external command,
</code>```

The runtimes 7.0 and 7.1 are supported. I also tried these variations without success.

```<code>php|7.1. I also tried php|7.0,  "php|7.1" and "php|7.0"
</code>```

Any pointers to fix this issue would be appreciated

答:
According to the error log, it seems that you use a older version. You could use az -v to check version.

I test it on 2.0.7 and Azure Cloud Shell, they all work for me.

I suggest you could upgrade your azure cli version or execute the command on Azure Cloud Shell.

ContentLicense: CC BY-SA 3.0

Body:
I am doing the following tutorial instructions. I using the CLI 2.0 that is integrated in the azure portal. Not the version on my laptop.

https://learn.microsoft.com/en-us/azure/app-service/app-service-web-get-started-php

az webapp create --resource-group xxxx-DevGroup --plan xxxxServicePlan --name hello --runtime "php|7.1" --deployment-local-git

and at the instruction to create the webapp i am getting this error:

'7.1' is not recognized as an internal or external command,

The runtimes 7.0 and 7.1 are supported. I also tried these variations without success.

php|7.1. I also tried php|7.0,  "php|7.1" and "php|7.0"

Any pointers to fix this issue would be appreciated


问:
React Select auto size width
When using react-select it is not auto sizing by option value, but using width:100% as you can see in picture:

Options are short:

```<code>getOptions() {
    return [
        { value: 'AND', label: 'AND' },
        { value: 'OR', label: 'OR' }
    ]
}
</code>```

And code which produces it:

```<code><Select
    options={this.getOptions()}
    value={value}
    autosize={true}
    clearable={false}
    simpleValue
/>
</code>```

Is there any way to make react-select to show these values with auto sizing, so select box would be the same as option length, and I could, for example, center this select box in
?

Updated 14.11.2017
Full example can be seen in this jsFiddle

答:
SOLUTION 1

You can leverage React's inline styles by updating the components' width based on the length of the selected option.

Let me explain  further: Say the selected value is HelloWorld. This string is of length 10. We could guess that each character accounts for say 8px each on average (total guess I have no clue at all). Thus, the width of this word is around 8*10=80px, right ? Also, there are some controls after the word (the carret and the cross) and we need some minimum padding: together they may be of 100px width. Then here you have it: your div's width should be ( 8px * 10 letters ) + 100px = 180px.

More precisely, the correct formula is something like:

```<code>(average_letter_size * selected_value.length) + other_elements_sizes
</code>```

When selected_value changes, so does its length, and therefore the width of the div gets updated with the new total.

Example: if the selected value is now Lorem Ipsum dolor sit amet, the length is now 26. By applying the formula we get a larger width of : (8px * 26 letters) + 100px = 308px.

For this to work in react, here is a snippet:

```<code><Select
  style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
  className="select-custom-class"
  name="form-field-name"
  value={this.state.selectedOption2}
  options={options2}
  onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
 />
</code>```

As you can see I added :

```<code>style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
</code>```

to your component. Whenever the state gets updated, everything is propagated including the width of the component.

See a working example in this fiddle.

Eventually, you want to fine-tune the rules and averages to your needs. I also suggest you apply a letter size depending on the number of capital and lowercase letters in the selected value.

SOLUTION 2 (edit)

I came up with a pure CSS solution if you want. It should be better tested against your design, but this should work:

```<code>/* .Select-value comes with an absolute position to stack it below .Select-input */
/* we need to scratch that in order for us to be able to let the div grow depending on its content size */
.Select-placeholder, .Select--single > .Select-control .Select-value {
  position: relative;
  padding-left: 0;
}

/* All these 3 classes come with ugly "table" display...*/
.Select-control, .Select-clear-zone, .Select-arrow-zone {
  display: inherit;
}

/* here is the trick: we display the wrapper as flex in order to make it fit in height*/
/* we flip positions of .Select-value and .Select-input using row-reverse in order to have a nice input to the left and no to the right */
.select-custom-class .Select-multi-value-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

/*we put our controls back to a better center position */
.Select-clear-zone {
  position: absolute;
  top: 8px;
  right: 20px;
}

.Select-arrow-zone {
  position: absolute;
  top: 8px;
  right: 0px;
}
</code>```

See a working fiddle (I changed some of the examples for better illustration)

Tell me what you think. :)

Title: React Select auto size width

Body:
When using react-select it is not auto sizing by option value, but using width:100% as you can see in picture:

Options are short:

getOptions() {
    return [
        { value: 'AND', label: 'AND' },
        { value: 'OR', label: 'OR' }
    ]
}

And code which produces it:

<Select
    options={this.getOptions()}
    value={value}
    autosize={true}
    clearable={false}
    simpleValue
/>

Is there any way to make react-select to show these values with auto sizing, so select box would be the same as option length, and I could, for example, center this select box in
?

Updated 14.11.2017
Full example can be seen in this jsFiddle

Body:
SOLUTION 1

You can leverage React's inline styles by updating the components' width based on the length of the selected option.

Let me explain  further: Say the selected value is HelloWorld. This string is of length 10. We could guess that each character accounts for say 8px each on average (total guess I have no clue at all). Thus, the width of this word is around 8*10=80px, right ? Also, there are some controls after the word (the carret and the cross) and we need some minimum padding: together they may be of 100px width. Then here you have it: your div's width should be ( 8px * 10 letters ) + 100px = 180px.

More precisely, the correct formula is something like:

(average_letter_size * selected_value.length) + other_elements_sizes

When selected_value changes, so does its length, and therefore the width of the div gets updated with the new total.

Example: if the selected value is now Lorem Ipsum dolor sit amet, the length is now 26. By applying the formula we get a larger width of : (8px * 26 letters) + 100px = 308px.

For this to work in react, here is a snippet:

<Select
  style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}
  className="select-custom-class"
  name="form-field-name"
  value={this.state.selectedOption2}
  options={options2}
  onChange={(value) => { this.setState({ selectedOption2: value.value }); }}
 />

As you can see I added :

style={{width: `${(8*this.state.selectedOption2.length) + 100}px`}}

to your component. Whenever the state gets updated, everything is propagated including the width of the component.

See a working example in this fiddle.

Eventually, you want to fine-tune the rules and averages to your needs. I also suggest you apply a letter size depending on the number of capital and lowercase letters in the selected value.

SOLUTION 2 (edit)

I came up with a pure CSS solution if you want. It should be better tested against your design, but this should work:

/* .Select-value comes with an absolute position to stack it below .Select-input */
/* we need to scratch that in order for us to be able to let the div grow depending on its content size */
.Select-placeholder, .Select--single > .Select-control .Select-value {
  position: relative;
  padding-left: 0;
}

/* All these 3 classes come with ugly "table" display...*/
.Select-control, .Select-clear-zone, .Select-arrow-zone {
  display: inherit;
}

/* here is the trick: we display the wrapper as flex in order to make it fit in height*/
/* we flip positions of .Select-value and .Select-input using row-reverse in order to have a nice input to the left and no to the right */
.select-custom-class .Select-multi-value-wrapper {
  display: flex;
  flex-direction: row-reverse;
}

/*we put our controls back to a better center position */
.Select-clear-zone {
  position: absolute;
  top: 8px;
  right: 20px;
}

.Select-arrow-zone {
  position: absolute;
  top: 8px;
  right: 0px;
}

See a working fiddle (I changed some of the examples for better illustration)

Tell me what you think. :)

ContentLicense: CC BY-SA 4.0


问:
Custom bootloader booted via USB drive produces incorrect output on some computers
I am fairly new to assembly, but I'm trying to dive into the world of low level computing. I'm trying to learn how to write assembly code that would run as bootloader code; so independent of any other OS like Linux or Windows. After reading this page and a few other lists of x86 instruction sets, I came up with some assembly code that is supposed to print 10 A's on the screen and then 1 B.

```<code>      BITS 16
start:
    mov ax, 07C0h       ; Set up 4K stack space after this bootloader
    add ax, 288     ; (4096 + 512) / 16 bytes per paragraph
    mov ss, ax
    mov sp, 4096

    mov ax, 07C0h       ; Set data segment to where we're loaded
    mov ds, ax

    mov cl, 10          ; Use this register as our loop counter
    mov ah, 0Eh         ; This register holds our BIOS instruction

.repeat:
    mov al, 41h         ; Put ASCII 'A' into this register
    int 10h             ; Execute our BIOS print instruction
    cmp cl, 0           ; Find out if we've reached the end of our loop
    dec cl              ; Decrement our loop counter
    jnz .repeat         ; Jump back to the beginning of our loop
    jmp .done           ; Finish the program when our loop is done

.done:
    mov al, 42h         ; Put ASCII 'B' into this register
    int 10h             ; Execute BIOS print instruction
    ret

times 510-($-$$) db 0   ; Pad remainder of boot sector with 0s
dw 0xAA55
</code>```

So the output should look like this:

```<code>AAAAAAAAAAB
</code>```

I assembled the code using the nasm assembler running on the Windows 10 Ubuntu Bash program. After it produced the .bin file, I opened it using a hex editor. I used the same hex editor to copy the contents of that .bin file into the first 512 bytes of a flash drive. Once I had written my program to the flash drive, I disconnected it and plugged it into a computer with an Intel Core i3-7100. On bootup, I selected my USB flash drive as the boot device, only to get the following output:

```<code>A
</code>```

After changing various things in the program, I finally got frustrated and tried the program on another computer. The other computer was a laptop with an i5-2520m. I followed the same process as I mentioned before. Sure enough, it gave me the expected output:

```<code>AAAAAAAAAAB
</code>```

I immediately tried it on my original computer with the i3, but it still didn't work.

So my question is: Why does my program work with one x86 processor but not the other? They both support the x86 instruction set. What gives?

Solution:

Ok, I've been able to track down the real solution with some help. If you read Michael Petch's answer below, you'll find a solution that will fix my problem, and another problem of a BIOS looking for a BPB.

Here was the problem with my code: I was writing the program to the first bytes of my flash drive. Those bytes were loaded into memory, but some BIOS interrupts were using those bytes for itself. So my program was being overwritten by the BIOS. To prevent this, you can add a BPB description as shown below. If your BIOS works the same way mine does, it will simply overwrite the BPB in memory, but not your program. Alternatively, you can add the following code to the top of your program:

```<code>jmp start
resb 0x50

start:
;enter code here
</code>```

This code (courtesy of Ross Ridge) will push your program to memory location 0x50 (offset from 0x7c00) to prevent it from being overwritten by the BIOS during execution.

Also keep in mind that whenever you call any subroutine, the values of the registers you were using could be overwritten. Make sure you either use push, pop or save your values to memory before calling a subroutine. Look at Martin Rosenau's answer below to read more about that.

Thank you to all who replied to my question. I now have a better understanding of how this low-level stuff works.

答:
This could probably be made into a canonical answer on this subject.

Real Hardware / USB / Laptop Issues

If you are attempting to use USB to boot on real hardware then you may encounter another issue even if you get it working in BOCHS and QEMU. If your BIOS is set to do USB FDD emulation (and not USB HDD or something else) you may need to add a BIOS Parameter Block(BPB) to the beginning of your bootloader. You can create a fake one like this:

```<code>org 0x7c00
bits 16

boot:
    jmp main
    TIMES 3-($-$$) DB 0x90   ; Support 2 or 3 byte encoded JMPs before BPB.

    ; Dos 4.0 EBPB 1.44MB floppy
    OEMname:           db    "mkfs.fat"  ; mkfs.fat is what OEMname mkdosfs uses
    bytesPerSector:    dw    512
    sectPerCluster:    db    1
    reservedSectors:   dw    1
    numFAT:            db    2
    numRootDirEntries: dw    224
    numSectors:        dw    2880
    mediaType:         db    0xf0
    numFATsectors:     dw    9
    sectorsPerTrack:   dw    18
    numHeads:          dw    2
    numHiddenSectors:  dd    0
    numSectorsHuge:    dd    0
    driveNum:          db    0
    reserved:          db    0
    signature:         db    0x29
    volumeID:          dd    0x2d7e5a1a
    volumeLabel:       db    "NO NAME    "
    fileSysType:       db    "FAT12   "

main:
    [insert your code here]
</code>```

Adjust the ORG directive to what you need or omit it if you just need the default 0x0000.

If you were to modify your code to have the layout above the Unix/Linux file command may be able to dump out the BPB data that it thinks makes up your VBR in the disk image. Run the command file disk.img and you may get this output:

disk.img: DOS/MBR boot sector, code offset 0x3c+2, OEM-ID "mkfs.fat", root entries 224, sectors 2880 (volumes <=32 MB) , sectors/FAT 9, sectors/track 18, serial number 0x2d7e5a1a, unlabeled, FAT (12 bit)

How the Code in this Question Could be Modified

In the case of this OPs original code it could have been modified to look like this:

```<code>bits 16

boot:
    jmp main
    TIMES 3-($-$$) DB 0x90   ; Support 2 or 3 byte encoded JMPs before BPB.

    ; Dos 4.0 EBPB 1.44MB floppy
    OEMname:           db    "mkfs.fat"  ; mkfs.fat is what OEMname mkdosfs uses
    bytesPerSector:    dw    512
    sectPerCluster:    db    1
    reservedSectors:   dw    1
    numFAT:            db    2
    numRootDirEntries: dw    224
    numSectors:        dw    2880
    mediaType:         db    0xf0
    numFATsectors:     dw    9
    sectorsPerTrack:   dw    18
    numHeads:          dw    2
    numHiddenSectors:  dd    0
    numSectorsHuge:    dd    0
    driveNum:          db    0
    reserved:          db    0
    signature:         db    0x29
    volumeID:          dd    0x2d7e5a1a
    volumeLabel:       db    "NO NAME    "
    fileSysType:       db    "FAT12   "

main:
    mov ax, 07C0h       ; Set up 4K stack space after this bootloader
    add ax, 288     ; (4096 + 512) / 16 bytes per paragraph
    mov ss, ax
    mov sp, 4096

    mov ax, 07C0h       ; Set data segment to where we're loaded
    mov ds, ax

    mov cl, 10          ; Use this register as our loop counter
    mov ah, 0Eh         ; This register holds our BIOS instruction

.repeat:
    mov al, 41h         ; Put ASCII 'A' into this register
    int 10h             ; Execute our BIOS print instruction
    cmp cl, 0           ; Find out if we've reached the end of our loop
    dec cl              ; Decrement our loop counter
    jnz .repeat         ; Jump back to the beginning of our loop
    jmp .done           ; Finish the program when our loop is done

.done:
    mov al, 42h         ; Put ASCII 'B' into this register
    int 10h             ; Execute BIOS print instruction
    ret

times 510-($-$$) db 0   ; Pad remainder of boot sector with 0s
dw 0xAA55
</code>```

Other Suggestions

As has been pointed out - you can't ret to end a bootloader. You can put it into an infinite loop or halt the processor with cli followed by hlt.

If you ever allocate a large amount of data on the stack or start writing to data outside the 512 bytes of your bootloader you should set your own stack pointer (SS:SP) to a region of memory that won't interfere with your own code. The original code in this question does setup a stack pointer. This is a general observation for anyone else reading this Q/A. I have more information on that in my Stackoverflow answer that contains General Bootloader Tips.

Test Code to See if Your BIOS is Overwriting the BPB

If you want to know if the BIOS might be overwriting data in the BPB and to determine what values it wrote you could use this bootloader code to dump the BPB as the bootloader sees it after control is transferred to it. Under normal circumstances the first 3 bytes should be EB 3C 90 followed by a series of AA. Any value that isn't AA was likely overwritten by the BIOS. This code is in NASM and can be assembled into a bootloader with nasm -f bin boot.asm -o boot.bin

```<code>; Simple bootloader that dumps the bytes in the BIOS Parameter
; Block BPB. First 3 bytes should be EB 3C 90. The rest should be 0xAA
; unless you have a BIOS that wrote drive geometry information
; into what it thinks is a BPB.

; Macro to print a character out with char in BX
%macro print_char 1
    mov al, %1
    call bios_print_char
%endmacro

org 0x7c00
bits 16

boot:
    jmp main
    TIMES 3-($-$$) DB 0x90   ; Support 2 or 3 byte encoded JMPs before BPB.

    ; Fake BPB filed with 0xAA
    TIMES 59 DB 0xAA

main:
    xor ax, ax
    mov ds, ax
    mov ss, ax              ; Set stack just below bootloader at 0x0000:0x7c00
    mov sp, boot
    cld                     ; Forward direction for string instructions

    mov si, sp              ; Print bytes from start of bootloader
    mov cx, main-boot       ; Number of bytes in BPB
    mov dx, 8               ; Initialize column counter to 8
                            ;     So first iteration prints address
.tblloop:
    cmp dx, 8               ; Every 8 hex value print CRLF/address/Colon/Space
    jne .procbyte
    print_char 0x0d         ; Print CRLF
    print_char 0x0a
    mov ax, si              ; Print current address
    call print_word_hex
    print_char ':'          ; Print ': '
    print_char ' '
    xor dx, dx              ; Reset column counter to 0
.procbyte:
    lodsb                   ; Get byte to print in AL
    call print_byte_hex     ; Print the byte (in BL) in HEX
    print_char ' '
    inc dx                  ; Increment the column count
    dec cx                  ; Decrement number of  bytes to process
    jnz .tblloop

    cli                     ; Halt processor indefinitely
.end:
    hlt
    jmp .end

; Print the character passed in AL
bios_print_char:
    push bx
    xor bx, bx              ; Attribute=0/Current Video Page=0
    mov ah, 0x0e
    int 0x10                ; Display character
    pop bx
    ret

; Print the 16-bit value in AX as HEX
print_word_hex:
    xchg al, ah             ; Print the high byte first
    call print_byte_hex
    xchg al, ah             ; Print the low byte second
    call print_byte_hex
    ret

; Print lower 8 bits of AL as HEX
print_byte_hex:
    push bx
    push cx
    push ax

    lea bx, [.table]        ; Get translation table address

    ; Translate each nibble to its ASCII equivalent
    mov ah, al              ; Make copy of byte to print
    and al, 0x0f            ;     Isolate lower nibble in AL
    mov cl, 4
    shr ah, cl              ; Isolate the upper nibble in AH
    xlat                    ; Translate lower nibble to ASCII
    xchg ah, al
    xlat                    ; Translate upper nibble to ASCII

    xor bx, bx              ; Attribute=0/Current Video Page=0
    mov ch, ah              ; Make copy of lower nibble
    mov ah, 0x0e
    int 0x10                ; Print the high nibble
    mov al, ch
    int 0x10                ; Print the low nibble

    pop ax
    pop cx
    pop bx
    ret
.table: db "0123456789ABCDEF", 0

; boot signature
TIMES 510-($-$$) db 0
dw 0xAA55
</code>```

Output should look like this for any BIOS that didn't update the BPB before transferring control to the bootloader code:

```<code>7C00: EB 3C 90 AA AA AA AA AA
7C08: AA AA AA AA AA AA AA AA
7C10: AA AA AA AA AA AA AA AA
7C18: AA AA AA AA AA AA AA AA
7C20: AA AA AA AA AA AA AA AA
7C28: AA AA AA AA AA AA AA AA
7C30: AA AA AA AA AA AA AA AA
7C38: AA AA AA AA AA AA
</code>```

Body:
I am fairly new to assembly, but I'm trying to dive into the world of low level computing. I'm trying to learn how to write assembly code that would run as bootloader code; so independent of any other OS like Linux or Windows. After reading this page and a few other lists of x86 instruction sets, I came up with some assembly code that is supposed to print 10 A's on the screen and then 1 B.

      BITS 16
start:
    mov ax, 07C0h       ; Set up 4K stack space after this bootloader
    add ax, 288     ; (4096 + 512) / 16 bytes per paragraph
    mov ss, ax
    mov sp, 4096

    mov ax, 07C0h       ; Set data segment to where we're loaded
    mov ds, ax

    mov cl, 10          ; Use this register as our loop counter
    mov ah, 0Eh         ; This register holds our BIOS instruction

.repeat:
    mov al, 41h         ; Put ASCII 'A' into this register
    int 10h             ; Execute our BIOS print instruction
    cmp cl, 0           ; Find out if we've reached the end of our loop
    dec cl              ; Decrement our loop counter
    jnz .repeat         ; Jump back to the beginning of our loop
    jmp .done           ; Finish the program when our loop is done

.done:
    mov al, 42h         ; Put ASCII 'B' into this register
    int 10h             ; Execute BIOS print instruction
    ret

times 510-($-$$) db 0   ; Pad remainder of boot sector with 0s
dw 0xAA55

So the output should look like this:

AAAAAAAAAAB

I assembled the code using the nasm assembler running on the Windows 10 Ubuntu Bash program. After it produced the .bin file, I opened it using a hex editor. I used the same hex editor to copy the contents of that .bin file into the first 512 bytes of a flash drive. Once I had written my program to the flash drive, I disconnected it and plugged it into a computer with an Intel Core i3-7100. On bootup, I selected my USB flash drive as the boot device, only to get the following output:

A

After changing various things in the program, I finally got frustrated and tried the program on another computer. The other computer was a laptop with an i5-2520m. I followed the same process as I mentioned before. Sure enough, it gave me the expected output:

AAAAAAAAAAB

I immediately tried it on my original computer with the i3, but it still didn't work.

So my question is: Why does my program work with one x86 processor but not the other? They both support the x86 instruction set. What gives?

Solution:

Ok, I've been able to track down the real solution with some help. If you read Michael Petch's answer below, you'll find a solution that will fix my problem, and another problem of a BIOS looking for a BPB.

Here was the problem with my code: I was writing the program to the first bytes of my flash drive. Those bytes were loaded into memory, but some BIOS interrupts were using those bytes for itself. So my program was being overwritten by the BIOS. To prevent this, you can add a BPB description as shown below. If your BIOS works the same way mine does, it will simply overwrite the BPB in memory, but not your program. Alternatively, you can add the following code to the top of your program:

jmp start
resb 0x50

start:
;enter code here

This code (courtesy of Ross Ridge) will push your program to memory location 0x50 (offset from 0x7c00) to prevent it from being overwritten by the BIOS during execution.

Also keep in mind that whenever you call any subroutine, the values of the registers you were using could be overwritten. Make sure you either use push, pop or save your values to memory before calling a subroutine. Look at Martin Rosenau's answer below to read more about that.

Thank you to all who replied to my question. I now have a better understanding of how this low-level stuff works.

Body:
This could probably be made into a canonical answer on this subject.

Real Hardware / USB / Laptop Issues

If you are attempting to use USB to boot on real hardware then you may encounter another issue even if you get it working in BOCHS and QEMU. If your BIOS is set to do USB FDD emulation (and not USB HDD or something else) you may need to add a BIOS Parameter Block(BPB) to the beginning of your bootloader. You can create a fake one like this:

org 0x7c00
bits 16

boot:
    jmp main
    TIMES 3-($-$$) DB 0x90   ; Support 2 or 3 byte encoded JMPs before BPB.

    ; Dos 4.0 EBPB 1.44MB floppy
    OEMname:           db    "mkfs.fat"  ; mkfs.fat is what OEMname mkdosfs uses
    bytesPerSector:    dw    512
    sectPerCluster:    db    1
    reservedSectors:   dw    1
    numFAT:            db    2
    numRootDirEntries: dw    224
    numSectors:        dw    2880
    mediaType:         db    0xf0
    numFATsectors:     dw    9
    sectorsPerTrack:   dw    18
    numHeads:          dw    2
    numHiddenSectors:  dd    0
    numSectorsHuge:    dd    0
    driveNum:          db    0
    reserved:          db    0
    signature:         db    0x29
    volumeID:          dd    0x2d7e5a1a
    volumeLabel:       db    "NO NAME    "
    fileSysType:       db    "FAT12   "

main:
    [insert your code here]

Adjust the ORG directive to what you need or omit it if you just need the default 0x0000.

If you were to modify your code to have the layout above the Unix/Linux file command may be able to dump out the BPB data that it thinks makes up your VBR in the disk image. Run the command file disk.img and you may get this output:

disk.img: DOS/MBR boot sector, code offset 0x3c+2, OEM-ID "mkfs.fat", root entries 224, sectors 2880 (volumes <=32 MB) , sectors/FAT 9, sectors/track 18, serial number 0x2d7e5a1a, unlabeled, FAT (12 bit)

How the Code in this Question Could be Modified

In the case of this OPs original code it could have been modified to look like this:

bits 16

boot:
    jmp main
    TIMES 3-($-$$) DB 0x90   ; Support 2 or 3 byte encoded JMPs before BPB.

    ; Dos 4.0 EBPB 1.44MB floppy
    OEMname:           db    "mkfs.fat"  ; mkfs.fat is what OEMname mkdosfs uses
    bytesPerSector:    dw    512
    sectPerCluster:    db    1
    reservedSectors:   dw    1
    numFAT:            db    2
    numRootDirEntries: dw    224
    numSectors:        dw    2880
    mediaType:         db    0xf0
    numFATsectors:     dw    9
    sectorsPerTrack:   dw    18
    numHeads:          dw    2
    numHiddenSectors:  dd    0
    numSectorsHuge:    dd    0
    driveNum:          db    0
    reserved:          db    0
    signature:         db    0x29
    volumeID:          dd    0x2d7e5a1a
    volumeLabel:       db    "NO NAME    "
    fileSysType:       db    "FAT12   "

main:
    mov ax, 07C0h       ; Set up 4K stack space after this bootloader
    add ax, 288     ; (4096 + 512) / 16 bytes per paragraph
    mov ss, ax
    mov sp, 4096

    mov ax, 07C0h       ; Set data segment to where we're loaded
    mov ds, ax

    mov cl, 10          ; Use this register as our loop counter
    mov ah, 0Eh         ; This register holds our BIOS instruction

.repeat:
    mov al, 41h         ; Put ASCII 'A' into this register
    int 10h             ; Execute our BIOS print instruction
    cmp cl, 0           ; Find out if we've reached the end of our loop
    dec cl              ; Decrement our loop counter
    jnz .repeat         ; Jump back to the beginning of our loop
    jmp .done           ; Finish the program when our loop is done

.done:
    mov al, 42h         ; Put ASCII 'B' into this register
    int 10h             ; Execute BIOS print instruction
    ret

times 510-($-$$) db 0   ; Pad remainder of boot sector with 0s
dw 0xAA55

Other Suggestions

As has been pointed out - you can't ret to end a bootloader. You can put it into an infinite loop or halt the processor with cli followed by hlt.

If you ever allocate a large amount of data on the stack or start writing to data outside the 512 bytes of your bootloader you should set your own stack pointer (SS:SP) to a region of memory that won't interfere with your own code. The original code in this question does setup a stack pointer. This is a general observation for anyone else reading this Q/A. I have more information on that in my Stackoverflow answer that contains General Bootloader Tips.

Test Code to See if Your BIOS is Overwriting the BPB

If you want to know if the BIOS might be overwriting data in the BPB and to determine what values it wrote you could use this bootloader code to dump the BPB as the bootloader sees it after control is transferred to it. Under normal circumstances the first 3 bytes should be EB 3C 90 followed by a series of AA. Any value that isn't AA was likely overwritten by the BIOS. This code is in NASM and can be assembled into a bootloader with nasm -f bin boot.asm -o boot.bin

; Simple bootloader that dumps the bytes in the BIOS Parameter
; Block BPB. First 3 bytes should be EB 3C 90. The rest should be 0xAA
; unless you have a BIOS that wrote drive geometry information
; into what it thinks is a BPB.

; Macro to print a character out with char in BX
%macro print_char 1
    mov al, %1
    call bios_print_char
%endmacro

org 0x7c00
bits 16

boot:
    jmp main
    TIMES 3-($-$$) DB 0x90   ; Support 2 or 3 byte encoded JMPs before BPB.

    ; Fake BPB filed with 0xAA
    TIMES 59 DB 0xAA

main:
    xor ax, ax
    mov ds, ax
    mov ss, ax              ; Set stack just below bootloader at 0x0000:0x7c00
    mov sp, boot
    cld                     ; Forward direction for string instructions

    mov si, sp              ; Print bytes from start of bootloader
    mov cx, main-boot       ; Number of bytes in BPB
    mov dx, 8               ; Initialize column counter to 8
                            ;     So first iteration prints address
.tblloop:
    cmp dx, 8               ; Every 8 hex value print CRLF/address/Colon/Space
    jne .procbyte
    print_char 0x0d         ; Print CRLF
    print_char 0x0a
    mov ax, si              ; Print current address
    call print_word_hex
    print_char ':'          ; Print ': '
    print_char ' '
    xor dx, dx              ; Reset column counter to 0
.procbyte:
    lodsb                   ; Get byte to print in AL
    call print_byte_hex     ; Print the byte (in BL) in HEX
    print_char ' '
    inc dx                  ; Increment the column count
    dec cx                  ; Decrement number of  bytes to process
    jnz .tblloop

    cli                     ; Halt processor indefinitely
.end:
    hlt
    jmp .end

; Print the character passed in AL
bios_print_char:
    push bx
    xor bx, bx              ; Attribute=0/Current Video Page=0
    mov ah, 0x0e
    int 0x10                ; Display character
    pop bx
    ret

; Print the 16-bit value in AX as HEX
print_word_hex:
    xchg al, ah             ; Print the high byte first
    call print_byte_hex
    xchg al, ah             ; Print the low byte second
    call print_byte_hex
    ret

; Print lower 8 bits of AL as HEX
print_byte_hex:
    push bx
    push cx
    push ax

    lea bx, [.table]        ; Get translation table address

    ; Translate each nibble to its ASCII equivalent
    mov ah, al              ; Make copy of byte to print
    and al, 0x0f            ;     Isolate lower nibble in AL
    mov cl, 4
    shr ah, cl              ; Isolate the upper nibble in AH
    xlat                    ; Translate lower nibble to ASCII
    xchg ah, al
    xlat                    ; Translate upper nibble to ASCII

    xor bx, bx              ; Attribute=0/Current Video Page=0
    mov ch, ah              ; Make copy of lower nibble
    mov ah, 0x0e
    int 0x10                ; Print the high nibble
    mov al, ch
    int 0x10                ; Print the low nibble

    pop ax
    pop cx
    pop bx
    ret
.table: db "0123456789ABCDEF", 0

; boot signature
TIMES 510-($-$$) db 0
dw 0xAA55

Output should look like this for any BIOS that didn't update the BPB before transferring control to the bootloader code:

7C00: EB 3C 90 AA AA AA AA AA
7C08: AA AA AA AA AA AA AA AA
7C10: AA AA AA AA AA AA AA AA
7C18: AA AA AA AA AA AA AA AA
7C20: AA AA AA AA AA AA AA AA
7C28: AA AA AA AA AA AA AA AA
7C30: AA AA AA AA AA AA AA AA
7C38: AA AA AA AA AA AA


问:
Unable to access WebAPI using Controller and Action name using MVC5
I have an WebAPI,

```<code> public class SystemHealtController : ApiController
    {
        [HttpGet]
        public IHttpActionResult UpdateUsageDetail(string cpuUsage, string memoryUsage, string diskUsage)
        {

              // Do Stuff

            return Ok();
        }
</code>```

RouteConfig also have default settings,

```<code> public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Job", action = "Index", id = UrlParameter.Optional }
            );
        }
    }
</code>```

But when I navigate to API URL, http://localhost:64384/API/SystemHealt/UpdateUsageDetail?cpuUsage=2&memoryUsage=4&diskUsage=76 , get following error:

HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

The only thing I suspect is, before creating Controller, I Installed

```<code>Microsoft.AspNet.WebApi
</code>```

and then uninstalled as well suspecting that could be the issue. But after uninstall also there were no errors.

答:
have you tried putting a route prefix? </p>

```<code>[RoutePrefix("api/SystemHealt")]
public class SystemHealtController : ApiController
{
    [HttpGet]
    public IHttpActionResult UpdateUsageDetail(string cpuUsage, string
     memoryUsage, string diskUsage)
    {

          // Do Stuff

        return Ok();
    }
</code>```

Body:
I have an WebAPI,

 public class SystemHealtController : ApiController
    {
        [HttpGet]
        public IHttpActionResult UpdateUsageDetail(string cpuUsage, string memoryUsage, string diskUsage)
        {

              // Do Stuff

            return Ok();
        }

RouteConfig also have default settings,

 public class RouteConfig
    {
        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Job", action = "Index", id = UrlParameter.Optional }
            );
        }
    }

But when I navigate to API URL, http://localhost:64384/API/SystemHealt/UpdateUsageDetail?cpuUsage=2&memoryUsage=4&diskUsage=76 , get following error:

HTTP 404. The resource you are looking for (or one of its dependencies) could have been removed, had its name changed, or is temporarily unavailable.  Please review the following URL and make sure that it is spelled correctly.

The only thing I suspect is, before creating Controller, I Installed

Microsoft.AspNet.WebApi

and then uninstalled as well suspecting that could be the issue. But after uninstall also there were no errors.

Body:
have you tried putting a route prefix?

[RoutePrefix("api/SystemHealt")]
public class SystemHealtController : ApiController
{
    [HttpGet]
    public IHttpActionResult UpdateUsageDetail(string cpuUsage, string
     memoryUsage, string diskUsage)
    {

          // Do Stuff

        return Ok();
    }


问:
VueJs Tree recursive elements emits to parent
How do you emit event inside recursive child components vuejs

Taking the tree example from vue site https://v2.vuejs.org/v2/examples/tree-view.html

How would you transmit on click to the parent each clicked elements id?

答:
Here's another solution if you don't want to create multiple Vue instances. I use this in my single file recursive components.

It uses the v-on directive (I'm using the @ shorthand).

In your recursive component <template>:

```<code><YourComponent @bus="bus"></YourComponent>
</code>```

In the recursive component methods:

```<code>methods: {
    bus: function (data) {
        this.$emit('bus', data)
    }
}
</code>```

To kick it off, you emit an event in a child:

this.$emit('bus', {data1: 'somedata', data2: 'somedata'})

That data will be transmitted all the way up the chain, and then you receive that event in the page that called your recursive component:

```<code>methods: {
    bus (data) {
        // do something with the data
    }
}
</code>```

Here's a fiddle showing it in action on the Vue.JS tree example. Right-click on an element, and it will output that model in the console:

https://jsfiddle.net/AlanGrainger/r6kxxoa0/

Body:
Here's another solution if you don't want to create multiple Vue instances. I use this in my single file recursive components.

It uses the v-on directive (I'm using the @ shorthand).

In your recursive component <template>:

<YourComponent @bus="bus"></YourComponent>

In the recursive component methods:

methods: {
    bus: function (data) {
        this.$emit('bus', data)
    }
}

To kick it off, you emit an event in a child:

this.$emit('bus', {data1: 'somedata', data2: 'somedata'})

That data will be transmitted all the way up the chain, and then you receive that event in the page that called your recursive component:

methods: {
    bus (data) {
        // do something with the data
    }
}

Here's a fiddle showing it in action on the Vue.JS tree example. Right-click on an element, and it will output that model in the console:

https://jsfiddle.net/AlanGrainger/r6kxxoa0/


问:
MVC 4 with OWIN
Breakdown:

I created an empty MVC 4 project and proceeded to do the website.

Realizing I need authorization and authentication in my project, I looked around and found OWIN to be my solution

Tried to download OWIN packages through NuGet, but found that the targeting framework did not match.

OWIN said it needed a .NET framework of 4.5, which I'm currently at.

Confused, I still changed my project's .net to 4.6, which helped me successfully download OWIN

Tried to run project, but gave me this error:

"Could not load file or assembly 'Newtonsoft.Json, Version=4.5.0.0, Culture=neutral, PublicKeyToken=30ad4fe6b2a6aeed' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)"

So I changed my project back to 4.5, grudgingly uninstalled OWIN and tried to run the project, but the error still shows.

I'm at a loss with what to do now. I can't even run my project even after bringing 4.5 back. Can I keep trying  to change my .NET framework version, or at this point, should I just install a lower version of OWIN?  Thanks

EDIT  I have tried to reinstall newtonsoft in the package manager console through a code I found on here, which didnt work

答:
Solved this problem by reverting my project back to .NET framework 4.5, and installing an older version of OWIN

In the package manager console:

```<code>Install-Package Microsoft.Owin.Host.SystemWeb -Version 2.1.0
</code>```

then also add:

```<code><add key="owin:AutomaticAppStartup" value="false" />
</code>```

to <appSettings> in Web.config file if errors about OwinStartupAttribute show up.

Apparently the main problem I had was because I was using VS2012, which is not supported by NuGet 2.12, the version needed for the latest OWIN.

Thanks to everyone's help

Title: MVC 4 with OWIN

Body:
Solved this problem by reverting my project back to .NET framework 4.5, and installing an older version of OWIN

In the package manager console:

Install-Package Microsoft.Owin.Host.SystemWeb -Version 2.1.0

then also add:

<add key="owin:AutomaticAppStartup" value="false" />

to <appSettings> in Web.config file if errors about OwinStartupAttribute show up.

Apparently the main problem I had was because I was using VS2012, which is not supported by NuGet 2.12, the version needed for the latest OWIN.

Thanks to everyone's help


问:
I've been coding with notepad++ and now I'm getting into Eclipse IDE and I'm having trouble with my older projects
So,
I have been coding Java last semester (college) and we've always done it in Notepad++ , compile and execute by CMD (very simple programs though) and now I want to start codding in Eclipse, since I heard that it saves you a lot of time in syntax and gives you a heads up on typos and errors (Also I'm tired of compiling and executing by console). But the thing is that I usually have my code into two folders (model and interface) and use the

```<code>package modelo;
package interfaz;
</code>```

And now I execute eclipse and open these files, but it doesn't seem to work, I mean the code shows up and I can edit, but it wont show help or even let me execute the code. I know it must be a very noobie question but I can't seem to make it work.

Update:
This is what i get when i import my "project"
This is the error

答:
maybe eclipse didn't figure out which main you want to run.

try right click on Menu.java -> run as -> 1 Java Application

Body:
So,
I have been coding Java last semester (college) and we've always done it in Notepad++ , compile and execute by CMD (very simple programs though) and now I want to start codding in Eclipse, since I heard that it saves you a lot of time in syntax and gives you a heads up on typos and errors (Also I'm tired of compiling and executing by console). But the thing is that I usually have my code into two folders (model and interface) and use the

package modelo;
package interfaz;

And now I execute eclipse and open these files, but it doesn't seem to work, I mean the code shows up and I can edit, but it wont show help or even let me execute the code. I know it must be a very noobie question but I can't seem to make it work.

Update:
This is what i get when i import my "project"
This is the error


问:
Cycles in an Undirected Graph
Given an undirected graph G=(V, E) with n vertices (|V| = n), how do you find if it contains a cycle in O(n)?

答: You can use boost graph library and cyclic dependencies. It has the solution for finding cycles with back_edge function.

OwnerDisplayName: Eran Kampf

Title: Cycles in an Undirected Graph

LastEditorDisplayName: ceretullis


问:
fill in each zip-code with a different color for basemap of Matplotlib in Python 3.2
I am working on coloring zip-code polygon in a basemap of Matplotlib in Python 3.2.

I need to fill in each zip-code with a different color.

The zip-code information comes from shapefile.

I cannot find solutions at:
http://matplotlib.org/basemap/api/basemap_api.html

Any help would be appreciated.

Thanks

答:
Basemap has a pretty handy way to read in a shapefile.

```<code>m = Basemap()
m.readshapefile('file_without_extension', 'name')
</code>```

You can then access information on the shapefile with m.name and m.name_info.

Then create the dataframe you want to use for color info.

```<code>import pandas as pd
import numpy as np
from matplotlib.patches import Polygon

zipdf = pd.DataFrame({
    'shapes': [Polygon(np.array(shape), True) for shape in m.name],
    'zip': [area['zip'] for area in m.name_info]
})
</code>```

If you want to include information for coloring that is not included in the shapefile, merge that other info with the DataFrame you just created.

```<code>zipdf = zipdf.merge(other_df, how='right', on='zip')
</code>```

Now for actually coloring the map, I used a colormap that takes values for rental prices in the zipcode, so I'll show that.

```<code>from matplotlib.collections import PatchCollection
import matplotlib.cm as cm
import matplotlib.colors as colors

fig = plt.figure()
ax = fig.add_subplot(111)

cmap = plt.get_cmap('viridis')
pc = PatchCollection(zipdf['shapes'], zorder=2)
norm = colors.Normalize()

pc.set_facecolor(cmap(norm(zipdf['price'].values)))
ax.add_collection(pc)

cmapper = cm.ScalarMappable(norm=norm, cmap=cmap)
cmapper.set_array(zipdf['price'])
plt.colorbar(cmapper)

plt.show()
</code>```

For a bit more on this, check out Creating Attractive and Informative Map Visualisations in Python with Basemap from Data Dependence.

Body:
Basemap has a pretty handy way to read in a shapefile.

m = Basemap()
m.readshapefile('file_without_extension', 'name')

You can then access information on the shapefile with m.name and m.name_info.

Then create the dataframe you want to use for color info.

import pandas as pd
import numpy as np
from matplotlib.patches import Polygon

zipdf = pd.DataFrame({
    'shapes': [Polygon(np.array(shape), True) for shape in m.name],
    'zip': [area['zip'] for area in m.name_info]
})

If you want to include information for coloring that is not included in the shapefile, merge that other info with the DataFrame you just created.

zipdf = zipdf.merge(other_df, how='right', on='zip')

Now for actually coloring the map, I used a colormap that takes values for rental prices in the zipcode, so I'll show that.

from matplotlib.collections import PatchCollection
import matplotlib.cm as cm
import matplotlib.colors as colors

fig = plt.figure()
ax = fig.add_subplot(111)

cmap = plt.get_cmap('viridis')
pc = PatchCollection(zipdf['shapes'], zorder=2)
norm = colors.Normalize()

pc.set_facecolor(cmap(norm(zipdf['price'].values)))
ax.add_collection(pc)

cmapper = cm.ScalarMappable(norm=norm, cmap=cmap)
cmapper.set_array(zipdf['price'])
plt.colorbar(cmapper)

plt.show()

For a bit more on this, check out Creating Attractive and Informative Map Visualisations in Python with Basemap from Data Dependence.