Tips for modifying the table structure while utilizing datalist

Is there a way to adjust the table layout when using datalist? The current result, as shown in Example 1, does not properly display all the data in a continuous manner due to the table layout. How can I achieve a layout similar to Example 2?

I must use the datalist because I am utilizing repeatcolumn functionality which is not supported in repeater.

Here is the code snippet from my Aspx:

<asp:DataList ID="dl_Groups" RepeatColumns="2" runat="server" 
    OnItemDataBound="dl_Groups_ItemDataBound" RepeatDirection="vertical" 
    ShowFooter="False" ShowHeader="False">
    <ItemTemplate>
       <asp:CheckBox runat="server" ID="chk_Group" Text='<%# Eval("category_type") %>' 
            Value='<%# Eval("service_type_category_id") %>' onclick="OnGroupClick" />
       <asp:CheckBoxList runat="server" ID="chkServiceType" Style="padding-left: 20px" 
            DataValueField="ServiceTypeID" DataTextField="Name" EnableViewState="true">
       </asp:CheckBoxList>
       <br />
    </ItemTemplate>
</asp:DataList>
asp.net.netcssdatalist

Answer №1

Have you explored the various properties of the CheckBoxList?

  RepeatColumns="2"
  RepeatDirection="Vertical"
  RepeatLayout="Table"

These properties could prove useful to you.

You can also leverage css for styling
For instance

#chkServiceType tr{
display:inline-block;
margin-right:20px;
} ​

#chkServiceType tr label{
margin-left:5px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What steps can be taken to resolve this issue?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...

font-sizecss

Incorporate Javascript to smoothly transition a div into view, display it for a specified duration, gradually fade it out, and ultimately delete

I am excited to experiment with toast notifications by creating them dynamically. Each toast has a unique id number and I increment a counter every time a new one is created. The current functionality includes the toast sliding down, staying visible for 3 ...

javascriptjqueryhtmlcss

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

htmlcssasp.net

Bootstrap Modal for WooCommerce

I'm facing an issue while trying to create a modal window using woocommerce variables ($product). The problem lies in the placement of my modal and accessing the correct product id. Here is the code snippet I've been working on. Unfortunately, i ...

javascriptcsswordpresstwitter-bootstrap

Consistently ensuring even horizontal CSS padding throughout all components

I'm working on a website using React and TailwindCSS. Each part of the site is its own React Component, but I want to make sure that all sections have consistent horizontal padding and a maximum width where the content stays centered and doesn't ...

cssreactjstailwind-css

Alternate solution for outdated browsers that stretches to the maximum height available

Is there a way to ensure equal height for all children using flexbox, but also have a fallback option for browsers like IE10 and similar? I tried using display: table and display: table-cell, but it doesn't seem to work well with fixed heights. Addit ...

htmlcsshtml-table

An easier method to import XML data into a table with predefined columns before adding any rows

Usually, XML data that can be easily transformed into a datatable (using DataTable.ReadXML) is structured like this: <row ID="2185972"> <Unit_Nbr>TGHU3274759</Unit_Nbr> <T-State>Inbound</T-State> <Category>Impo ...

c#asp.netxml

JQuery post will not be able to retrieve from Asp.Net SQL Session Mode

While working on my Asp.net Mvc mobile application with jQuery on the front end, I encountered an issue where it seemed to be losing session variables. To address this, I decided to change the session state from in-process to SQL Server. After running the ...

c#jqueryasp.netsqlsql-server

The functionality of JQuery's .hover() is disabled once an HTML onClick() event is activated

I am currently working on a webpage and attempting to incorporate JQuery into it for the first time. However, I seem to be encountering some issues that I believe might have simple solutions. Background Information My JQuery code only contains one event l ...

javascripthtmljquerycss

Is there a way to display a specific dropdown menu depending on the checkbox that is selected?

I have a bunch of checkbox items, including one labeled nocalls, as well as a couple of dropdownlist boxes. Here are the dropdown boxes: <tr> <td align="right"><FONT class="Arial10"><B>Profile<font color="#ff0000">*</ ...

javascriptasp.net

Creating a custom date format for strings

I am attempting to display the Date format in the following manner: Tuesday April 17 6:12:02 2018 I have experimented with the following code: class Program { static void Main(string[] args) { var today = DateTime.Now.AddDays(-1); ...

c#.netdatetime

JavaScript confirm function fails to validate a required field validator

Utilizing the required field validator to validate a text box and prompting for confirmation on the click of a submit button using the confirm() function in JavaScript has posed a challenge. Upon pressing OK in the confirmation box, the page refreshes an ...

c#javascriptasp.netvalidation

Issues with capturing C# regex groups in parentheses

Attempting to extract the name and id from a given string using the code below: Regex.Matches "id: 123456, name: some dude", @"^id: (?<id>\d+), name: (?<name>[a-z]+(\s[a-z]+)?)" ); However, only one group and capture are fou ...

c#.netregex

Conceal table rows with JQuery in html

I need assistance in hiding a row in an HTML Table that contains a value of 0.00 in the third column. I've attempted using JQuery and CSS, but so far no success. Below is the code snippet: <%@ page language="java" contentType="text/html; charset= ...

jqueryhtmlcss

In order to enhance user experience, I would like the tabs of the dropdown in the below example to be activated by

function openCity(evt, cityName) { var i, tabcontent, tablinks; tabcontent = document.getElementsByClassName("tabcontent"); for (i = 0; i < tabcontent.length; i++) { tabcontent[i].style.display = "none"; } ...

javascripthtmlcss

Unable to alter the background color in a table row when a condition is verified

Within my 'work' array that is generated from an Excel file, I have values for employee_id (referred to as id), projects, and hours. Additionally, I have another array called 'employees' which contains all the employees in my database. ...

phphtmlcssarrayslaravel

Modifying the appearance of select components in React MUI using CSS

Can someone help me modify the appearance of the react material UI select component to match this design: https://i.sstatic.net/EhcWR.png https://i.sstatic.net/L2te2.png I have already applied the following CSS styling: const styles = { width:&apos ...

cssreactjsmaterial-ui

maintaining the alignment of three div elements

I am struggling to keep three divs side by side within a container, each containing an image and text below it. I had this layout working perfectly before, but now the right div falls underneath the other two when the screen size is reduced, followed by th ...

htmlcss

As the width decreases in animation, the content gradually disappears until it reaches zero

My issue involves red and black divs; when I hover over the parent element, the red div should appear by expanding to its full width. However, a problem arises when the width is set to 0px as the content still shows. Can someone provide assistance on how t ...

jquerycss

Increasing the opacity of a background image when a new div is added

While working on my chatbot assignment, I set the background image opacity to 0.02. Unexpectedly, as I input more messages, the opacity gradually increases all the way to 1. Although this effect is pretty neat, it wasn't my original intention. Some ...

jqueryhtmlcssopacity