I am seeking to achieve a unique visual style for the rows in my table, similar to the one shown below. I attempted to use CSS border properties in the code snippet provided but desire more spacing between each row with a thin border and sharp edges.
.datatable-body-row {
border: 4px double $light-gray-600;
border-top: none;
}
For reference, here is a Stackblitz demo page.
To achieve the desired style, remove the CSS from .datatable-body-row and apply the following CSS to .datatable-row-center:
.datatable-row-center {
border-style: solid;
border-width: 1px;
border-color: #ccc;
margin-top: 1px;
margin-bottom: 1px;
}
.datatable-row-wrapper:hover .datatable-row-center {
border-color: rgb(104, 152, 241);
}
You can adjust the top and bottom margin based on the desired gap between each row, keeping them equal is recommended if possible.
Regarding the dark blue border on selection, it actually comes from the background color of the parent cell rather than a border. The following code should remove it:
.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover
{
background: none;
}
For the left and right borders, please check out this link. If the borders are not visible, could you provide a screenshot for reference? I made some adjustments by adding margin and removing box shadow from the table container to make the left and right borders more apparent on each row.
In addition, I included the following new CSS rules:
.ngx-datatable.material.single-selection .datatable-body-row.active,
.ngx-datatable.material.single-selection .datatable-body-row.active:hover
{
background: none;
}
.data-container {
margin-left: 24px;
margin-right: 24px;
.ngx-datatable.scroll-vertical {
height: calc(100vh - 10px);
width: $collection-list-table-width;
box-shadow: none;
}
}
HTML code <div> <label for="" >No additional information flag:</label> <rca-checkbox formControlName="noAdditionalInfoCheckbox" (checkboxChecked)="onCheckboxChecked($event)"></rca-chec ...
Encountering an issue while attempting to install the Angular CLI from npm, as it gets stuck asking to loadAllDepsIntoIdealTree. Here are the steps taken: C:\Windows\system32\node -v v6.11.1 C:\Windows\system32\npm -v 3.1 ...
Our website, www.desirio.com, utilizes a background-image on the body with the following CSS property: background-blend-mode: luminosity An issue we have noticed in Chrome is that when hovering over elements, strange white lines randomly flash on the scr ...
Currently, I am facing a challenge in my Angular2 service where I am attempting to integrate the LinkedIN javascript SDK provided by script linkedin. The functionality is working as expected for retrieving data from LinkedIN, however, I am encountering an ...
How do I make the backdrop appear when the popover is displayed, and disappear when the popover is closed? $(function(){ var content = '<button class="btn btn-sm btn-default" onclick="location.href=\'/billing/\'">Pay Now ...
I am currently working on a Single Page Application (SPA). My main objective is to evaluate the performance of the application using . Given that the application is an SPA, I want to simulate a scenario where all static content is loaded when a user firs ...
I am currently facing an issue where I need to dynamically sort data from the server based on different fields. While sorting is working flawlessly for all fields, I am encountering a problem with the time slot field. The challenge lies in sorting the data ...
Encountering an issue with navigating to the register page using a firebase authentication promise. Instead of displaying only the register page, both the login page and register page are shown simultaneously: Login page with social buttons Register page ...
I'm struggling with formatting a <span> tag, specifically the .lastMessageLink class that contains an <a> element with the .lastMessageText class. The content within .lastMessageText can vary from just a few characters to a lengthy paragra ...
Currently, I have implemented a jQuery function to display a popup box using .show() and hide it using .hide(). Is there a way to incorporate charming animations such as fading into the popup box? // display pop up $('.mypopup').show(); // con ...
I need to apply unique styling to certain nodes in the codebehind. Within my TreeView, parents have two categories of children. One category matches the parent type (e.g. organizationalUnit), while the other does not (e.g. organizationalMembers). I aim t ...
Currently, I am facing an issue with my h5 elements within the navbar when scrolling. I am using Bootstrap 4 and jQuery for this project. The problem arises in my navbar where there are four sets containing an icon, followed by an "h5" and then a "p" elem ...
My footer design includes a rounded left image, a repeating middle section, and a rounded right image. How can I ensure that it scales perfectly responsively without overlapping? Ideally, the solution would involve adjusting the width of the middle section ...
In my development environment, I am using Angular 6.0.9 with Spring Boot 2.0.7 and Spring 5.0.7. I have encountered a frustrating issue where my Angular application is unable to detect the token present in the request header. On the backend, I am using Sp ...
I'm just starting out with Angular 2 and I'm attempting to create a list of editable objects using ngFor, where users can add new objects and save the data. Here is the initial data: business: { email: "<a href="/cdn-cgi/l/email-protection" c ...
I need assistance with formatting numbers in my Angular 4 application. I want to display the number in a certain format based on its value. For example, if the number is 12.23 million, it should be displayed as 12.2M (with one decimal place). If the numbe ...
I need to display a pop-up with data from a table row, similar to the image at this URL for CS WHOLESALE GROCERS. I've implemented the following AngularJS code in my controller: app.directive('tooltip', function(){ return { res ...
My header currently displays a horizontal infinite scroll of text, but I am looking to achieve a square pattern wrapping around the page. Can you provide guidance on how this can be accomplished? Below is the code snippet I am working with: .marquee { ...
Is it feasible to create an observable that can wrap around the sessionStorage.getItem('currentuser')? This way, calling code can subscribe and retrieve the value only after it has been set in the sessionStorage. Do you think this is achievable? ...
I'm having trouble loading images from a local path in my project. The images are not rendering, but they do load from the internet. Can someone please help me figure out how to load images from a local path? I have already created a folder for the im ...