Floating button CSS is not working

0
Hi Team,   Currently, I’m facing an issue while configuring the floating button widget. For changing the color of the Floating button I try to add new styles in the co-responding CSS file. After I made changes in the file I synced the application and then I ran the application in local.    However, when I inspecting the element I found that there are no change showing in the browser. Server showing the same page where I make changes in the CSS file. But, my changes are not showing in the browser.   For example,  X.scss is a file where all the CSS written for floating buttons.   .fixed-action-btn ul {   bottom: 180px; } ul.fabul-root>li::before {   right: 110px;   top: 46px; }   Previously this code was present. I make changes in one of this class.   .fixed-action-btn ul {   bottom: 180px; } ul.fabul-root>li::before {   right: 110px;   top: 46px;   background: #52d169 !important; }   Newly added CSS shown in bold. After syncing the application when I ran this the browser only showing me the following:   .fixed-action-btn ul {   bottom: 180px; } ul.fabul-root>li::before {   right: 110px;   top: 46px; }   Can anyone suggest me how can I modify the CSS of this?  
asked
3 answers
0

Hi Tanmay,

  • Browsers often cache CSS files to improve page loading speed. To see the changes you made, try clearing your browser's cache and reloading the page. You can usually do this by pressing Ctrl + Shift + Delete.
  • A regular reload may still show the cached CSS. Try doing a "hard reload" by pressing Ctrl + F5. This will force the browser to fetch all resources, including the updated CSS, from the server.
  • It's possible that custom CSS rules are overridden or not applied correctly.
answered
0

Hi Brandon & Bharathidasan,

 

Yes I checked the Network tab in the developer console of your browser and found that the CSS file is being loaded from the server only. the Status column showing 200.

However, my code remain unchanged as it was. Any kind of modification on the particular file is not reflecting. Also checked the correct folder structure of the file . It’s look all ok from my side.

answered
0

Did you modify existing atlas core files or did you add another file , if you added another file, make sure that file is imported in your index.scss.  I think it is not currently being included.

 

So for example if your dashboard.scss is located in the components folder you would have an index.scss file in that same folder where you have a line:

@import './components/dashboard';

 

Caching could be an issue but I don't think so in this case.

answered