Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
How would we implement something like "padding: 0 10px" for inline styling on a React element? It throws an error if I give the padding or margin properties the shortcut syntax, so I have to explicitly declare paddingTop, paddingRight, etc. I don't see anything on the React docs to address this, so I'm wondering if it's possible to use the shortcut in React?
It is possible you just probably have a typo or accidentally wrote it wrong. The syntax to apply an inline style follows this pattern.
{{property: 'value'}}
you can't add a semi colon in the value for a property.
inline styles are denoted as an object for react. and the syntax to apply a property or read something as javascript in the react render method is also denoted with curly braces.
So to apply that to your specific question, you would just do this.
<div style={{margin: '0px 10px'}} />
if you are using a style variable that is defined before the return of your render function you can use it like so.
const divStyles = {
margin: '0px 10px'
}
// ... in the render return
<div style={divStyles} />
Sample Fiddle with shortcut padding and margin used
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 4 years ago.
Improve this question
Is there any reason that this attribute tag a[h2]{color:orange;} wont work in css? I Cant seem to get the attribute tag to work for any elements.
a[h2] {
color:orange;
}
Means that all <a> tags that have an attribute called h2 will be coloured orange; i.e. <a h2="whatever">hello, world!</a>.
This is probably not what you want, both because this would be invalid HTML (h2 is not an attribute of <a>, and custom attributes are only allowed if they start with data-), but also because I am assuming that you want to target <h2> tags that are inside of your <a> tags.
To that, use the following code:
a h2 {
color:orange;
}
That will colour all <h2> tags inside of <a> tags orange.
Read more about CSS Selectors here.
Did you make a reference in the html page to your stylesheet?
<link rel="stylesheet" type="text/css" href="theme.css">
If this is done, check whether the element has an h2 attribute. Something like <a h2="value">
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I have the following click handler:
<Select
name="batchCompChooser"
value={this.state.batchCompId}
options={batchCompItems}
clearable={false}
onChange={this.handleBatchCompChange()}
/>
However, I get the following error from the onChange line:
BatchComponentChooser.js?0aaf:54 Uncaught TypeError: Cannot read property 'value' of undefined
How do I fix this?
If you have an event handlers, such as onClick, it is easy to accidentally do this:
onClick={this.someFunc()}
REMOVE THE parens ()
That will actually invoke the function immediately on render.
Instead you want to pass a reference to a function like this:
onClick={this.someFunc}
So in my case it should look like this:
<a onClick={this.doSomething}>Do something link</a>
If you need to pass parameters, you can do it like this with the arrow function:
<a onClick={() =>this.doSomething(true)}>Do something link</a>
Specifically in the example above the onChange should have the trailing parens removed, it should be changed to:
<Select
name="batchCompChooser"
value={this.state.batchCompId}
options={batchCompItems}
clearable={false}
onChange={this.handleBatchCompChange}
/>
Hope that helps someone out there...
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 two view editmode:"New" and editmode:"edit" and trying to add different style for a paragraph, how to do that?
<p style="margin-left: 165px;margin-top: -23px;">===some messages---</p>
I'm not sure I really understand your question but if you want to add a different style depending on a variable you can do it with ngClass
You can use it like this
<p ng-class="{myClass: var}">Some text</p>
If the variable 'var' is == true then it will add the class 'myClass' to the paraghraph
There is more way how to use it, you can refer to the documentatation
https://docs.angularjs.org/api/ng/directive/ngClass
I think you need to be a little more specific on your question, or perhaps offer up an example.
BUT if I am reading this correctly, I'd suggest giving the separate <p> tags an ID and changing the properties in a CSS file. Make sure to attach the CSS file to your index.html
For more clarification, go HERE and get a better idea of how CSS can help.
If this wasn't helpful, I apologize. The question left a lot to be desired
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
We have created the div using ng-bind directive in angular js. We are not able to apply style property to that same div
<div ng-bind-html="test"></div>
in contrller file i defined test variable as
$scope.test="<div style="background:red;"></div>
We need to apply the style property. using CSS property i can able to do. But each time the background needs to be changed.
may be wat you want is this:
<div ng-style="{'background-color': bgColor}"></div>
in your controller
$scope.bgColor = "red";
I dont know what you want but the only thing wrong with your code is yo uneed ng-bind-html-unsafe ... assuming you are using a version of angular < 1.2.
ng-bind-html runs the code through a $sanitize service, which checks for unsafe code. In your example I and "style" will be stripped out. The unsafe version does not perform this check and as a result if you use it in certain situations where you dont have complete control over(e.g. WYSIWYG editors saving to your database and displaying the comments.) the data you can have punks running around doing malicious scripts.
Example fiddle: http://jsfiddle.net/pW7WY/
Supporting code.
<div ng-app>
<div ng-controller="Ctrl">
<div id="nick" ng-bind-html-unsafe="test"></div>
</div>
</div>
--js
function Ctrl($scope) {
$scope.test='<div id="child" style="background:red;"></div>'
}
--css
#nick{
width: 300px;
height: 300px;
}
#child{
width: 200px;
height: 200px;
}