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

1 Answer 42 Views
Checkbox
Harper
Top achievements
Rank 1
Harper asked on 23 Sep 2021, 10:02 PM
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?

1 Answer, 1 is accepted

Sort by
1
Accepted
Ivan Danchev
Telerik team
answered on 28 Sep 2021, 01:07 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Harper
Top achievements
Rank 1
commented on 28 Sep 2021, 04:09 PM

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

Tags
Checkbox
Asked by
Harper
Top achievements
Rank 1
Answers by
Ivan Danchev
Telerik team
Share this question
or