I am storing colors codes as a input from user into mongodb through mongoose. I tried to apply those codes into ejs template parts for styling. Can't figure it how can i do that.
I tried this way but it is showing error mark here :
Please my image :
colors are applying but the problems is error mark. I should remove that error mark.How can i do that?
Please don't send code as screenshot. It appears that you're being warned by the VSCode that you have syntax error but it appears ok, unless you have misspelled the variable name Primarycolor
<button style="background-color: <%= Primarycolor %>!important">Send a free request</button>
Have you tried to render that page?
Related
I am trying to set a background color on my div based on a a color send down by my server. I can't solve this with classes because the color value could be any legal color value. However, VSCode is giving me an error when I type the following. Is EJS not allowed to use with css related stuff?
<div style="background-color: <%= display_color %>;"></div> // Error: property value expected
This is an ESLint error. ESLint is a linting tool. It can help you find and fix (mostly/usually) stylistic problems with your code. It's highly configurable, and can also be used to auto-fix some problems for you.
As you already found, you can disable the lint warning for a single site/line like so:
<div <% /* eslint-disable css-propertyvalueexpected */ %> style='background-color: <%= display_color %>;'></div>
If you want to disable the warning once and for all, create an ESLint configuration file and do it there.
If you haven't installed the ESLint NPM package to use it that way, you're probably getting this because of one of your VS Code extensions.
I'm trying to allow an author to change the heading size in the markup based on a dropdown in the dialog with the options "h1, h2, h3, h4". If none is selected, it should default to h2.
I'm trying to do this with ternary code like I would for dynamic classes or content, but when I do this it just prints the code out on the page. The result of the following should be <h2> Heading </h2> or have h2 replaced by a dialog selection
<${properties.headingSize ? properties.headingSize : 'h2'}>
${properties.heading}
</${properties.headingSize ? properties.headingSize : 'h2'}>
The result of this code in Inspect Element is
<${properties.headingSize ? properties.headingSize :="h2" }>Heading <!--${properties.headingSize-->
Is this not a recommended way to accomplish dynamic markup? Or is there a way to get the ternary to work correctly?
The recommended way to solve your problem is to make use of the data-sly-element statement to replace your element name. Sample usage is shown below.
<h2 data-sly-element="${properties.headingSize || 'h2'}">${properties.heading}</h2>
For more information on the acceptable values for data-sly-element as well as the available block statements that can be used in HTL, kindly refer this official documentation
I've tried all the HTL context parameters (even 'unsafe'). When I inspect the input, I can see the value intact, but you can't see the value pre-populated in the field. I tried different types of values, different contexts, and different types of input fields. [AEM 6.2]
<input type="email" name="senderEmail" value="${userProfile.email # context='text'}"/>
If the value is rendered in page source and also visible in browser inspector, could it be that it's hidden by some weird CSS? Something like color:transparent
There are many possible causes. I'll pitch in one, to help get you thinking. Is userProfile available via the use api?
I've made this mistake before:
<div data-sly-use.bean="com.beans.Bean">
${bean.value}
</div>
// ... other code
${bean.value}
The "Bean" isn't available later, outside it's host element.
If I understand your question correctly this isn't actually about HTL, but rather about the HTML input element itself. You have an input element with a value attribute set, yet that value is not displaying in the box. If that's correct, then I'd recommend doing some investigation around HTML input value not displaying when set, rather than sightly context issues.
Some possible answer would include css styles hiding the input text or javascript clearing out the values after page load. There are certainly more potential causes, but we'd need to know more about your page to provide a better answer.
To do some of your investigation you can try loading a component with only that input in it and see if that works, that would eliminate any css or js executing elsewhere on the page.
I'm getting an error from Babel when trying to compile my JSX code into JS. I'm new to react so apologies if this is an obvious issue, I wasn't able to find anything about it that seemed related. I'm attempting to use props in this chunk of code, and pass a pageTitle prop to my FieldContainer component. This is giving me an issue, though, that isn't letting the code compile to JS. I discovered in my searching that prop values should be passed between {}, but adding these did not help. Any ideas? Thanks!
It's hard to tell what you are trying to do here, but as the error says, the value of an attribute must be an expression {foo} or quoted text "foo".
In this case
Child={<LoginForm />}
or
Child={LoginForm}
is probably what you want.
I got this error because I failed to quote a property inside of the JSX:
<span aria-hidden=true ...
should have been
<span aria-hidden="true" ...
Just faced same issue, I was writing
component="Contacts"
resolved it by rewriting it as:
component={Contacts}
Hi I am using Zend Framework and would like to have my form show which elements are invalid by changing their background color to red. To do this I need to set the class/id of the invalid <input class='error'> in my form and write a css to change the color. I am just having trouble getting a list of all the invalid elements.
The only way I can think of doing this is after the for is found to be invalid if (!$form->isValid($posts)){} is to use getMessages() to get the names of all the invalid elements and then set all elements $element->setAttrib('class', 'error'). I was hoping to be able to call something built in to the form, similar to getElements() but couldnt find a getInvalidElements() or something similar. I also imagine it would be possible to write a decorator to the whole form to achieve the same thing but I dont know where to start.
Any recommendations on how i should proceed? Thanks.
Extend Zend_Form and add a css class error to all invalid fields, write styles for the .error class.
This blog post gives you an idea of how it could be done.