I am working with the following code:
function exportTableToExcel(tableID, filename = ''){
var downloadLink;
var dataType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
// Specify file name
filename = filename?filename+'.xls':'excel_data.xls';
// Create download link element
downloadLink = document.createElement("a");
document.body.appendChild(downloadLink);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTML], {
type: dataType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
// Create a link to the file
downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
// Setting the file name
downloadLink.download = filename;
//triggering the function
downloadLink.click();
}
} .flex-container {
width: 100%;
height:98vh;
display: flex;
flex-wrap: wrap;
background-color: DodgerBlue;
}
.flex-container > div {
max-width: 100%;
display: flex;
flex-direction: column;
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}
#path, #skills {
/* will prevent resizing horizontally */
/* resize:vertical; */
width: 250px;
max-width: 250px;
min-width: 250px;
}
table, td, th {
border: 1px solid #ddd;
text-align: left;
}
table {
border-collapse: collapse;
width: 100%;
}<div class="flex-container">
<div style="flex-grow: 1">
<input id="path" placeholder="cvs path"/>
<textarea id="skills" placeholder="Key skills" rows="4" cols="50"></textarea>
</div>
<div style="flex-grow: 9">
<table id="tblData" >
<tr>
<th>Name</th>
<th>Email</th>
<th>Country</th>
</tr>
<tr>
<td>John Doe</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a1cbcec9cfe1c6ccc0c8cd8fc2cecc">[email protected]</a></td>
<td>USA</td>
</tr>
<tr>
<td>Michael Addison</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="610c08020900040d21060c00080d4f020e0c">[email protected]</a></td>
<td>UK</td>
</tr>
<tr>
<td>Sam Farmer</td>
<td><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b7c4d6daf7d0dad6dedb99d4d8da">[email protected]</a></td>
<td>France</td>
</tr>
</table>
<button onclick="exportTableToExcel('tblData', 'members-data')">Export Table Data To Excel File</button>
</div>
</div>The layout is exactly what I need on a full browser screen:
https://i.sstatic.net/7fS8s.png
However, when the view size is changed, it does not look as appealing. I would like two changes to occur when the flex layout splits into a vertical view:
- The "input" and "textarea" in the first flex item should expand horizontally to 90% of the flex view
- The font size of the data in the table should be adjusted to a smaller but still readable size