I almost have my Bootstrap column and row controls working in the visual editor. However I have been struggling with a number of minor issues that I can’t seem to overcome. Any help is appreciated. Here is an example of these controls in action…
So here is a Bootstrap row dropped in from the custom control menu and 3 Bootstrap columns dropped inside of the row. Then I have dropped an image in the center column. I have the row component selected and you can see in the right hand pane the inputs where I can set the border color and thickness along with the padding, margin and flexbox utilities. This is really starting to look good!
Here are the problems I am facing…
- I had to use “noWrap: false” on the column component to make it work right. What I discovered is that when you use noWrap:false, you can no longer select the control in the visual editor. This is a deal breaker because I need to be able to set the bootstrap column classes (col-n, col-sm-n, col-lg-n, etc) to control the layout within the row. How can the noWrap:false components be selected in the visual editor?
- I am using a default text component to indicate the position of the row or column controls. Otherwise the row and column controls are invisible without any child controls. This is fine except that when you drop another control in it, I want the default control to be deleted. Of course you can delete it manually but this is really not what I want. How do you do this?
Here is the code for registering my bootstrap column and row components…
Builder.registerComponent(RowComponent, {
name: "RowComponent",
noWrap: false,
inputs: [
{
name: 'border',
friendlyName: 'Border enable',
helperText: 'Enable or disable the border',
type: 'boolean',
defaultValue: true,
},
{
name: 'borderColor',
friendlyName: 'Border color',
helperText: 'Select the Bootstrap theme border color',
type: 'string',
defaultValue: 'primary',
enum: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
},
{
name: 'borderWidth',
friendlyName: 'Border width',
helperText: 'Select the border width (1-5). Units are rems. 1 rem = 16 pixels typically',
type: 'number',
defaultValue: 1
},
{
name: 'padding',
friendlyName: 'Padding',
helperText: 'Select the padding (0-5). Units are rems. 1 rem = 16 pixels typically',
type: 'number',
defaultValue: 2
},
{
name: 'margin',
friendlyName: 'Margin',
helperText: 'Select the margin (0-5). Units are rems. 1 rem = 16 pixels typically',
type: 'number',
defaultValue: 2
},
{
name: 'flexbox',
friendlyName: 'Flexbox',
helperText: 'Enable flexbox layout. This is useful for positioning elements within the row.',
type: 'boolean',
defaultValue: true,
},
{
name: 'justifyContent',
friendlyName: 'Justify Content',
helperText: 'Select the justify content option for the flexbox layout.',
type: 'string',
enum: [
{
label: '(none)',
value: ''
},
{
label: 'start',
value: 'justify-content-start'
},
{
label: 'end',
value: 'justify-content-end'
},
{
label: 'center',
value: 'justify-content-center'
},
{
label: 'space between',
value: 'justify-content-between'
},
{
label: 'space around',
value: 'justify-content-around'
},
{
label: 'space around',
value: 'justify-content-evenly'
}
],
defaultValue: 'justify-content-center'
},
{
name: 'alignContent',
friendlyName: 'Align Items',
helperText: 'Select the align items option for the flexbox layout.',
type: 'string',
enum: [
{
label: '(none)',
value: ''
},
{
label: 'start',
value: 'align-items-start'
},
{
label: 'end',
value: 'align-items-end'
},
{
label: 'center',
value: 'align-items-center'
},
{
label: 'baseline',
value: 'align-items-baseline'
},
{
label: 'stretch',
value: 'align-items-stretch'
}
],
defaultValue: 'align-items-center'
},
{
name: 'other',
friendlyName: 'Other Bootstrap Classes',
helperText: 'Enter other bootstrap classes where needed. Separate multiple classes with spaces. Ex: "mt-3 mb-3"',
type: 'string',
defaultValue: ''
}
],
canHaveChildren: true,
defaultChildren: [
{
'@type': '@builder.io/sdk:Element',
component : {
name: 'Text',
options: {
text: 'This is a row. Drop column controls here. Other controls work also.'
}
}
}
],
image: "http://localhost:8009/grip-horizontal.svg",
});
Builder.registerComponent(ColumnComponent, {
name: "ColumnComponent",
noWrap: true,
inputs: [
{
name: 'col',
friendlyName: 'Column',
helperText: 'Select the column size (1-12)',
type: 'number',
defaultValue: 12
},
{
name: 'colSm',
friendlyName: 'Column (Small)',
helperText: 'Select the column size (1-12) for small screens',
type: 'number',
defaultValue: null
},
{
name: 'colMd',
friendlyName: 'Column (Medium)',
helperText: 'Select the column size (1-12) for medium screens',
type: 'number',
defaultValue: null
},
{
name: 'colLg',
friendlyName: 'Column (Large)',
helperText: 'Select the column size (1-12) for large screens',
type: 'number',
defaultValue: null
},
{
name: 'colXl',
friendlyName: 'Column (Extra Large)',
helperText: 'Select the column size (1-12) for extra large screens',
type: 'number',
defaultValue: null
},
{
name: 'border',
friendlyName: 'Border enable',
helperText: 'Enable or disable the border',
type: 'boolean',
defaultValue: true,
},
{
name: 'borderColor',
friendlyName: 'Border color',
helperText: 'Select the Bootstrap theme border color',
type: 'string',
defaultValue: 'primary',
enum: ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark']
},
{
name: 'borderWidth',
friendlyName: 'Border width',
helperText: 'Select the border width (1-5). Units are rems. 1 rem = 16 pixels typically',
type: 'number',
defaultValue: 1
},
{
name: 'padding',
friendlyName: 'Padding',
helperText: 'Select the padding (0-5). Units are rems. 1 rem = 16 pixels typically',
type: 'number',
defaultValue: 2
},
{
name: 'margin',
friendlyName: 'Margin',
helperText: 'Select the margin (0-5). Units are rems. 1 rem = 16 pixels typically',
type: 'number',
defaultValue: 2
},
{
name: 'other',
friendlyName: 'Other Bootstrap Classes',
helperText: 'Enter other bootstrap classes where needed. Separate multiple classes with spaces. Ex: "mt-3 mb-3"',
type: 'string',
defaultValue: ''
}
],
canHaveChildren: true,
defaultChildren: [
{
'@type': '@builder.io/sdk:Element',
component : {
name: 'Text',
options: {
text: 'This is a column. Drop any controls here'
}
}
}
],
image: "http://localhost:8009/grip-vertical.svg",
});
