I wanted to implement Lightning TreeGrid LWC component with no header row.
Tried Updating the CSS in inspect element
I was able to hide the header by modifying the Thead css as shown in the image from inspect element but not sure which class to use to achieve the same in the LWC CSS file.
Could you guys please help?
The lightning-tree-grid specification doesn't provide the possibility of removing the table header out of the box. Although the component blueprint in Lightning design system demonstrates a headless option.
Because of the use of Shadow DOM in LWC you can't change the properties of child components directly.
You basically have 2 options:
use a global style resource and modify CSS as you desire, like described in this answer
create your own tree grid component and extend it with whichever functionality you need. For some components, salesforce provides their source code, but tree-grid doesn't appear among them
Happy coding.
Related
enter image description hereI am using React, Typescript and Styled components. Everything looks fine but I am seeing multiple styles tag under my head tag. I would like to know why it is creating multiple styles tag and is there any way to combine all styletags into one.
For example , I am creating a dropdown in a loop and it has 3 values and it generates 3 style tag under my head tag
Thanks all
From what I understand, I believe this is expected behavior assuming you're utilizing style partials for each component. React (and other front end frameworks like Angular) is importing the styles that apply to the current view. It does this by importing them individually as the page renders different views.
This isn't always ideal, though. I often create CSS partials in a global styles folder if I want to share styles across components. The only styles I put in the component specific CSS file are styles that are 100% specific to that component and I don't ever want to share.
You could also always create a shared CSS file that you import once - ie - dropdown.css (or .scss etc if you're using a pre-processor) and delete the react component specific CSS files that you will be replacing with this new global version. The downside being that whatever CSS you have in there will always be imported even if the dropdown isn't being rendered or viewed.
I'm having trouble doing the same with my app. I've added a Select component, but it doesn't render correctly. Should I be using a different nested component to create this?
I cannot see an example in material-UI's documentation. I am not sure of the correct styles to use. I am using a Select component here, but I'm not sure if its the same the Material UI website is using as it doesn't seem to inherit the correct style. It would be great if someone can point me to the correct method of adding a drop-down to the Toolbar.
That "dropdown" is actually composed of Button Component and Menu Component.
The docs site is open-sourced and you can check the implementation here.
I'm trying to hack a solution to an iframe that gets added dynamically to my page in order to change its CSS. I have the iframe's id. Is there a way of doing this with React?
Edit: I'm using React. I don't have access to the source code of the iframe (an embedded checkout as part of an online shop) so can only make changes to its CSS once it's been dynamically added to the page.
I think you can use React refs
https://reactjs.org/docs/refs-and-the-dom.html
Noob Question: Is the intention of the cSS API to make it possible to use the components as normal HTML without the need for any additional React code? Does the usage of only the CSS API therefore require the inclusion of the React JS package or can the Blueprint JS package alone work ?
As an author of Blueprint, I can confirm that it is in fact possible to use some of the Blueprint components via CSS only. Components that describe a CSS API in the documentation can be used without React, but usually with caveats (the biggest being that you must write the markup correctly). The CSS API is presented as an alternative to the JavaScript (React) API, and CSS modifiers are supported by the JS APIs through the className prop.
As Blueprint is a React-based UI toolkit, the best experience will be had by using React, primarily because you no longer have to write the markup correctly.
It is not possible to use the components as normal HTML, without ReactJS. Blueprint is a ReactJS UI toolkit for the web.
Their pre-made (React) components are customizable via a JavaScript API or a CSS API (or both).
The idea behind the CSS API, that some of the components have, is to provide additional options for style customization.
Let's use an example. See the Menu component. Its CSS API allows us to modify Menu's style. One example is that we can add icons to menu items, read in their docs:
Add icons to menu items the same way you would to buttons: simply add the appropriate pt-icon-<name> class*.
PS: I'd recommend you to head over the ReactJS docs, understand how ReactJS components work, get deeper knowledge about the core ReactJS concepts (or complete a fundamentals course) and only then - try to implement BlueprintJS.
I would like to create autocomplete control shown in below image in reactjs. Basically it is autocomplete control with two section one is static and another one is dynamic. Dynamic section loads data from the ajax call. I would like to know if any available autocomplete control provides this functionality. If not then I have to create my own custom control. So I would like to know any good example or reusable code which I can use to implement this control.
I would like to recommend this dependency: react-select .
I have used it on a few projects, and it offers you easy styling customization and easy customization of React code by providing you possibility to add your custom components.
If you take a look at this example, you can get a basic overview on how to apply your custom component to react-select.
You will need to create your custom component that will look like your image but react-select will take care for other things for you and offer you easy customization.