Question 37798 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

CSS/SCSS changes to code not applying in browser – Ubuntu

I am trying to hide a number by modifying the scss/css. It is the tag in the picture: poll-row__number.

Screenshot inspector
Strange thing is also it is not in the scss file the inspector is showing but another.

I am running an Adhocracy installation (Nginx on Ubuntu Linux) in a virtual environment. I changed all the poll-row__number references in css/ scss files to display:none / visibility:hidden. Rebooted the server and deleted my cache from my browser, tried Chrome, FireFox and Safari. But the number stays visible. When I change it in the inspector, it dissapears.

This is my css directory with files css with directories
The poll-row__number is in _poll.scss like here Tag in my scss
As you can see the value display:none/ visibility:hidden is added.

When grepping the div it finds nothing systemwide. When grepping the pol-row__number it finds it, but everything it finds is changed to display:none/ visibility:hidden.

What am I doing wrong and what else do you want for information to help me fix this strange ptoblem.

I tried all I can think of.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Thanks for all the help. I found the solution. Maybe obvious for a lot of developers, but I am not a pro in this sence.

    What I did:

    I changed the css/scss files that I wanted to change. Then I went to my virtual environment and did:

    npm install npm run build:prod
pip install --upgrade -r requirements.txt
export DJANGO_SETTINGS_MODULE=adhocracy-plus.config.settings.build
python manage.py compilemessages
python manage.py collectstatic

    I do not know if they all are needed, but I figured, maybe the css/scss is build and stored somewhere and then called so it overrides the css file in the projectfolder. After this I restarted my processes:

    sudo systemctl

restart Adhocracy-plus

sudo systemctl restart Adhocracy-plus.service

sudo systemctl restart Adhocracy-plus-background-task

sudo systemctl restart nginx

    Then it worked.

    In conclusion:

    CSS/SCSS is compiled. So changed the CSS/SCSS, recompiled/ build the project ,restarted the services.


  2. 0

    There’s not much of code you’re showing us. So it’ll be hard to find the error.

    • Try to add display: none; in the console (web browser)

    • First make sure the scss is translated to the css file :

    sass –watch src/scss/_project_header.scss:src/css/_project_header.css

    • Second, verify that the .poll-row__number is not used in another css file linked to you html file because as we can see the current display is inline-block.

    • Then, check if you don’t use twice .poll-row__number because the basic css rule is the following, the last property stated is the one that overlaps the others, example :

    CSS

    .poll-row__number{
display :none;
}

.poll-row__number{
display :inline-block;
}

    There, .poll-row__number will get inline-block. And I just saw that you have this issue in your code (or was it on purpose) :

    Line 1 : .poll-row__number (has no display property)
    Line 2 : .poll-row__number, .poll-row__label (has display inline-block)

    (It is my opinion but using "__" for ids or class is ugly and confusing. Please stop it: either use "CamelCase" or just use one "_")

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search