How do I eliminate the excessive white space between the Name column and the first date column that displays 24?
It seems to be triggered by the Bootstrap CSS, but the reason is not clear.
The issue disappears from my model when there are more dates in the calendar, but I'm having trouble pinpointing the exact cause.
Your table currently has a width of 100%, but it is recommended to change that to width: auto
#container-body {
padding-bottom: 1rem;
padding-top: 1rem;
}
#locala-oc {
height: 30px;
padding-right: 1rem;
}
table.dt-table {
border-spacing: 0;
}
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
justify-content: center;
margin: 0;
}
nav {
border-bottom: 1px solid #792273;
}
.form-text-bottom {
display: block;
margin-bottom: 0.5rem;
}
thead.remove-header-top > tr > th {
border-top: 0;
padding-top: 0;
}
tr.table-striped-odd {
background-color: rgba(0, 0, 0, 0.05);
}
.validation-summary-errors ul {
list-style: none;
}
.stock-card {
height: 220px;
}
.stock-card-header {
height: 80px;
vertical-align: middle;
}
#calendar th,
#calendar td {
white-space: nowrap;
}
#calendar th.name,
#calendar td.name {
background: white;
position: absolute;
margin-left: -200px;
width: 200px;
}
.calendar-wrapper {
overflow-x: scroll;
width: 100%;
}
#calendar {
table-layout: fixed;
margin-left: 200px;
}
#calendar col.day,
#calendar th.day,
#calendar td.day {
width: 40px;
text-align: center;
}
#calendar > thead > tr > th.weekend,
#calendar > tbody > tr > td.weekend {
background: lightgray;
}
#calendar > tbody > tr > td.user-rt {
background-color: #792273;
}
#calendar > tbody > tr > td.user-al {
background-color: darkgray;
}
#calendar > tbody > tr > td.user-rt.user-al {
background: -webkit-gradient(linear, left top, right bottom, color-stop(50%, red), color-stop(50%, green));
}
.table{
width: auto !important;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<div class="calendar-wrapper">
<table id="calendar" class="table table-bordered">
<colgroup>
<col class="name">
<col class="day" data-date="20171124">
<col class="day weekend" data-date="20171125">
<col class="day weekend" data-date="20171126">
<col class="day" data-date="20171127">
<col class="day" data-date="20171128">
<col class="day" data-date="20171129">
<col class="day" data-date="20171130">
</colgroup>
<thead>
<tr>
<th class="name"> </th>
<th class="text-center" colspan="7">November 2017</th>
</tr>
<tr>
<th class="name">Name</th>
<th class="day" data-date="20171124">24</th>
<th class="day weekend" data-date="20171125">25</th>
<th class="day weekend" data-date="20171126">26</th>
<th class="day" data-date="20171127">27</th>
<th class="day" data-date="20171128">28</th>
<th class="day" data-date="20171129">29</th>
<th class="day" data-date="20171130">30</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">User A</td>
<td class="day user-rt" data-date="20171124" data-userid="1873">
</td>
<td class="day weekend user-rt" data-date="20171125" data-userid="1873">
</td>
<td class="day weekend user-rt" data-date="20171126" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171127" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171128" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171129" data-userid="1873">
</td>
<td class="day user-rt" data-date="20171130" data-userid="1873">
</td>
</tr>
</tbody>
</table>
</div>I need to update my express app to handle 404 (and 500) errors by displaying HTML instead of plain text. I have been able to show text to the client for 404 errors, but now I want to show HTML instead. My 404.html file is located in the /app directory. Cu ...
Currently, I am in the process of integrating a leaflet map into my meteor-based website that utilizes blaze as its templating engine. I have encountered some peculiar issues regarding the map size and its behavior when dragging and zooming. The map init ...
Need some assistance with my code. I'm trying to display a div when the visibility class is set to visible, but it's not working as expected. Can someone help me troubleshoot this issue? CSS: #nor1 {position:absolute;top:100px;left:100px;z-inde ...
I have implemented a function to retrieve the two-letter country code: $ipaddress = $_SERVER['REMOTE_ADDR']; function ip_details($ip) { $json = file_get_contents("http://ipinfo.io/{$ip}"); $details = json_decode($json); return $detai ...
When it comes to extracting a sub image from a webpage using Selenium, I have found a reliable method. First, I capture a screenshot of the entire page and then extract the desired sub-image using the element's coordinates. Dimension elementDimension ...
I'm in the process of creating an error page for my app, and I'm trying to figure out how to add a Wicket ExternalLink that takes users back to the previous page. I believe I need to store the parameters or entire URL of the last visited page, b ...
Angular is a new framework for me and I've noticed that it uses directives which are considered as data-* attributes, a feature introduced in HTML5. This got me curious about whether AngularJS is specifically designed for HTML5 or if there are ways to ...
I initially had my angular app loading my javascript correctly, but the routing was not properly set up. I am currently trying to resolve this issue, but now my javascript alert is not even popping up, indicating that the file is not connected. Can anyone ...
After running a small test with expect.js, here are the results: describe('xpath', function () { it('locates attribute nodes', function () { $(document.body).append('<string fooBar="bar"><data id="xyz">< ...
After looking into the File API, I'm curious about when all major browsers will fully support it: Firefox has supported it since version 3.6 Chrome since version 8.0 What about Opera and IE? Is the File API meant to replace flash-based uploaders li ...
My webpage has a parent div with multiple child divs in one row. These child divs are generated dynamically, so I don't know how many will be displayed at once. The parent div has a fixed width and a horizontal scrollbar appears when all child divs ar ...
Greetings, I'm seeking assistance in replicating a specific button click on a website. Here is the code for the button: <button type="button" class="btn btn-link btn-xs" onclick="getComponents('188855', '5a0f44a9d70380.12406536&apo ...
I have 2 cards with the class card displayed within a card-stack. There can be any number of such cards. <div class="card-stack"> <div class="clear"><button name="clear" value="Clear all" onclick=&qu ...
In my Angular project, I utilized Matmenu and MatDialogModule. I needed to change the position of mat-menu, so I achieved this by adding the following snippet to my .scss file. ::ng-deep .cdk-overlay-pane { transform: translate(78%, 10%); } However, ...
I have been trying to implement a JavaScript code that loads a specific stylesheet based on the user's browser. However, it seems like the code is not functioning correctly as none of the stylesheets are being displayed. I have meticulously reviewed t ...
After successfully installing a new library with npm, I now face the challenge of importing the CSS into my project. It seems unwise to directly link to the node_modules folder. Can anyone suggest an easy way to import this CSS into my Angular CLI project? ...
<ButtonAtom></ButtonAtom> this is my custom button component. <template> <div> <button class="px-2 py-1" :class="[borderRadius, backgroundColor]"> <slot /> </button> <div> </ ...
I am facing an issue where I need to relocate an external script within a specific section of my page. However, I am unable to access the CSS attributes associated with this item. It seems that it is displayed as an iFrame, making it difficult to modify th ...
Does Javascript have a specific function for this type of replacement? (replaceAll) PARAMS+= "&Ueberschrift=" + ueberschrift.replaceAll(">",">").replaceAll("<","<"); PARAMS+= "&TextBaustein=" + textBaustein.replaceAll(">",">"). ...
Encountering an issue with PHPMailer that seems to be puzzling me. A simple form has been set up with AJAX and PHP, where the input values are sent to PHP for validation. Once approved, PHP collects all relevant data (name, email, message, etc.) and creat ...