Trying to target a specific span that made by the material UI IconButton component. Trying to make the text accompanying some icons to be centered below the icon, but the text is instead to the right of the icon. When I manually add flex-direction: column to this span, I get the effect I want, but I can't seem to find the right way to get the style applied in my styles.js file because I can't seem to target "MuiIconButton-label" in any permutation i've tried.
Any advice?
browser console screenshot
classes={{root: classes.icons, label: classes.icons}}
was the correct method
Related
the picture of code, in "content" property, it's value is a shape!
,
as you see in above image, specific part of my code!
I have style sheet in a project (that has been written before by another) that it have some css codes, and inside that, like bellow, have a property that, inside its value, it shows icon image!
i cant understand that, how inserted/created that!
my code:
.o-icon--close:before {
content: "";
}
my problem:
how he/she has written/created that icon shape inside CONTENT property.
it isn't a copy/paste an icon shape.
it isn't a text code!
as here isn't IDE, it shows a vertical rectangle, but in IDE it is shape of icon itself! like a music sign or what ever.
i know that, for CONTENT value, we can use fontawesome codes or other texts, but i can't understand how insert icon itself as a shape!
this is my result (i'm creating carousel):
For example i want to style the right image, Just the visible part not the whole part, How can i do that? If there is a JS way, What's that way?
I am using Antd v4.2.4 Tree (example: virtual scroll) from the link. I woulld like to use the virtual Scroll which can be used by setting "height" prop of the Tree. All is fine till here as in the example.
I would like to apply some css to the scrollbar like both overflowX and Y should be enabled on hover in the container
I would like have the Tree node show in only single line when the title is really big and not wrap it, if I use overflowX css, it doesn't work.
codesandbox
Update1: I see when we set "height" prop to Tree a lot of Divs have the inline css elements so not sure how to override them.
May be there is something small here but I am unable to figure out
I want to have such a look for my TreeNode and when hovered on this container the scrollbar X and Y is visible to see the longer node title please advice
update 2
if the set following css I am able to get the title in single line, but the scroll-X behaves strange. i.e. the scoll-x gets hidden when the Tree height/contents are big and when ypu collapse all treenodes, it shows up
.ant-tree .ant-tree-treenode {
white-space: nowrap;
}
codesandbox
TIA
I have trouble with styling DevExtreme React Grid, follow by there found from there documentation here.
Here's the sample code I have from copy some other repo.
My questions:
How can I get full control on the styling, because I see <Table>component, but is there a way I can adding class to <th>, <td>, I would like to add the class or someway to have full control styling for font size, or hover styling.
I had a really hard time my table header, like to change to bold and another background color, it's by material UI
After I add the Fixed Columns method on scrolling my table, the style is not matching with my other table row, it's changed to all white background, no grey and white on each row
When I hit the rest, I would like to row change to be another color.
Thank you so much for your help!
I checked with their GitHub issues:
Not fully support adding class to the component, but you can create a theme for it.
About fixColumn styling found the demo from this sandbox. Hope this sample help
Pagination issue with sorting can be fixed by this:
//after state area:
changePageSize = pageSize => this.setState({ pageSize });
// Plugin
<PagingState
defaultCurrentPage={0}
pageSizes={pageSizes}
defaultPageSize={15}
onPageSizeChange={this.changePageSize}
/>
<IntegratedPaging />
//UI
<PagingPanel pageSizes={pageSizes} />
I'm working on a Gtk3 theme using css. I want to style a dialog so I used gtkinspector to check what widgets are inside there. Works well, the inspector recognizes the dialog. But it is apparently unable to identify a border sitting around the dialog. (See image below).
The border around the entire widget doesnt get hilighted by the inspector. .. so what does this consist of?
This is reflected in the css: if I put something like dialog * {green} in the css, everything colors green, except for the border. If I put .background {green} then the border also colors green....
I tried to find 'padding' 'margin' and 'border' entries that could be causing the border, but cant seem to find any....Any ideas?
Without code or a glade file one can't say for sure which properties are being used to add that border.
The border itself isn't a widget but a GtkContainer property. So you must look to the parent, GtkDialog, for the correct properties being used. Most probably its the empty border around the container child (see GtkContainer "border-width") but could be alignment or padding.
If your goal is to change the color of the background color then you should change it via GtkDialog.