I am working on my first web dev project, with someone, and I am responsible for the front-end part. In my personal projects I've been using plain css, but in this template I have seen that they are using something else, a different structure, I think. I kind of figure it out how it works, but because I never crossed paths with it before, it makes developing hard for me. I would like to know what it is so I can read some documentation and understand it better. (as an example: usually ,when I use className, I put the class name between "", but here is like css.something) Can you tell me what it is ? I will leave a snippet here
.menuItem {
#apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
position: relative;
min-width: 300px;
margin: 0;
padding: 4px 30px;
display: flex;
align-items: center;
justify-content: center;
/* Override button styles */
outline: none;
text-align: left;
border: none;
white-space: nowrap;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
}
&:hover .menuItemBorder {
width: 6px;
}
}
<button className={css.menuItem} onClick={()=> this.selectOption(queryParamName, option.key, dates)}>
This is CSS Modules and you can read more about this usage of CSS in these 2 links:
link1
link2
Although I'm not overly familiar with React, this (className={css.menuItem}) is some sort of model binding so that when React has done it's thing it will bind the value of css.menuItem to the rendered HTML probably ending up with something like
<button className=".menuItem" ...>
The Javascript format you see there is a view binding, or something we might describe as a Domain Specific Language (DSL). It is Javascript used by some framework (likely React or another frontend framework) to build the HTML you see on the page. I can't be certain since I don't know what framework I'm looking at, but I'm willing to bet that if you use the "inspect" feature in your browser, you will see this in the resulting HTML that is created by that Javascript:
<button class="menuItem" onClick="[...]">
This format should look familiar to you if you are expecting plain HTML. That Javascript you linked to just builds this HTML dynamically. In the example you provided, the curly braces ({ }) are just an indicator to the Javascript library that it need to fill in that placeholder with something, in this case css.menuItem, which translates to a class name of menuItem rendered into a css class tag (class="menuItem").
Have you looked into what that css object holds?
From what I can see, the #apply puts the css part to be in pre-compiled language like SASS or SCSS.
You have not mentioned if it is ReactJS. If it is then there is a high possibility that whatever you are dealing with is in JSS.
Related
I have Asp.net Core 5.0.1 app with multiple MVC views. I also have a CSS file, generated by an app. I want this file to be unmodified (as it will be changed in future using same app). I want separate CSS file, which styles certain elements (eg input or button) to be styled using classes from the generated CSS. I dont want to write class on each input or button etc element (there are 35 views needs to be styled).
For example if generated file has class dx-theme-text-color I want a CSS file which has something like input { color:.dx-theme-text-color}
How can I achieve this?
To clarify: the question is - how to use a class from one CSS in another by name not copy/pasting values etc
I can only think of #extend from SASS:
.dx-theme-text-color {
border: 1px solid red;
}
input, button {
#extend .dx-theme-text-color;
}
You can use css variables.
define css variavles in global scope:
:root {
--my-custom-color: #000;
}
use variables in every css file like this:
.my-element {
color: var(--my-costum-color)
}
You can also use css pre-proccesors like sass(scss), less and etc.
For some reason my Angular app doesn't use the styles I'm defining at my component's .less file. It simply ignore it.
As I am very newbie with CSS, I don't any way to debug it.
My layout is consisted by a lot of defined styles being imported by other less files. I am using trying to modify the style of a mapboxgl.
This is how the map current looks like:
And it's defined on HTML by:
<div eds-tile class="column xl-3">
<eds-tile-title>Location</eds-tile-title>
<eds-tile-actions>
<div class="action">
<eds-icon icon="maximize">
</eds-icon>
</div>
</eds-tile-actions>
<div class="map" id="map"></div>
</div>
On this component's less I have:
#import "~#eds/vanilla/variables/light";
#import (reference) "~#eds/vanilla/font/styles";
#import (reference, multiple) "~#eds/vanilla/variables/global";
#import "./map/map";
And on ./map/map.less I have a lot of theme stylization:
https://pastebin.com/b8CpakH9
My trouble is that there's some classes that are indeed being used by Angular, like this one:
.map {
min-height: 200px;
width: 100%;
height: 100%;
a {
color: #text;
}
}
But others are not, like this (you can see on image below that there's nothing related by that definition on browser's styles inspection):
.mapboxgl-ctrl-bottom-left {
display: none !important;
}
What is happening on my case?
I'm following another example that it's working fine. On the component.less file it uses:
#import (reference) "~#eds/vanilla/font/styles";
.dark {
#import "~#eds/vanilla/variables/dark";
#import (multiple) "./map/map";
}
.light {
#import "~#eds/vanilla/variables/light";
#import (multiple) "./map/map";
}
And the map.less file is the same except the by the min-height value.
The example:
You can clearly see that on this example it's using ".light .map {}" to set the style. Different that my case, that converts to ".map[_ng-content-c5] {}" for some reason. I don't have any clue of what this means.
Sorry by being so vague about the problem description. It's simply because I'm don't have enough experience even to name it.
I think I know what the problem is.
If you open your generated css file you see that there is no .mapboxgl-ctrl-bottom-left {
You will instead see something like: .mapboxgl-ctrl-bottom-left[_ngcontent...] {
That's how angular works, it adds some attributes to ensure a style only applies to one component.
You can control if styles are encapsulated or not with ViewEncapsulation
Most likely this happens because the content (in this case the map) is getting rendered with JS after the DOM is loaded and is not handled by angular itself, therefore it doesn't get the attributes.
Without any more information I can't help you any further since I don't know all the details. I don't know exactly which map you are using, maybe there is a tutorial on how to integrate it with angular somehow.
In my Angular application, I have components pages like <app-page-home>, <app-page-login>, <app-page-documentation>, etc. that are mounted when required in my <router-outlet>.
I am trying to target all these components together from a global stylesheet (./src/styles.styl that applies everywhere in the application), but CSS doesn't seem to accept wildcards for custom tags.
I would like to avoid listing my tags one by one and instead, something like app-page-* { border : blue solid 1px; }
app-page-* {
border : blue solid 1px;
}
<app-page-login>Login stuff</app-page-login>
<br>
<app-page-documentation>Documentation</app-page-documentation>
I can't add classes (or can I?) because these component are being dynamically mounted by the router, otherwise I could obviously use something like class="page".
Any idea how to target custom tags with a wild card? Thanks
That's correct, css doesn't have partial type wildcards. Most easy solution is to just group them together, like this;
app-page-login, app-page-documentation { border: 1px solid blue; }
Or apply a class to them;
<app-page-login class="app-page" />
<app-page-documentation class="app-page" />
and target the class;
.app-page { border: 1px solid blue; }
You could do fancy stuff with attribute selectors, but imo for your use case the two solutions above are the most suitable.
-- edit; I see you can't add classes. Use the first solution then.
Using Rails 4.
In my kc.scss file, which is the last one listed in application.scss, I have the following two classes, neither of which appear in any other scss file:
.kc-hilite {
color: #000;
background-color: #ffff00;
border-color: #000000;
}
.kc-wide {
width: 150px;
}
In my _buttons.html.erb partial, I have the following element:
<input name="commit" class="btn kc-wide kc-hilite" id="report" type="submit" value="Report Issue">
kc-wide works fine. The kc-hilite class is totally being ignored. If I copy it into the partial as a style, it works fine even unmodified. When it is accessed through the scss file, it doesn't seem to exist.
To debug this, I have tried it as an inline style, as I mentioned. I also changed its name. And, I listed it alone as a class in the element. Nothing made it work.
Looking in DOM Explorer, I see the following:
/*media all*/
.kc-wide {
width: 150px;
}
However, there is no entry for kc-hilite at all.
What simple issue am I blindly missing? Thanks...
I guess the issue would be with the compiled file. Could you check the compiled CSS file, and see if it contains the classes.
how do I control width of a dojo combobox using css, i tried #comboId{width:50px} where comboId is the Id of <select id="comboId">. but it does not work
ComboBox is a little tricky, because the way this widget works, the node with the id comboId will end up being the inner input node inside the widget, not the widget's top-level domNode (which receives the id widget_comboId instead). This is probably why that's having no effect for you.
Note that not nearly all widgets do funny things like this, but namely widgets like dijit.form.TextBox and dijit.form.ComboBox (and widgets that extend them) do.
Perhaps the simplest way around this would be to also add a class to your widget and style based on that instead (which is generally encouraged as it is more reusable than coupling specific IDs into your css anyway). Assuming you're instantiating declaratively:
<select id="comboId" class="comboClass" dojoType="dijit.form.ComboBox">
...
</select>
Then in your css:
.comboClass { width: 50px; }
Other solutions
If you're instantiating this widget declaratively, you can apply the style inline and it will become properly mapped to the widget's domNode automatically:
<select id="comboId" dojoType="dijit.form.ComboBox" style="width: 50px">
...
</select>
Alternatively, you can set the style attribute of the widget after it is instantiated:
dijit.byId('comboId').set('style', {width: '50px'});
This is programmatically the equivalent to setting the width style inline on the DOM node declaratively.
Setting width using css did not work for me. However, setting style at construction did:
var spatialQueryComboBox = new ComboBox({
id: "selectionType",
style:{width: "100px"},
store: spatialSelectionStore,
searchAttr: "name"
}, "spatialSelectionType");
Did you try:
dojo.style("comboId", "width", "50px");
It could be done by calling the function "forceWidth(true)", and define the class .mblComboBoxMenu with desired height in your css file.
for example:
.mblComboBoxMenu {
position: relative;
overflow-y: hidden !important;
overflow: hidden;
border: 1px solid #00677f;
border-radius: 0;
background-color: white;
color: #868e96;
width: 80% !important;
}