Currently, I am facing a design issue in my Angular Project that I need help with.
I am attempting to achieve a scrolling effect on the body of a table while keeping the header fixed.
Although I have tried to implement this feature, I have been unsuccessful in making only the table body scrollable.
If you would like to take a look at my code and design, please click on the following link:
https://stackblitz.com/edit/angular-x8c89j?file=src%2Fapp%2Fapp.component.html
Make sure to adjust your table style according to the guidelines provided below
table {
width: 100%;
}
table, td {
border-collapse: collapse;
border: 1px solid #000;
}
thead {
display: table;
width: calc(100% - 17px);
}
tbody {
display: block;
max-height: 200px;
overflow-y: scroll;
}
th, td {
padding: 5px;
word-break: break-all;
}
tr {
display: table;
width: 100%;
box-sizing: border-box;
}
td {
text-align: center;
border-bottom: none;
border-left: none;
}
tr th:first-child,
tr td:first-child {
width: 100px;
}
I am currently utilizing the bootstrap grid system, as depicted below, and I am attempting to center some div elements (pic). Despite my attempts with various CSS properties like {margin:0 auto; width:50%}, I am unable to achieve the desired result. I fi ...
When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...
In the provided code snippet, I have included a javascript onclick function to the image tag. After clicking the image and then going back, the page remains on the current page rather than returning to the original page. Is there a way to prevent this beha ...
UPDATE: The issue has been resolved. It turns out that the navbar was not extending to 100% width and reaching the edges of the screen. I am currently facing a challenge with a Bootstrap 4 navbar, similar to issues I encountered with the previous version. ...
I have a set of N arrays that contain objects with the same keys. arr[ {values:val1,names:someName}, {values:val2,names:otherName}, ] arr2[ {values:valx,names:someNamex}, {values:valy,names:otherNamey}, ] My goal is to combine all possible c ...
Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...
My goal is to have my h1 heading styled with Montserrat font in black and font weight 900. However, when I checked my website using Google Developer Tools, I noticed that the CSS code I applied is being overridden by the Bootstrap link. Unfortunately, dele ...
My form includes a list of 6 options where users can only select one. After submitting the form, I want to redirect them to a specific page based on their selection. For example, I have the following 3 options: Facebook Youtube Twitter If a user selects ...
I am currently developing a task management application called "todolist." In my node.js code, I utilize express and grant it access to my directory named Client: var app = express(); app.use(express.static(__dirname + "/Client")); The contents of my Cl ...
I'm working with a php loop that is outputting geolocation values. I want to save these values in a javascript array so that I can use them to plot points on an HTML5 canvas. How can I achieve this? Here is the php loop: <ul id = "geo-list"> ...
Currently, I am facing an issue with the positioning of the page footer. Despite my efforts, it does not remain at the bottom as intended. Please refer to the image for a visual representation of the problem. How can this be rectified? It is worth noting ...
Hey there! I'm currently utilizing VueJS along with the webpack template. I've got a variety of components that I can easily showcase with Vue Router. However, the testing framework utilized by my team is Robot Framework and we typically create a ...
Currently, I am working on a project that involves displaying real-time data from a server. During the testing phase using MQTT client WebSocket tools like HiveMQ, I encountered an issue. While I can see the value of the data in the Chrome console, I' ...
In my Ionic 3 application, I have the following code snippets: @Injectable() // I also tried without @Injectable and encountered the same error export class M_someClass { constructor () { } method1 () { console.log("method1 used") } } @Injectabl ...
Currently, I am working with asp.net mvc4 and encountering an issue where the button's color does not change when hovered over. The default blue focus always remains on the button. Can someone assist me in resolving this problem? I am using Internet E ...
I am working on a project where I need to surround an image with a specific sized 'div' based on the image's dimensions. The images that will be used are stored in an array and I need to extract the height and width of each image before disp ...
I've been struggling to create a CSS table style using tr:nth-child to alternate row colors: Row 1 - Blue Row 2 - Blue Row 3 - White Row 4 - White ... and so on. I can't seem to get it right! Can anyone help me out with this? Appreciate an ...
Is there a way to automatically create a URL from a route using code? For instance, let's say I have a login component defined in my routes: const appRoutes: Routes = [ ... { path: 'login', component: LoginComponent }, ... ]; N ...
Hello there! I am a web developer seeking a method to simulate mobile devices while displaying their respective navigation bars, toolbars, and more. In Google Chrome's 'Device toolbar' (v58 on macOS), there is a specific mode available for t ...
Can someone help me with my Unity webGL game issue? I downloaded it from the internet, but I'm not sure what version of Unity was used to create it. When the game starts playing, it displays in a small canvas along with other elements like the Unity ...