Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Want to add custom border to image item in gallery. #258

Open
SymntxHomendra51 opened this issue Dec 2, 2022 · 2 comments
Open

Want to add custom border to image item in gallery. #258

SymntxHomendra51 opened this issue Dec 2, 2022 · 2 comments

Comments

@SymntxHomendra51
Copy link

How to add border to each item in gallery?
or box shadow

@itoldya
Copy link
Collaborator

itoldya commented Dec 2, 2022

Hi! Try to style with CSS. Available class names are ReactGridGallery_tile, ReactGridGallery_tile-viewport, and ReactGridGallery_tile-overlay.

.ReactGridGallery_tile-viewport {
    border: 1px solid black;
}

@SymntxHomendra51
Copy link
Author

thanks, but i've managed to make this work. by using this props. Its strange that tileViewportStyle removes default viewport style which I have to mention manually.

 <Gallery
        images={Images}
        enableImageSelection={false}
        onClick={openNewTab}
        margin={15}
        tileViewportStyle={(o) => ({
          height: o.item.scaledHeight,
          width: o.item.viewportWidth,
          overflow: 'hidden',
          boxShadow: '0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23)',
        })}
     
      />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants