I'm using Material-UI GridList to display some pictures in my React app. I'd like to have an IconButton on top of the image in my GridTile component. I can accomplish this by passing the button to the actionIcon prop. But it only shows up if I also pass a title prop. Looks like this when (title='image'):
Without the title prop, the overlay doesn't show. Passing title='' and title={null} both have the same result.
Is there any other way to have an IconButton on top of the image in a GridTile? My goal is to end up with something like this:
Thanks in advance, I appreciate any advice!
The GridTile component displays the overlay and actionIcon only if title evaluates to true (as of this writing, you can see that test around line 200 of the source). null, undefined, and an empty string all test out to false, which is why you're not seeing the overlay appear when you're using those values.
One workaround is to provide a title that has no impact on display but is not false, like a space (' '). For example, the following tile will have an overlay and visible actionIcon but effectively no title:
<GridTile
key={tile.img}
title={' '}
actionIcon={<IconButton><StarBorder color="white" /></IconButton>}
>
As far as I know, this is the only possible fix in material-ui v0 (short of implementing this feature yourself and submitting a pull request). For a better, more elegant solution, you're going to have to look towards material-ui v1.
Material-ui v1 has a GridListTileBar component which controls the display of the overlay, icon, and title. This gives you fine grained control over what to display, so that you can implement your desired behavior with no workarounds.
However, I know that a full transition to v1 (which has a lot of breaking changes) can be daunting. If you want to transition only partially, you can always install the two versions side by side. This will allow you to use the newest GridList and all of those features without having to change too much in the rest of your app.
Related
I am trying to create a simple dashboard to show information at a glance. I am using the swimlane number card chart found here: https://swimlane.gitbook.io/ngx-charts/examples/number-card-chart.
Everything is working but I can't get the title of a card to wrap to the next line if it is longer than the card, here is an image of what I am talking about:
I have tried applying style to the parent div and tried with selectors like ".ngx-charts-number-card.title" ".ngx-charts-number-card.title" ".card.title" etc. I can't even modify the style when using the inspector live in the browser. I can't find any documentation to style these elements so any help would be appreciated.
i'm wondering the way to get the state for each section, using React fullPage.js.
I want to know the way to get section's state, so i can give the css property to the header for each different sections.
Such as, when you get to the website, the header is shown. However, from the second page, the header goes on disapper(display:none).
Thanks for giving me a hand !
You can use multiple methods:
Using fullpage.js callbacks (See JS example or React Example)
Calling fullpage_api.getActiveSection (See example)
Using CSS state classes (See example or example 2)
I’m stuck on a quick change of the ion-select component.
I’m trying to keep a persistent way to display the alert, but checkbox are for sure doing what they want.
To explain, I need to put the checkbox on the right side of the alert. After investigations, I notice that on Android, it’s on the left by default, but in iOS, for a simple ion-select, squares are on the right, and when I use “multiple” property on ion-select, squares are going to be align on the left.
Does anybody knows how it’s possible to put these checkbox on right on all cases ?
N.B: There’s also something weird in iOS, when it’s an simple ion-select, it displays simple check without any circle. (Compares to multiple, that have circles with check on the left.)
Also, sorry for my english, improving it.
Thanks to all.
If you're using ionic 4/5, try using display:flex (Check this out for the details: https://css-tricks.com/snippets/css/a-guide-to-flexbox/). Plus, the css for popup component(alert,toast,loader, etc) wont work if you do it on the page.css file, thus I recommend to overwrite the CSS on the global.css file.
I have tried to search for this all over, but haven't found anything close to my question anywhere.
Does anyone know if it's possible to print out a CSS generated linear-gradient? I am mocking up a website for my boss, and it looks really nice, but when I try to make a printer-friendly page, the gradients don't display at all.
For reference, what I'm trying to print is a indicator bar that has a slider element on top of it, to indicate the result of a value within a range.
The gradients look really great on the page, but just don't show up in a print dialog.
Thanks in advance!
If i understand your problem correctly, sounds like all background images aren't printing right? That's a default behavior of IE. To print background graphics (which might include your 'gradient graphic', go to print -> page setup and click on "Print background colors and images".
Hope this helps.
Not exact here, but printing is rendered in it's own engine apart from the browsers engine.
It TYPICALLY (with the exception of say, the iPad) filters out background images and certain types of rendered material to save on ink. The only way to change this is if the user changes his or her own printing preferences.
There is no CSS or Javascript way to make this happen, unless you render the page as an image, and print the image.
I can go in to more detail if you'd like, but with the exception of the iPad, print formatting like eMail formatting is a tricky area to get in to.
Hi I want to create an application has this sort of function:
http://looklet.com/create
In this application when you click the button (or some tilelist) on the right the model on the left update accordingly. I wonder how they achieve this. Originally i think it's some sort of image-only pop-up window but then pop-up window seems to update the entire view.
Then I think it might be only change view state, but then I still confused how it can be done using view state.
Flex expert please give me some hint !
Looks like transparent images drawn on Canvas. Each piece must have predefined offset and draw order.
Probably just images placed on one or more Canvas, with the z-order controlled for depth.
The body stays the same, so shirts probably have their own placement properties, as do skirts, underwear, hosiery, etc. as well as backgrounds, faces, etc.