Structure field width not working in panel

The CMS Questions
1

This is my blueprint:

title: Home
pages: false
fields:
  title:
    label: Title
    type:  text
  halftextboxes:
    label: Halftextboxes
    type: structure
    width: 1/2
    entry: >
    	{{halfheader}}
    	{{halfcontent}}
    fields:
	    halfheader:
	    	label: Header
	    	type: text
	    halfcontent:
	    	label: Text
	    	type: text

The problem is that the fields are now half width but anyway they are under each other.
Is that a bug or do I do something wrong?

2

Should be like this, with the width applied to the sub-fields instead of the structure fields

halftextboxes:
    label: Halftextboxes
    type: structure
    entry: >
    	{{halfheader}}
    	{{halfcontent}}
    fields:
	    halfheader:
	    	label: Header
	    	type: text
                width: 1/2
	    halfcontent:
	    	label: Text
	    	type: text
                width: 1/2
3

This aint doing nothing. : (

4

Hm, I’m using that in a blueprint and it works:

What version of Kirby is it that you are using?

6

I am using the latest version.
Do you use structure fields? with normal fields it work for me too.

7

Yes, the example screenshot I posted above is from a structure field with the width of “1/2” applied to the date and time fields within the structure field. But I’m sorry, I forgot that I had added some custom panel css:

@media screen and (min-width: 50em) {
    .field-grid-item-1-2,
  .field-grid-item-2-4 {
    width: 50%;
  }
  .field-grid-item-1-4 {
    width: 25%;
  }
  .field-grid-item-3-4 {
    width: 75%;
  }

While the width attribute is added correctly, because of the width of the modal, it doesn’t do anything.

8

Oh cool.
Where do I need put that custom css?
In panel.css? This css is surprisingly minified, so would be hard to modify it :confused:

9

I’m not sure if this feature is supported in 2.06 but it is in the 2.1 beta, you can tell Kirby in your config.php to look for a custompanel.css file, e.g.

c::set('panel.stylesheet', 'assets/css/custompanel.css');

And then add that file to assets/css

1 Like
10

It is: http://getkirby.com/blog/kirby-2-0-6

1 Like
11

As @texnixe has already pointed out, you should rather use a custom stylesheet:

c::set('panel.stylesheet', 'assets/css/custompanel.css');

But just to explain why panel.css is minified: Kirby uses sass to pre-process the CSS. So you can find the plain SASS/CSS at panel/assets/scss and int its components subfolder.

1 Like