3

i am using semantic-ui (via react-semantic-ui). i want a little area for logon in the bottom of my menu column.

i have this:

i want this:

i did the above using position: absolute; bottom: 0, but i'm betting there's a semantic positioning class or react-semantic-ui component to use that would achieve it w/out manual styles

my components are as follows:

  <Menu vertical fixed={'left'} inverted>
    <Menu.Item name='account' active />
    <Menu.Item name='settings' active={false} />
    <Menu.Menu>
      <img width="50px" height="50px" style={{ backgroundColor: 'red' }} />
      <Menu.Item name='logout' active={false} onClick={() => null} />
    </Menu.Menu>
  </Menu>
cdaringe
  • 1,274
  • 2
  • 15
  • 33
  • Semantic UI has 'bottom aligned content' class, It should do what you're trying to. http://semantic-ui.com/views/item.html – Ilanus Nov 29 '16 at 01:04
  • hey @IlanHasanov, thanks for the info. I'm having a difficult time implementing it. In your link, everything is wrapped in an `items` group. The items group, however, does not vertically expand to fill the space, therefore my little red-box node is stuck. further, the verticalAlign seems to be for content within an item, not for an item within an item group. any thoughts there? thanks! – cdaringe Nov 30 '16 at 02:38
  • use custom css then.. – Ilanus Nov 30 '16 at 12:31

1 Answers1

0

I would use the Segment element. The attached prop is what you'll find most useful and you can easily customize it to become a full menu. 

<Segment attached='bottom'></Segment>

You should easily be able to cusomize this to fit your stylistic needs.

Chase
  • 2,206
  • 1
  • 13
  • 17
  • hey Chase! thanks for the tip! `Segment` adds a nice little wrapper around the card I was using--thx! Unfortunately, attached='bottom' doesn't actually drop it to the bottom of the menu. here's a [live example](https://cdaringe.github.io/octagon/?selectedKind=core.Menu&selectedStory=vertical%20w%2F%20bottom%20content&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel): , [here's the source](https://github.com/cdaringe/octagon/blob/master/src/menu/Menu.stories.js#L22) for that example – cdaringe Nov 29 '16 at 20:57