Here we go again. Let's see if you can decipher the riddle :D. So, the problem is the following. I have an external css file. I putted some 'specs' inside this file. I downloaded a plugin that make possible to link external css files into js files. So, in that way I can 'stylize' the JSX syntax inside that files. Everything ran great, but a problem appeared. If I declare a 'className' inside an element and I try to manipulate the properties of this element, nothing happens. But if I "call" the element by name( example: div {...} or footer{...} ) into the css file , the manipulation happens.
This is the code inside the JSX syntax:
<div className = "userlog_wrapper">.....</div>
..and this is the code inside the css file:
.userlog_wrapper{
width: 100%;
height: 660px;
}
Ok, I fixed it. The solution is the following......if you are using the nextjs plugin for css click on me .You need to write this inside the js file:
import css from ../wherever/the/file/are
and then, next to the className put this '= {css.nameOftheClass}'.
That's all, it should work.
Related
Hi my app running good at localhost but when I create build then Background image not displaying.
my code is.
<div style={{ backgroundImage:"url("+require("assets/img/bg.jpg")+")", height: "400px",
backgroundSize: "cover",
backgroundPosition: "center top"}}>
Result at localhost as below
But at live server empty header with path
When I inspect this path then showing like this.
background-image: url(./static/media/bg6.488bc24….jpg);
Please help with thanks
You can try importing the image outside of the function instead of requiring it.
PS:- You can kindly attach a SS of your build folder for further info.
Perhaps, upon build, programmatically defined path is being changed or appoints to an undesired resource.
You could try to modify your DOM and apply css, by adding a dedicated tag, like so:
<img
id="background-image"
src="./assets/img/bg.jpg"
alt="background-image"
/>
Put your file to public folder and replace require with string with path.
For example put file to public/assets/img/bg.jpg
And change path:
{
backgroundImage: "url(/assets/img/bg.jpg)"
...
}
or you can use import and put imported image to img (src prop).
For example : with Tailwind:
<div className="md:hidden">Hello</div>
will result the div hidden after the breakpoint md - which after Tailwind doc , it is 768px;
I would like to be able to do the same, but for custom widths, so not 768px;
And I Don't want to write it in the CSS file and I dont want to modify Tailwind files.
I would like to be still inline . Is it possible?
Documentation
If you need to use a one-off breakpoint that doesn’t make sense to include in your theme, use the min or max modifiers to generate custom breakpoint on the fly using any arbitrary value.
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
<!-- ... -->
</div>
I have tried to to that using this line of code but it doesn't work
#import url("Javascriptfile.js");
and <script type="text/javascript" src="Script.js">
these two ways doesn't work.
in js file I have
export const PrimaryColor = "#4267B2";
and I want to import it in my css file how can i do it?
I do not believe this is possible in any way.
You can manipulate CSS with JavaScript to a certain extent, but it is mostly done through DOM manipulation (acting on class names) or generating CSS programmatically (but it is still CSS in the end).
I don't think it is ever possible to access "JavaScript world" from the scope of CSS.
However, if you want to use variable names in CSS to reference constants, like colors, sizes, etc., you can use the CSS custom properties feature : https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
This question already has answers here:
How to control Sass Variable with javascript
(9 answers)
Closed 6 years ago.
Basically I want to use background color for each element as per user choice, user choice will be stored on database. User should webpage according to it's color profile. So, I need a idea to get that value from angular and store its value on scss variable and render it.
SCSS is a preprocessor, when you use SCSS it actually gets compiled into CSS and that's what you use.
Perhaps the best solution is to use ngStyle in the section you need.. body, div, or anywhere you want..
Example
<div ng-style="userStyle">
...
</div>
In your JS
$scope.userInfo = { backgroundColor: 'red' };
$scope.userStyle = {'background-color': $scope.userInfo.backgroundColor};
Assuming you have a userInfo object, with backgroundColor property.
This is not possible, angular is javascript code and runs in the clients browser, sass is pre-compiled to css, any variables will have been converted into the full values before it is rendered in the browser.
You would need to get angular to make a call to your server, and have the server generate a CSS file dynamically based on the value provided from angular. (I suppose you could do this on the client also, I'm sure there is a javascript library somewhere that lets you compile sass)
Scss compiled to css before build, so angular part can't control scss. You can use gulp/grunt to edit scss variables. But in your case it not helping.
The simple sulotion for you is to use ng-style.
<div ng-style="{'background-color': scopeUserColor}"><div\>
I have a requirement to print the View model data using Print Button.
Currently i have a div and assigning my view content to it. This div has been already added in backbone region. In my javascript function, i am just setting the viewmodel content to the printdiv and it working with out any issue.
But the content which i have added for printing is getting appended in the browser HTML also, I dont want to show that in my browser. I tried setting visible hidden and display none to my printingdiv. but then printing is not working since the content is not visible
CSHTML:
<div id="printdiv"/>
JS:
Myapp.printdiv.show(viewData.view);
window.print();
Init.JS
Myapp.addRegions({
printdiv: '#printdiv',
});
Please help me to resolve this issue
Thanks
The best way to handle this sort of problem is with a print-specific stylesheet. This article explains how to do that in detail, but the short version is that you define your non-print styles as normal, then use CSS code like the following to override print-specific styles:
#printdiv {
display: none
}
#media print {
#printdiv {
display: block;
}
}