Can I style the output of the CheckBoxGroup using the ASP.NET MVC wrapper?

[Harper]

I'm trying to arrange the checkboxes inside a CheckBoxGroup to mimic an existing WebForms layout (embedded in Sharepoint). The current UI has checkboxes in columns, and looks a lot cleaner than what I get with just a "horizontal" layout of the CheckBoxGroup. Any advice?

[Ivan Danchev]

Hello Harper,

The CheckBoxGroup does not have a built-in column layout, but you can display the checkboxes in columns with custom CSS, for example:

@(Html.Kendo().CheckBoxGroup()
	.Name("checkboxgroup")
	.Items(i =>
	{
		i.Add().Label("Day pack").Value("1");
		i.Add().Label("Hiking poles").Value("2");
		i.Add().Label("Hiking boots").Value("3");
		i.Add().Label("UV protection sunglass").Value("4");
		i.Add().Label("Trousers").Value("5").Enabled(false);
	})
	.Value(new string[] { "1", "2" })
)

<style>
	ul.k-checkbox-list {
		columns: 3;
		-webkit-columns: 3;
		-moz-columns: 3;
	}
</style>

This CSS rule will result in 3 columns of checkboxes.

Regards,
Ivan Danchev
Progress Telerik

[Harper]

Ivan, 

    Thanks for the input. I went a different route on the exact CSS, but you helped me find the direction I needed to go. I used flexbox like so:

ul.k-checkbox-list {
    flex-direction: row;
    flex-wrap: wrap;
    display: flex;
}

ul.k-checkbox-list li{
    flex: 1 0 25% !important;
}

 

Which yielded a look that was much closer to the original.

Harper