Stack Overflow
Stack Overflow

Questions tagged [grommet]

grommet tag is used to mark questions related to grommet framework

Grommet was created to give developers and designers alike access to tools that otherwise are out of reach of most product teams. Grommet’s goal is to assist in creating experiences that work across the many different interaction methods and screen sizes.

Grommet is structured to foster active communication between designers and developers in hopes of creating better user experience.

100 questions
0
votes
1 answer

Global Styles breaking Grommet styled-components styles

I've tried to change my existing App to use Grommet for the Inputs. It worked quite fine, but I got a problem with the styles. The react-App is included on different pages, so I have to deal with different kinds of global css styles. Before Grommit…
Alexander Bogoslawski
  • 1
  • 2
0
votes
1 answer

How can I have where the 'other' turns into a button where the user can input as much money as they want?

How can I have where the 'other' turns into a button where the user can input as much money as they want? I tried creating a const other with a button and putting {other} in the options tab like this options={['$5', '$10', '$20', '$50', '$100',…
7k.luca
  • 17
  • 5
0
votes
1 answer

How to fix the clumped up text? How to fix the background not going all the way down?

In this code, my text on the sidebar side keeps no getting clumped up together. How can I fix that? Also, how can I extend the sidebar's background all the way to the point where it meets the footer like how the area main does. The whole page is set…
7k.luca
  • 17
  • 5
0
votes
1 answer

How can I make this dropdown show all of the fifty states instead of "option #"

Right now this code shows a dropdown form that lists "option #". How can I make all of the fifty states selectable instead of the option and a number? import React, { useState } from 'react'; import { Box, FormField, …
7k.luca
  • 17
  • 5
0
votes
1 answer

How to fix button to be interacted with, in carousel?

When I try to import a layer/button onto one of these cards it does not allow it to be clicked or interacted with. I believe the problem is with the carousel. What is a way I can fix this? The "CenterLayer" is supposed to act as a button and is the…
7k.luca
  • 17
  • 5
0
votes
1 answer

Show image as background in box in grommet

I am trying to set the background of a Box to a local image using the url property for background but it doesn't seem to take effect. I have created a sandbox to showcase the problem. I have added a background.jpeg image locally which I am setting…
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
0
votes
0 answers

Grommet MaskedInput doesn't work with multiple inputs

I am using MaskedInput to create a time picker for my web app. I used the example present on the grommet website but I can't get it to work properly. For example, on the widget shown on the website https://v2.grommet.io/maskedinput I can tap on the…
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
0
votes
2 answers

Grommet TextArea exports multiline text as a single line in the image

I want to export Grommet TextArea as an image. The following code works if there is just a single line of text. But if I adjust the TextArea component in a way to make the text fill multiple lines, this won't be exported in the output image. This is…
Anton Serov
  • 174
  • 2
  • 12
0
votes
1 answer

Specify different theme variables for a Layer or any other compoent in grommet

I want to show a Layer in one place with black background. So, I use the below theme setting: layer: { overlay: { background: 'black' } } Now I want to add show another Layer where the background is transparent. How can…
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
0
votes
1 answer

Don't show border below accordion in grommet

I am using grommet library for my web app. I want to know how can I avoid showing borders below FormFields and other controls such as Accordions. I have created a sandbox that demonstrates the problem and allows for testing any…
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
0
votes
1 answer

Specify props of a component imported from a UI library in styled-componennts

I am using grommet and styled-components. I have a few places where I use a component provided by grommet and set some similar props. I want to create a styled-components by using that component exported by grommet and specify the set props using…
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
0
votes
1 answer

CSS flexbox styles to fill width and height of elements

I am creating a web application for my react-native application. I feel quite comfortable in styling on react-native and was trying to use flexbox on the web also hoping it would allow me to use my react-native knowledge. But the styles behave a…
Varun Gupta
  • 2,870
  • 6
  • 33
  • 73
0
votes
2 answers

How to stop Grommet component from looping in Safari

I created a dynamic editor component with Grommet in my header and footer tabs. When the site is viewed in safari, each editor is changing its position when I make a change in the data like font size. It is an issue only in safari: it works normal…
Aravind Jaimon
  • 85
  • 8
0
votes
1 answer

Can't Style Grommet icon inside Anchor

I'm new to Grommet with styled components. I Have already checked all the docs and can't find the solution. PROBLEM I have an Anchor with an icon and a label. Problem is I cannot target the icon for styling when i hover or it is active. Text / Label…
rodspain
  • 55
  • 10
0
votes
1 answer

Not able to display a label using component from grommet

I am unable to display label separately for my graph. const Demo = () => ( {['bar', 'circle'].map(type => (
pythonbee
  • 15
  • 4
1 2 3 4
5
6 7