Volto: Semantic UI vertical tabs - content appears below the tabs [solved]

Plone Support Customizing Plone
1

Any thoughts on why tab content is falling below the tabs when I use the vertical layout for Semantic UI Tabs?

According to Tab - Semantic UI React

What I expect

A vertical tabular layout should look like this:

image
image1586×512 29.1 KB

What I'm seeing

I've used the code in a custom block I'm working on and it ends up placing the tab content below the tabs instead of to the right of tabs.

image
image1008×288 8.22 KB

the code

This is all the code for my View.jsx

/**
 * View VerticalTabMenu block.
 * @module components/Blocks/ResourceSearch/View
 */

import React from 'react';
import PropTypes from 'prop-types';
import { Tab } from 'semantic-ui-react';

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]


/**
 * View VerticalTabMenu block
 */
const View = ({ data, path }) => {
  return (

      <Tab menu={{ fluid: true, vertical: true, tabular: true }} panes={panes} />
 
      );
};

/**
 * Property types.
 * @property {Object} propTypes Property types.
 * @static
 */
View.propTypes = {
  data: PropTypes.objectOf(PropTypes.any).isRequired,
};

export default React.memo(View);
2

Based on what I know of pastanaga/volto we're working with a subset of the grid of 16 provided by semantic ui.
The vertical tab menu seems to assume that 16 grid and this is not working out for me.
Inspecting the code I noted the divs were "four" and "twelve", manually changing the divs in the inspector fixes the issue. see generated code below:

<div class="ui grid">
<div class="four wide column">
   <div class="ui vertical tabular menu">
   <a class="active item">Tab 1</a>
   <a class="item">Tab 2</a>
   <a class="item">Tab 3</a></div></div>
<div class="stretched twelve wide column">
  <div class="ui bottom attached segment active tab">Tab 1 Content</div>
</div>
</div>

So... I need to know how to override the default gird used for vertical tabs.

3

Maybe this would help? volto/Form.jsx at master · plone/volto · GitHub

1 Like
4

Thanks @tiberiuichim,
Where would this type of thing need to go in the docs?

I had to add a 'grid' property to my Tab. using a paneWidth of 8 or less works for me so far.
Any paneWidth bigger than 8 resulted in the content falling below the tabs.
see how I used 'grid' in the code snippet below:

      <Tab menu={{ fluid: true, vertical: true, tabular: true }} 
               panes={panes} 
               grid={{ paneWidth: 8, tabWidth: 2, stackable: true }} 
/>
5

Further notes:
When it comes to props/attributes on the components, the best source for documentation seems to be in the typescript source.

For example the list of available props of the Tab component can be found in the Tab.d.ts file: