My checkbox text is too narrow but I don't know why. I've tried using flex-grow, and whitespace: nowrap, to no avail. What am I doing wrong:
Related
i want to style a TextField component, but i'm having a really hard time with it. I saw a few ways to do it, but i don't really get it. Also, apprently the makeStyles is deprecated, so i'm really lost here.
I have this TextField
And i want the outline border to be white and the input color. When i focus and click on it, it works fine. As for the input, i styled it with inputLabelProps with color:'white', but when i click on it doesn't change to the same color as the border.
Thanks in advance
I am getting some sort of a tooltip when i use Recharts on my page, everytime i hover over text elements. How can i disable this? I looked through the Recharts docs and tried to find others with the same issue.
Example on the tooltip
I'm trying to set a downshift component inside a dialog body component, playing with zIndex doesn't work, and suggestion always appears underneath.
Is there a way to show downshift suggestion on top while using with a dialog ?
Here's a dialog with a downshift component inside (taping "a" inside "search a country" show the hidden suggestion) as an example of this issue :
https://codesandbox.io/s/q3lllwr08j
I also faced a similar problem. Hope this is what you are looking for: codeSandboxLink
I just added a class and added it to Dialog and DialogContent. The class name is dialogPaper. Look for the class in styles.
The class is:
dialogPaper: {
overflow: "visible"
}
Find an easy way to fix by just setting dropdown css by position: fixed
I guess the problem is not with the Z-Index. It's just not enough space to show the content of the dialog. I tried this solution with wrapping the content of the dialog with Paper element and set the height and width
I'm trying to set an icon to a ui-select, however I've been failing. I've seen several examples online, where they have screenshots of arrows, or different icons. I'm curious how I can change this out.
Currently, I'm not having much luck, as I don't have any icon showing.
<ui-select multiple ng-model="myModel" theme="bootstrap" on-select="myOnSelect()">
I assume I'm missing a CSS reference, or something else.
Example I found that has ui-select with arrows: http://embed.plnkr.co/jBJkDb
Looking at https://github.com/angular-ui/ui-select/wiki/ui-select there is a section called "Examples: Disabling Instead of Removing Selected Items in Multiple Selection" which has a different icon with a different color.
Can someone identify how to change the icon on the right for the ui-select?
I'm working in a project, where I have to show a typeahead in a ng-grid cell. But, the typeahead is not working in a ng grid cell. I have put a Plunker.
See that the typeahead is working in the same page above the grid. But it's not working in the ng grid cell. Can you please help?
Thanks in advance.
Spent quite some time tracking all the problems in your plunker, there were quite a number of them:
you were missing ng-model directive on the input elements used in grid's cell, there were many errors in the console
typeahead window is appended as an element after an input element so it means that you need to have it wrapped in a parent DOM element, ex.: <div>
The 2 above changes made the typeahead work. Well - partially. The correct DOM structure is generated etc. but nothing gets displayed due to CSS conflicts. It seems like both typeahead popup and a cell in a grid are absolutely positioned. This is a bit surprising for a grid but OK. The real problem, though, is that the .ngCell class has the overflow: hidden; property and it makes the typeahead popup invisible.
If you remove the overflow: hidden; from the .ngCell it all starts to "work":
http://plnkr.co/edit/pzLb3079yuhDtW1XIxvq?p=preview
I guess we are facing conflicts of Bootstrap's CSS and ng-grid CSS. We can't change Bootstrap's CSS in this project so you will have to decide to either bring this issue to the attention of the ngGrid folks or hack one of the CSS definitions.
More info about how to make work ng-grid + typeahead inline editing:
http://lemoncode.net/2014/01/28/ng-grid-inline-editing-using-bootstrap-typeahead/
plunkr:
http://plnkr.co/edit/8udsvZSokG5v37xicyuz?p=info