Suggester not working in read mode

[MocktardJackson]

• [ x ] The Plugin is up to date
• [ x ] Obsidian is up to date

Describe the bug
When in read mode, the suggester fields are not shown, they work properly when in edit mode, but then it is impossible to use selector fields since clicking on those will open the raw code to edit.

To Reproduce

>[!info]+ Trackers
>`````col
>flexgrow=2
>===
>````col-md
>#####  Field 1
>```meta-bind
>INPUT[select(title(Status),option(A),option(B),option(C)):1]
>```
>````
>
>````col-md
>#####  Field 2
>```meta-bind
>INPUT[select(title(Type),option(A),option(B),option(C)):2]
>```
>````
>`````
>`````col
>flexgrow=2
>===
>````col-md
>#####  Field 3
>```meta-bind
>INPUT[multi_select(
>option(AAA),
>option(BBB),
>option(CCC),
>option(DDD),
>option(EEE),
>option(FFF)):consultants]
>```
>````
>````col-md
>##### field 4
>```meta-bind
>INPUT[suggester(optionQuery("folderA")):4]
>```
> ##### field 5
>```meta-bind
>INPUT[suggester(optionQuery("folderB")):5]
>```
> ##### field 6
>```meta-bind
>INPUT[toggle():6]
>```
>````
>`````

Expected behavior
I should be able to manipulate all 6 fields, wether in read or edit mode. Currently, I can only change fields 1-3 when in read mode, and fields 4-5 in edit mode. field 6 is always usable.

Screenshots

Here in edit mode with preview on, fields 4 and 5 usable but Fields 1-3 cannot be used since it shows code when clicking on an option.

Here in read mode, fields 4 and 5 are unusable

Occurs on

• [ X ] Windows

Plugin version
0.4.0

Thanks !

[mProjectsCode]

that is strange. Can you check for any errors in the console?

[mProjectsCode]

To open the console, press Ctrl-Shift-I on Windows/Linux or Cmd-Opt-I on macOS.

[mProjectsCode]

This seems to be an issue caused by the columns plugin, not using obsidians API correctly and thus causing Markdown-Render-Children of other plugins to unload immediately.

One bug report already showcases the issue on the columns plugin repo. tnichols217/obsidian-columns#46

As a way around this, I recommend using CSS to create column/grid layouts.

[mProjectsCode]

Here is some CSS that you can use as a snippet, which uses special callouts to create a customizable grid layout. (This is taken from my theme, which you can find here https://github.com/mProjectsCode/obsidian-lemons-theme)

.callout[data-callout=row] {
  background: transparent;
}
.callout[data-callout=row] > .callout-title {
  display: none;
}
.callout[data-callout=row] > .callout-content {
  padding: 0;
  background: transparent;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--size-4-4);
}
.callout[data-callout=row] > .callout-content > * {
  flex: 1;
  margin: 0;
}
.callout[data-callout=grid] {
  --lt-callout-grid-columns: 2;
  background: transparent;
}
.callout[data-callout=grid][data-callout-metadata="1"] {
  --lt-callout-grid-columns: 1;
}
.callout[data-callout=grid][data-callout-metadata="2"] {
  --lt-callout-grid-columns: 2;
}
.callout[data-callout=grid][data-callout-metadata="3"] {
  --lt-callout-grid-columns: 3;
}
.callout[data-callout=grid][data-callout-metadata="4"] {
  --lt-callout-grid-columns: 4;
}
.callout[data-callout=grid][data-callout-metadata="5"] {
  --lt-callout-grid-columns: 5;
}
.callout[data-callout=grid] > .callout-title {
  display: none;
}
.callout[data-callout=grid] > .callout-content {
  padding: 0;
  background: transparent;
  display: grid;
  grid-template-columns: repeat(var(--lt-callout-grid-columns), 1fr);
  gap: var(--size-4-4);
}
.callout[data-callout=grid] > .callout-content > * {
  margin: 0;
}

Here is how it looks:

Row
> [!row]
> > [!info]
> > hello
> 
> > [!warning]
> > world, hello world, hello world 
> 
> > [!danger]
> > !

Grid
> [!grid|2]
> > [!info]
> > hello
> 
> > [!warning]
> > world, hello world, hello world 
> 
> > [!danger]
> > !

Non callout Grid
> [!grid|2]
> ![[lemons-theme-test-image.PNG|Lemon theme test image]]
> 
> Test
> 
> > Quote
> 
> _This is a non callout grid_

[MocktardJackson]

Thanks for the quick and detailed answer !
Have a great one.