Unable to change container width to 100%

[kanhaiya-2000]

My intention is to have emoji container with exactly same width as width of input element and also be responsive across all screen dimensions.However even after looking into #45 , I cannot exactly figure out if it is all i need to do to override existing style. No change in width was seen even after passing style as param.

I believe that it is because of Inline width on section element (which is 352px as in the first screenshot above) and a subsequent children (a div element which wraps all emojis) of inline width 324px.

My code :

function EmojiPicker(props) {
    const ref = useRef()

    useEffect(() => {
        new Picker({
            ...props,
            data,
            ref,
            set: 'apple',
            parent: document.querySelector('.emogipicker'),
            style: { width: '800px' }
        })
    }, [])

    return <div ref={ref} className="emoji_mart" />
}

const Emogi = ({ callback, emogibox }) => {
    const onEmojiClick = (emoji) => {
        console.log(emoji)
        callback(emoji)
    }

    return (
        <div aria-selected={emogibox} className="emogipicker">
            <EmojiPicker onEmojiSelect={onEmojiClick} />
        </div>
    )
}

export default Emogi

I have also applied few css rules for em-emoji-picker tag and that is working perfectly. But no css rule is working for its children.

[alexbakers]

width changed after added perLine={18}

I also think that the block should inherit the width and height of the parent.

[Haraldson]

Any updates on this? Frankly I’m a little bummed out by how limited the styling options has gotten after the move to Shadow DOM and Custom Elements – the picker was perfectly customizable with React and Styled Components before, and now I can’t even make the inner container adapt its width due to CSS variables having to be predefined in order to style things..?

I’m all for upgrading to more modern technologies, but this feels premature?

[EtienneLem]

This has nothing to do with Shadow DOM / custom elements; it would’ve have been as “limited”. The width currently cannot be dynamic for performance reasons. In the context of a virtualized list (which we do now), handling dynamic width adds a layer of unpredictability that makes this a bit more complicated. It definitely can be done smartly (hint: ResizeObserver), but more computation will be required. Would probably need a new fullWidth prop, so that such extra computation is done only when explicitly required.

[Haraldson]

I’m actually unable to scroll the list of emoji. I’m not sure if it’s the layout I’m rendering it in or what, but it’s just not scrolling.

I’m also not sure about what you’re referring to, but my styling options are much more limited now than they were before:

---

There are no part annotations in the shadow DOM whatsoever:

<nav part="nav">
    ...
</nav>

These could have been targeted and styled by doing:

em-emoji-picker ::part(nav) {
    background: red;
}

---

I’m thus left with a few very eclectically selected CSS variables with weird logic and rules attached.

Some of them are mapped really weirdly 🤔:

.search input[type="search"] {
    background-color: var(--em-color-border);
}

Some of them require the variable follow a specific format:

--rgb-color: ${Object.values(parseToRgb(app.theme.someHexColor)).join(', ')};

Some of the property: value; pairs are functions of variables and fixed values.

Some of the property: value; pairs are just randomly hard-coded, as if they couldn’t be relevant to adapt to an established style.

In the previous version, I could simply extract the styled-components CSS I already had in my app for search inputs – and any other component for that matter – and use that to style Emoji Mart’s elements in order for it to match the look and feel of the app.

---

Where I could just pass Reactified SVG icons before…

import {
    Clock as Recent,
    Smile as People,
    Github as Nature,
    Coffee as Foods,
    Dribbble as Activity,
    Map as Places,
    Watch as Objects,
    CheckSquare as Symbols,
    Flag as Flags
} from 'styled-icons/feather'

<Picker icons={{
    categories: {
        recent: () => <Recent size={20} />,
        people: () => <People size={20} />,
        nature: () => <Nature size={20} />,
        foods: () => <Foods size={20} />,
        activity: () => <Activity size={20} />,
        places: () => <Places size={20} />,
        objects: () => <Objects size={20} />,
        symbols: () => <Symbols size={20} />,
        flags: () => <Flags size={20} />
    }
}} />

…I now have to…

import { renderToString } from 'react-dom/server'

const svg = Icon => renderToString(
    <Icon
        size={20}
        // Unless I make sure to specify these as inline styles, Emoji Mart’s CSS will blindly set these attributes for me, ruining the look of my custom icons..?
        style={{
            width: 20,
            height: 20,
            fill: 'none',
            strokeWidth: 1.5
        }} />
)

<Picker categoryIcons={{
    frequent: { svg: svg(Frequent) },
    people: { svg: svg(People) },
    nature: { svg: svg(Nature) },
    foods: { svg: svg(Foods) },
    activity: { svg: svg(Activity) },
    places: { svg: svg(Places) },
    objects: { svg: svg(Objects) },
    symbols: { svg: svg(Symbols) },
    flags: { svg: svg(Flags) }
}} />

---

Sorry for going quite very off-topic here, but for such a big update, it feels like this has been tested on a very narrow set of use-cases and frontend code stacks?

[EtienneLem]

I’m actually unable to scroll the list of emoji. I’m not sure if it’s the layout I’m rendering it in or what, but it’s just not scrolling.

That wouldn’t be a known issue, we would need reproducible steps.

There are no part annotations in the shadow DOM whatsoever

Sure, sounds like a good idea. PR more than welcome 🙃.

it feels like this has been tested on a very narrow set of use-cases and frontend code stacks?

Quite the contrary. By going web component instead of React component, we can include a lot more frontend frameworks. I’m convinced we’ll see more and more web components like this. part annotations would most likely help in your use-case for the custom SVG icons.

[cupid20103]

Um~ how to solve the above problem in the typescript?