I've noticed quite a few of these questions around but I also noticed that most of them don't have a clear answer. My problem is that the font weights on my app's navbar keep changing as I navigate. Here are two pictures of before and after:
This is how it should look (kind of). It looks like this when I click on a link in the navbar.
Pic1
This is when I click outside the Navbar:
Pic2
You can see that the font weight drops to what is seemingly 100.
Here is what I've tried:
Imported Lato in my html file from Google Fonts with all the weights,
but Semantic UI CSS still cancels it out.
I've tried adding more CSS to directly override the other css (You can see this by inspecting the
title 'JOBTME'. It's actually better when I remove that last class I added. Other attempts at overriding keeps being overridden itself by semantic Ui.
Tried removing blocks of my css to see if it affects the problem, but to no success.
My Index.js has styles loading after it:
import React from 'react';
import ReactDOM from 'react-dom';
import 'semantic-ui-css/semantic.min.css';
import './styles.css';
(...)
My goal is to have a stable font-weight. Ok If anyone has any solution, I'd be grateful.
EDIT: Apparently the problem was local as I was only using one browser to view the website (Edge). Although in Chrome the problem persists, it was not evident while using Firefox. I switched to a macbook and used safari and I did not see any problem as well. To conclude, the problem seems to be on my local edge/chrome browser.
Thank you,
Robinson
One thing that often happens in menus using anchor tags is the pseudo-classes are set to a different font style. Pseudo-classes on anchors with font size inheritance get their font-size from the parent holding the anchor, not the anchor itself. Also, unlike the anchor element, pseudo-classes on anchors have the same selective weight in CSS as a normal class, so can easily cascade over your element styles, even their classes, when they are triggered. If they have different font-sizes it becomes apparent. So if you see problems, make sure you assign consistent styles on your navigation like so:
a.mylink,
a.mylink:link,
a.mylink:visited,
a.mylink:hover,
a.mylink:focus,
a.mylink:active
{
font-size: 1rem;
}
Related
I am using FullCalendar for Angular and I am having trouble applying custom styling. I need to change the background colour of the 'More Events' Popover, but no matter what I try, none of my styles are applying.
I am putting these styles into foo.component.scss:
.fc-popover .fc-more-popover .fc-day .fc-day-mon .fc-day-past .fc-day-other{
background: #303030 !important;
}
I can see in the classes that I have copied from inspect on Chrome references only one day, but it doesnt even apply to that day.
I have tried more generic class names such as:
.fc .fc-popover .fc-more-popover
to no avail.
I have also tried putting the styles in a style tag directly in the component template, and I have tried putting the styling into the main styles.scss file.
When I edit the styles in the inspect tab in my browser, it applies and achieves the desired result, but I just can't get these styles to apply any other way.
Angular has something called view encaspulation.
Without going to deep or being too complicated, it means that heach view has its own ecosystem, so that they can't collide with each other when it comes to styles.
So a style like .container in app.component.scss, won't collide with a .container in home.component.scss.
To avoid view encapsulation, you have one of two solutions.
The nasty one, ::ng-deep, is to be avoided. So it leaves you with a single one : move your styles into the style.scss file, where there is no view encapsulation.
Lastly, if it still does not work, try adding !important to your styles (and remove it after testing, it's nasty too) : if the style gets applied with !important, it means your CSS selectors are not "strong" enough, so try "strenghtening" them.
I am working with a freelance client on the side that wants to utilize Angular Material throughout the project. However, they do not like the way that the underline looks in the angular material input. I have tried a variety of approaches to change this, but I haven't found any success yet.
To be honest, I haven't even been able to find the tag in the DOM that would let me alter that border.
Here are the Angular Material docs, as you can see all of the available options have at least some form of a bottom border.
Some approaches I've tried:
This one is from the old angular material and no longer works for the new angular material
The accepted answer here is for the new angular material, but I was not able to get it to work. I implemented exactly as described and no styling changed.
This approach looked like it would work. Unfortunately, I could not get it to work either.
Any help or input on this topic would be appreciated.
For reference, the client said that any changes that deviated from the desired design would be denied. So I have to get this to work. I believe I could maybe, possibly lobby to build a custom input component as a solution, but I know that they are dead set on Angular Material.
Edit. Added a pic of desired look:
this little code did it for me. I didn't want to display it and just set height and width to 0.
::ng-deep .mat-form-field-underline{
height:0 !important;
width:0 !important;
}
However I think its kinda hard to style the Angular Material Components and for me its sometimes better to built my own.
First of all, you'll need a .scss to be imported either within the default theme.scss or after the import of the material stylesheet in main.scss.
Now, Material offers you the option of customising colours and some of the styles by overriding their #mixins found somewhere in the Material folder ( I don't have the folder in front of me.. very sorry for the vague pointing... ).
Back to the newly added file; You can override material's default styling by checking the DOM for certain classes and then adding them in said file with the desired changes. Because the file is loaded after Material's, the default styling in overridden. Same thing applies for the #mixin you chose to override. Just have a look in the file, copy-paste the whole #mixin and change accordingly.
Now if you wish to go even further, my colleagues and I have a custom library that uses Material BUT the whole styling is stripped off leaving you with the bear input within the mat-form-group and then using a <input disabled/> with a position:absolute over it. That way you get to benefit from material without using their style.
I am new to the React javascript framework and have a question about styling using CSS.
Using jQuery, my old workflow was to pick an element on the screen, inspect it in Chrome, note the selector/s that triggered the styling, change the element styling in the browser, and then save it to css/sass etc. If the widget had a hover-state I could make the element visible to see what it looked like.
However using React, and especially for components that someone else has coded, where the component does a 'pop-up' etc, I can't manipulate the DOM to see the component because it is removed from the DOM before I can inspect it.
Now of course I could read the external library code, work out how it works, but CSS inheritance means it would take some time to work out exactly is happening and this seems to be slower than what I was doing before - especially for a simple change.
So my question is, what is the preferred workflow for overloading the CSS for DOM elements that are removed before they can be inspected?
I tried my website (http://fnndsc.github.io/fnndsc.babymri.org/) on the latest canary and many things are messed up.
More importantly, the style is not propagated down to sub-elements anymore. I read around but couldn't find the best pratice to handle that.
How can I tell my polymer element to use the style from it parents.
Is there a special flag to turn on?
Up to Chrome 34 it works fine but 35/36 appear to be broken.
Thanks
Chrome 35 unprefixes the new Shadow DOM implementation (blog post) and turns it on by default. Some of what you're seeing could also be differences between native Shadow DOM and the polyfill shimming.
Without having the codebase to look at, there could be any number of things. There have been many updates to Shadow DOM's styling features in the last few months.
Things to note from what I saw on your site
#host { :scope {display: block;} } -> :host {display: block; }
move stylesheets an element relies on into the <polymer-element>.
applyAuthorStyles is gone. If you were using it, the only way to take on styles from the outer page is to use ::shadow, /deep/, or include shared styles in the <polymer-element> the needs it.
If you're using <content> and distributed nodes, make sure you're using the ::content pseudo element
Here are some up to date resources for styling:
http://www.polymer-project.org/docs/polymer/styling.html
http://www.polymer-project.org/articles/styling-elements.html
I am frustrated. I have one website where my drop-down CSS menu works and another where it doesn't.
Their stylesheets differ wildly and, although I have tried to manually copy the menu styles from one to the other, but with no success.
Is their any tool which will let me (like FireDebug) click on a page section (the menu) and then copy the rules which affect that section - ignoring those which are hidden by other rules - so that I can post them into the second site's stylesheet.
It seems that rather than having multiple styles affecting the menu and trying to sort out which have precedence, I'd like to have some software sort it out and generate a single combined rule ... if you see what I mean.
Both FireBug and the inbuilt Chrome Dev Tools show you what styles are being utilised by the selected element. I don't work with FireBug much, but I know the Chrome Dev Tools will cross out overrided styles and even show default user-stylesheets where applicable. It's also kind of nifty when inline styles are applied, eg for a table the "frame" attribute, as it converts these to CSS and displays it as part of the styling ;)
Sounds like you've got problems with accidental inheritance. Try to make sure your CSS selectors are only referencing the elements you want to style. Otherwise things get messy, and stuff like this happens.