Strange issue with tabs + columns
Support › MB Columns › Strange issue with tabs + columnsResolved
- This topic has 16 replies, 3 voices, and was last updated 7 years, 9 months ago by
Anh Tran.
-
AuthorPosts
-
July 15, 2017 at 5:23 AM #6321
Jackky
ParticipantTry my code
July 15, 2017 at 5:24 AM #6322Jackky
Participant*also can't find any markup buttons for code wrap here, sorry
July 15, 2017 at 5:30 AM #6323Jackky
ParticipantAnd another my thought: maybe it will be more user-friendly to make API looking like this:
fields => array ( columns => array( size => 4, class => 'custom-column-class', fields => array ( //you can add multiple fields here ), ), columns => array( size => 4, class => 'custom-column-class', fields => array ( //you can add multiple fields here ), ), columns => array( size => 4, class => 'custom-column-class', fields => array ( //you can add multiple fields here or leave empty ), ), )
July 15, 2017 at 9:02 AM #6324Truong Giang
ParticipantHi there,
Please make sure that the total of columns in meta box is multiple of 12, and all fields must have a specific columns value (Атрибуты doesn't have one)July 15, 2017 at 9:21 AM #6326Anh Tran
KeymasterHi Jackky,
Your idea about column class is nice. Will think about it. The suggested syntax I think will be problematic if we use with groups. So let's just keep it as it is.
July 17, 2017 at 7:30 AM #6332Jackky
ParticipantNope, that will be easier to use, here an example
fields => array ( columns => array( size => 4, class => 'custom-column-class', fields => array( 'name' => 'Group', // Optional 'id' => 'group_id', 'type' => 'group', // List of sub-fields 'fields' => array( array( 'name' => 'Text', 'id' => 'text', 'type' => 'text', ), // Other sub-fields here ), ), ), columns => array( size => 4, class => 'custom-column-class', fields => array ( //you can add multiple fields here ), ), columns => array( size => 4, class => 'custom-column-class', fields => array ( //you can add multiple fields here or leave empty ), ), )
July 17, 2017 at 8:20 AM #6333Anh Tran
KeymasterHi, I don't want to much nested arrays. In case sub-fields in groups are organized in columns, there will be a nightmare of nested nested arrays.
After reviewing the code, I think we can still achieve everything by this code:
fields => array( array( 'columns' => 4, 'class' => 'custom-column-class', ), ),
We have
class
attribute for fields, so let's use it instead of creating another attribute.July 18, 2017 at 6:25 AM #6347Jackky
ParticipantA nightmare, yes, it will be) But you can add this like advanced markup for those crasy coders, like me) I really need a feature to wrap 2-3 fields in one column and add empty columns to build beautiful UI inside admin area. And I think, I'm not alone with this perfectionism.
Add: also with this type of array markup there will be a feature to make nested columns.
July 18, 2017 at 9:18 AM #6349Anh Tran
KeymasterWe just updated the Columns extension yesterday with a better check for total columns (less than or greater than 12, it will close the div). But if you use with tabs, you still need to make sure total columns in each row equals to 12. Please update.
Regarding the new syntax, I was thinking about something advanced that can offer you more flexibility. But after looking at that, I see the change is only the
fields
parameter (theclass
as I replied can be achieved viaclass
attribute). And with the support of Group extension, you can do that easily, including the nested columns.Here is what you can do with Groups (the syntax is very similar):
'fields' => array( array( 'type' => 'group', // A wrapper group 'id' => 'wrapper', 'fields' => array( array( 'id' => 'name', 'type' => 'text', 'columns' => 4 ), array( 'id' => 'subgroup', 'type' => 'group', 'columns' => 8, 'fields' => array(), // Array of other sub-sub fields ) ), ), ),
July 19, 2017 at 11:44 AM #6363Jackky
ParticipantYes, it's the solution for someone, but group type saving a serialized array, but I need each value stay single in case to organize searching and filtering on the front. That's why I'm ready to deal with tonns on nested arrays in the markup example, I gave.)
July 21, 2017 at 7:27 AM #6377Jackky
ParticipantOh, suddenly I've got another great idea: just make a flex-grid based extension with a markup, such as I gave. If you like it, I can generate here the full list of options.
July 21, 2017 at 8:53 AM #6378Anh Tran
KeymasterHi Jackky, thanks a lot for your idea.
Can you post what you have in your mind here?
Currently, we're refactoring the Columns extension to allow multiple fields in 1 column. However, to make it backward-compatible, I can't use your syntax (I'd love too). We're moving to use the syntax similar to Tabs extension. It's not optimal, but it works.
July 22, 2017 at 1:19 AM #6389Jackky
Participant$meta_boxes[] = array( 'title' => 'Flex Metabox', 'tabs' => array( 'tab_1' => array( 'label' => 'Sample tab 1', ), 'tab_2' => array( 'label' => 'Sample tab 2', ), ), 'fields' => array( 'flex' => array( //defining, css display: flex; wrapper, can be used without any openssl_get_cert_locations 'align-items' => 'center', //simular to css align-items prop. 'justify-content' => 'flex-end', //simular to css justify-content prop. 'flex-wrap' => 'wrap', //simular to css flex-wrap prop. Used in case when you want to build your metabox mobile-friendly 'flex-direction' => 'row-reverse', //simular to css flex-direction prop. 'class' => 'custom-class', //if user want to define it's own style for this flex wrapper 'tab' => 'tab_1', 'fields' => array( //can hold single fields or new field types 'flex-item' or mixed 'flex-item' => array( 'flex-basis' => '50%', //simular to css flex-basis prop. Could handle any type af value, for example 100px, 33%, calc(100% - 50px) 'flex-shrink' => '0', //simular to css flex-shrink prop. 'fields' => array( array( 'name' => 'Sample Field 1', 'id' => 'sf1', 'type' => 'text', ), array( 'name' => 'Sample Field 2', 'id' => 'sf2', 'type' => 'text', ) ) ), array( //an example for single field without 'flex-item' div wrapper 'name' => 'Sample Field 3', 'id' => 'sf3', 'type' => 'text', 'flex-basis' => '200px', //can hold flex props too 'flex-shrink' => '0', ) ) ), array( //an example for single field outside flex wrapper. It's behave itself like common field 'name' => 'Sample Field 4', 'id' => 'sf4', 'type' => 'text', 'tab' => 'tab_1', ), array( //an example for single field outside flex wrapper and in another tab. It's behave itself like common field 'name' => 'Sample Field 5', 'id' => 'sf5', 'type' => 'text', 'tab' => 'tab_2', ) ) );
It's very heavy, I know. And this extension will be for pro users, who defenetely know for what they use it and know what css flex is.
The advantages of this idea:
1) Flexbox is native and, excepting lot's of nested arrays, it's very simple. Also if developer will have very heavy nested array - he can just define each block as single outside and use it like 'fields' => $product_attr_array - I have such experiense for one o my projects (social network)
2) It's allows to build any type of UI. Nested mobile-friendly columns, vertical-alignment ect. - anything you want. Some developers like me need this feature, I know (for now I need to break my mind with wrapping fields with 'custom_html' fields and other tricks)
3) This extension is easy to create. Also if you don't like my idea, I will try to make this extension by my own. I think it will not take lots of time.July 24, 2017 at 8:48 AM #6403Anh Tran
KeymasterThanks for your reply. I see 1 problem with the syntax above: what if we have multiple
flex-item
?Currently, we're working on an improved version of Columns, which supports syntax like this (similar to tabs):
$meta_boxes[] = array( 'title' => 'Test Columns', 'columns' => array( 'column-1' => 4, // Short syntax 'column-2' => array( 'size' => 8, 'class' => 'custom-class' ), // Advanced syntax ), 'fields' => array( array( // ... 'column' => 'column-1', ), array( // ... 'column' => 'column-2', ), ), );
I think this syntax makes thing easier to implement. I tried using nested syntax, but it requires to completely rewrite the plugin, which might break backward compatibility.
I'll think more about the flex syntax. My goal is making it as simple as possible. Currently, I see it's kind of complicated.
July 24, 2017 at 2:59 PM #6405Truong Giang
ParticipantHi @Jackky,
Thank you for your suggestion about flex box. We are considering the syntax below. It's clearer but it makes many nested levels to define fields. Can you check it and give your opinions? Thank you very much.
-
AuthorPosts
- You must be logged in to reply to this topic.