I have a lightening card in my component.
<lightning:card title="My Title">
<lightning:layout horizontalAlign="left" class="slds-m-ertical_medium">
<lightning:layoutItem size="3">
<lightning:badge label=""/>
</lightning:layoutItem>
<lightning:layoutItem size="7">
......
</lightning:layoutItem>
</lightning:layout>
</lightning:card>
I've been looking for a way to underline the title "My Title".
But I haven't been able to find any.
Can someone help ?
Looking at the lightning design system documentation, it looks like that title is given the style class slds-text-heading_small, so you should be able to get the desired effect by adding this to your component's style section:
.THIS .slds-text-heading_small{
text-decoration : underline ;
}
Related
I would like to build a salesforce component where user will provide image link & the component will display the image. So I tried following code
lightning component
<aura:component implements="flexipage:availableForAllPageTypes" access="global"
controller="MyController" >
<lightning:card title="Partner Information">
<Div>
<p><lightning:input aura:name="image" label ="Enter image url" type="text"/></p>
<br></br>
<img url="{!image}" />
</Div>
</lightning:card>
</aura:component>
But it's not displaying the image after inserting the image url
I also tried with the option
<img url="{!v.image}" />
but I got the error message Access Check Failed! AttributeSet.get(): attribute 'image' of component
Can you guide me to display the image?
So the proper way to handle this would be by using the aura:html component. There are a few parameters you would set for this:
aura:id- String- your id to locate the elements within JS
tag- String- the html tag
HTMLAttributes- Map- No need to set this explicitly on the .cmp, we'll use Js
<!--YourComponent.cmp-->
<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable" access="global" >
<!--Remember to define your binding attribute-->
<aura:attribute name="image" type="String"/>
<lightning:card title="Partner Information">
<div class="slds-p-around_medium">
<p>
<!--Set you attribute as the value of the lightning:input component-->
<lightning:input aura:name="image"
label ="Enter image url"
value="{!v.image}"
type="text"
onchange="{!c.handleUrlChange}"/>
</p>
<br/>
<!--Set the aura:id so you can access it in js, use component.find to locate-->
<aura:html aura:id="imgDiv" tag="img"/>
</div>
</lightning:card>
</aura:component>
//YourComponentController.js
({
handleUrlChange : function(component, event, helper) {
//Grab the value from the attribute or you can use event.getParam("value");
var imageUrl = component.get("v.image");
//Define the map, find the img tag generated by aura:html,
//and set the HTMLAttributes to your map
var newMapAttributes = {"src": imageUrl};
component.find("imgDiv").set("v.HTMLAttributes",newMapAttributes);
}
})
You are also using the url attribute on your image tag instead of the src attribute. You may be able to directly bind to the img element, but aura:html works really well. Hope that answers your question!
I am using a set if images in a row. There is a text box input above these images and based on the input i need to enable/disable images?
How to do this in React.
I tried adding "disable" to image tag and disabled=true but both didn't work.
const IBox = props =>
<div style={props.styles.imageContainer} >
<img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" /><span > </span>
<img id="image2" src={require('../../../public/images/image2.jpg')} alt ="Image2" /><span> </span>
<img id="image3" src={require('../../../public/images/image3.jpg')} alt ="Image3" /><span> </span>
<img id="image4" src={require('../../../public/images/image4.jpg')} alt ="Image4"/>
</div>
export default IBox;
There is no such thing as "disabling" images. You can only disable form elements, as they are the only interactive html elements. See w3c specification to see which items can be disabled exactly.
That is unless you write your own custom definition for disabling images. For example, you could add a class disabled to the image, and style that class to be greyed out, using CSS.
You could also combine CSS with WebComponents to have an element that with a disabled attribute. You could style its disabled style.
See also docs for the <img /> tag.
If you mean hide/show.. you simply may use state to disable your image i.e.
{this.state.img1 && <img id="image1" src={require('../../../public/images/image1.jpg')} alt = "Image1" />}
if by disable you mean to make it like grey, low opacity,etc... you may use an state :
style= this.state.disable? {{style_disable}}: {{style_enable}}
Use <input /> instead of <img /> as in this example.
You can provide the same functionality with the type="image" attribute. This way you can use the disabled attribute.
<input
type="image"
disabled={disabled}
/>
I have a ChipInput like this. I want to show a hint text when it's empty.
<div className={classes.headline}>
<ChipInput
hintText='Type anything'
onChange={this.handleTagChange}
/>
</div>
But my browser gives this warning.
Warning: React does not recognize the hintText prop on a DOM
element. If you intentionally want it to appear in the DOM as a custom
attribute, spell it as lowercase hinttext instead. If you
accidentally passed it from a parent component, remove it from the DOM
element.
As per the ChipInput Readme, it should work. Am I missing something here?
Had a look at the code and found placeholder which worked!!!
<div className={classes.headline}>
<ChipInput
placeholder='Type anything'
onChange={this.handleTagChange}
/>
</div>
I have the following code :
<a id="plop" data-lightbox="image-1" data-title="aaa" href="https://unsplash.it/300/300">
<img src="https://unsplash.it/100/100" alt="" />
</a>
I want to change the "data-title" from "aaa" to "bbb" using something like this :
$('#plop').data('title','bbb');
But when I click on the link, the lightbox displays the old title :-/
How can I update the title with the new value ?
Thanks
Lightbox reads the attribute and not the jQuery data store.
To update the title, try the following: $('#plop').attr('data-title', 'bbb').
What is the best way to set the width of a Material Design Lite multi-line TextField? I set the CSS width to a pixel value, and it works, but when you click on it to enter some text, the underline highlighting does not extent out to the full width of the component. I tried cols="80" and that did not work. I also tried width="100%" and that did not work. I'm working in ReactJS and TypeScript if that makes a difference.
The width needs to be set on the mdl-textfield container div for the text field. For example, this works:
.mdl-textfield{
width:500px;
}
Though that will style all of your textfields. If you only want one of them to be that wide, then define an id or class on the same div as has the mdl-textfield class and apply the style to that. For example:
<div class="mdl-textfield mdl-js-textfield extrawide">
<input class="mdl-textfield__input" type="text" id="sample1">
<label class="mdl-textfield__label" for="sample1">Text...</label>
</div>
with the css
.extrawide{
width:500px;
}