tabs with display flex

[milahu]

tabs are not working with flex layout the hidden="hidden" attribute has no effect

fixed in https://github.com/milahu/solidjs-blocks-vanillajs/commit/1812796e7e5020e59a496c126406de1e4fc04b12 maybe there is a better solution than display:none

// src/App.jsx

import styles from './App.module.css';

export default function App(props) {
  return (
    <div class={styles.App}>

      <Tabs classList={{ [styles.flexcolumn]: true }}>

        <Tab>a</Tab>
        <TabContainer classList={{ [styles.flexcolumn]: true }}>
          {"a ".repeat(1000)}
        </TabContainer>

        <Tab>b</Tab>
        <TabContainer classList={{ [styles.flexcolumn]: true }}>
          {"b ".repeat(1000)}
        </TabContainer>

      </Tabs>
    </div>
  );
}

/* src/App.module.css */

.App {
  height: 100vh;
  display: flex;
  flex-direction: column;
  /*align-content:stretch;*/
}

.flexcolumn {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

[atk]

You're manipulating the tabs themselves. If you overwrite the internal styles, I cannot guarantee that everything will work correctly. If you need flexbox inside the tabs, put a container into them to wrap the content.

Also, if you manipulate the styles, you could do

.flexcolumn:not([hidden="hidden"]) {...}

Not to overwrite the browser's display value of hidden fields (which is what you inadvertedly do here).