External stylesheet failing to apply CSS styling

I've been attempting to establish a minimum width for the container-fluid in my SpringBoot apps UI. I have created a report.css file

.report {
  min-width: 1200px;
  overflow: scroll;
}

Include it in the HTML file:

<link rel="stylesheet" type="text/css" src="../../resources/css/report.css" th:src="@{/resources/css/report.css}"/>
<body class="container-fluid report">

However, I am facing issues with its implementation. Can anyone provide guidance on how to troubleshoot this? Thank you in advance.

htmlcssspring-bootbootstrap-4

Answer №1

Opt for href over src when using <link>

If you want to connect an external stylesheet to your HTML page, make sure to utilize the href attribute and not the src attribute.

For more information, check out the details in the documentation

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Created an HTML and PHP form, but struggling to pinpoint the issue

I created a form to send data to an email address. However, after filling out the form and submitting it, the browser displays the following message: Server error. The website encountered an error while trying to access http://localhost/process.php. Be ...

phphtml

Step-by-step guide on importing .obj and .mtl files into a Vue component with Vue CLI 3

Being new to VueJs and Three, my code is mostly just copied and pasted. I am trying to figure out how to load a 3D file (.obj) and its corresponding material file (.mtl) into a Vue component. I have already installed Three.js and imported the necessary loa ...

htmlcssvue.jsthree.jsvue-cli-3

Applying custom CSS to individual divs based on their text height using jQuery

I have a grid consisting of multiple boxes each sized at 280px by 280px, and I am seeking a way to vertically align text within hover overlays on each box. While my current code successfully aligns the text for the first box, I am encountering issues due ...

javascriptjqueryhtmlcss

Forcing Reload of HTML5 Video to Avoid Caching Issues

Is there a way to instruct the HTML5 Video tag to stream the video chunks on demand/load without caching them on the client side? Essentially, how can I prevent the browser from storing the HTML5 video in its cache? My main objective is to have the video ...

javascriptasp.nethtmlhtml5-video

Display the text '0 comments' on the posts.php webpage within Anchor CMS

I have implemented this PHP code to display comments on my homepage: Functions.php function show_article_comments() { return Comment::where('post', '=', article_id()) ->where('status', '=', 'approved& ...

phphtmlanchor-cms

Submission successful, but email not received despite no errors in contact form

I've been struggling to build a PHP contact form and tried many solutions without success. I am not sure what is wrong with my code, but no email is being sent. PHP is not my strongest skill, so if there is an error in my code, please let me know. I w ...

phphtmlemail

How can we avoid animations being interrupted by user interaction?

My webpage has an animation that runs smoothly on desktop, but stops as soon as I interact with the page on a touch device. I have tested this issue on Chrome and Safari on iPad. I'm curious if this behavior is intentional on the part of browser vend ...

javascripthtmlanimation

Expanding a background image in CSS to cover the entire width of the

My background image is 1920x579px and I'm struggling to make it cover the full width of the screen without stretching its height to the bottom, which would make it look distorted. I've tried various methods but nothing seems to work. Can anyone o ...

css

Various colored backgrounds in a random arrangement on a grid post layout

I'm looking to implement this plugin for displaying blog posts, but instead of using an image as the background, my client wants different colored images. I have managed to figure out the code to achieve this based on a post I found here, but unfortun ...

javascriptcsswordpressbackgroundalternating

Embracing the flexibility of flexbox nesting

Flexbox has been a game-changer for me, and I can't help but want to incorporate it into all my projects since I first started using it. Curious Thought I'm wondering if nesting flex-boxes is considered best practice. Could having numerous, espe ...

cssperformanceresponsive-designfrontendflexbox

How can I make a single <input> element that can handle both files and urls simultaneously?

Is there a way to enable my users to import both local and remote files using just one input field? A possible solution, inspired by Stackoverflow, is to implement tabs: Another approach could be using radio buttons like this: <style> .display ...

jqueryhtmlcssformsfile-upload

The scroller's height is displayed at 100%

I'm experiencing an issue with the scrolling of a division. I've set the overflow to "scroll" for the division, but it's displaying at 100% height. Please refer to the screenshot provided. Can you advise me on which properties I should adjus ...

htmlcss

Incorrect form element style is only visible when contained within an unstyled HTML Details tag

A demonstration form control extracted from the Bulma CSS framework documentation performs as anticipated with Bulma 0.7.2 (most up-to-date version at the time of writing). However, when this form is contained within a standard html <details> tag, t ...

csshtmlbulma

Tips for adjusting the size of grid tiles according to the dimensions of the window within a specific range

I am currently exploring how to replicate the effect found on this webpage: When the window size is adjusted, javascript dynamically resizes the grid tiles between 200 and 240px based on the optimal fit for the screen. Is there a ready-made JavaScript/jQ ...

javascriptjquerycssresponsive-design

Verification of login credentials

When a user enters an unregistered email, they should see the message "Login Failed : Email Not Registered." If the password is incorrect, the message displayed should be "Login Failed : Please Enter The Right Email/Password Combination.". However, I am e ...

phphtmlmysqli

Encountering the issue of receiving an undefined class when using the img tag in a

In my React.js project, I encountered an issue where the class for the img tag is appearing as undefined. The problem lies within the Header.jsx component. In this file, I am using the <img> tag but the CSS properties are not being applied to the ima ...

javascriptcssreactjsmaterial-uicomponents

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss

Issue with CSS wrapper background not displaying

I am currently working with a layout that looks like this: <div class="contentWrapper"> <div class="left_side"></div> <div class="right_side"></div> </div> The contentWrapper class is styled as follows: .contentWrappe ...

cssbackgroundcss-float

Overlay causing z-index conflict

I am struggling to create an overlay effect that is not displaying correctly. .overlay { position: absolute; background-color: rgba(0, 0, 0, 0.6); z-index: -1; width: 100%; height: 100%; } .center-div { position: absolute; top: 50%; left ...

css

Using a combination of HTML and JavaScript to verify the accuracy of the password entered

I'm in the process of creating a website where users can input a code and be redirected to a specific page. It's crucial that each unique code leads the user to a different destination. For example, code 123 should take them to index.html while ...

javascriptphphtml