Ways to conceal a division within the Repeater

Currently, I am developing a VB ASP.NET site using Visual Studio 2012 Express for Web. Within my project, there is a Repeater containing two div elements with the css classes .dnnFormLabel and .dnnFormItem. Here is a snippet of code from the Repeater:

<div class="dnnFormLabel dnnFormShort">
    <asp:CheckBox runat="server" ID="chkSubQuestionBox" Text='<%#Eval("Label")%>' />
</div>
<div class="dnnFormItem dnnFormShort">
    <div>
        <label><span>
            <asp:Label ID="lblSubQuestionLabel" runat="server"><%#Eval("Prefix")%>&nbsp;<%#Eval("Label")%></asp:Label></span></label></div>
    <asp:TextBox runat="server" TextMode="MultiLine" ID="txtSubQuestionBox"></asp:TextBox>
    <%#Eval("description")%>
</div>

I have been trying to hide the div element with the class .dnnFormItem when it is empty. Despite applying the following CSS rule:

.dnnFormItem:empty {
       display: none !important;
    }      

The above method did not work as expected. Can someone provide guidance on how to achieve this? Any help would be greatly appreciated.

Answer №1

Make sure the div is completely empty, like this:

<div class="dnnFormItem dnnFormShort"></div>

If there is even a space inside the div, then .dnnFormItem:empty won't work.

<div class="dnnFormItem dnnFormShort">
</div>

This code will not have the desired effect.

Answer №2

To achieve this, utilize a Panel and adjust the Visible property based on a specific column value from the dataset.

<asp:Panel ID="Panel1" runat="server" CssClass="dnnFormItem dnnFormShort" Visible='<%# !string.IsNullOrEmpty(Eval("columnToValidate").ToString()) %>'>
    <div>
        <label>
            <span>
                <asp:Label ID="lblSubQuestionLabel" runat="server"><%#Eval("tocht_id")%>&nbsp;<%#Eval("naam_tocht")%></asp:Label></span></label>
    </div>
    <asp:TextBox runat="server" TextMode="MultiLine" ID="txtSubQuestionBox"></asp:TextBox>
    <%#Eval("naam_tocht")%>
</asp:Panel>

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 is the best way to prevent certain bootstrap classes from being applied across all elements?

After testing my HTML and CSS code on my local computer, it looks perfect. However, when I upload it to a server, the appearance changes. You can see it in action here: . The issue seems to be related to some bootstrap classes being activated differently ...

How come my columns are stacking on top of each other instead of being positioned side by side?

I am having an issue with my products displaying below each other instead of next to each other in their own column. How can I adjust the layout so that they appear side by side? View image <tr> <th>Month</th> <div *ngFor="let p ...

What is the best way to send HTML tag content to mark.js and delimit them with a space or comma?

I have been utilizing the mark.js library to highlight keywords on a webpage, and it's been working well. However, I now need to insert an extra space or a comma after each tag such as h1, h2, etc. Initially, I thought about using a loop like the one ...

Change the color of the div's background

My grid created using bootstrap 3 divs consists of a button, followed by a radio button, and then another button. I want to highlight these elements with a consistent background color that stretches across like a single row. Check out my attempt on this f ...

Save information entered into dynamically created input boxes in an array

I am currently working on a project to develop a website that generates timetables. However, I have encountered a roadblock in my progress. My issue lies in dynamically generating user-selected text boxes for subjects and faculties using a for loop. Unfor ...

Activate Select2 dropdown when text input is in focus

I am facing an issue with a form that has one text input and one select2 element (Version 4.0.0). My goal is to have the select2 element open when the text input is focused. Here’s what I have attempted : <select list="userAccountsMap.values" listKe ...

Issue with nested onChange() function in jQuery

Summary: Current Display: - Divs' visibility changes only when checkbox is toggled Preferred Display: - Divs' show/hide status adjusts based on both the checkbox and dropdown selection. For a fully functional example, check out this jsfiddle. ...

When dynamically loading content with ajax, dynamic content fails to function properly

Currently, I am attempting to incorporate dynamic content loading after the user logs in by utilizing $.ajax. Here is how it's being done: $.ajax({ url: "functions.php", type: "GET", data: login_info, datatype: 'html', a ...

Internet Explorer 10 offers 3D transformation capabilities

My 3D rotating image carousel works well in Chrome and Firefox but not in IE. I am aware that IE10+ does not fully support the preserve-3d tag, and although there are workarounds by applying transforms to the children instead, I have been unsuccessful in ...

How to Retrieve the Url of a Clicked Element using CSS Property

Is it possible to retrieve the URL when a link is clicked using CSS alone, without relying on JavaScript or jQuery? ...

How can I stop a table from resizing in Tailwind CSS?

So, I have created this table <table class="table-fixed border-separate border border-green-800"> <thead class="bg-indigo-800 border-b-2 border-indigo-200 w-full"> <tr> <th ...

Building a GWT webpage from scratch: A step-by-step guide

My project involves creating a website that features various Java tasks and informational content. Users can navigate through different pages by clicking on links from the homepage. Specifically, on the Java page, users will be able to complete tasks. Th ...

Having trouble retrieving the toDataURL data from a dynamically loaded image source on the canvas

Currently, I am working on a project that involves a ul containing li elements with images sourced locally from the "/images" folder in the main directory. <section class="main"> <ul id="st-stack" class="st-stack-raw"> ...

A groundbreaking algorithm engineered to launch a sequence of distinct hyperlinks upon each button press

I have a unique script that allows me to open links randomly, but now I want to create a new script that opens links sequentially and goes back to the initial one. For example, clicking a button will open link1, then clicking it again will open link2, an ...

Jquery: Understanding the impact of sending multiple ajax requests to a single URL

Today, I encountered some unexpected behavior and I wanted to confirm if this is normal for jQuery or if I'm simply overlooking something... I wrote a function that makes an AJAX call and performs an action on the promise.done(). Below is a simplifie ...

Is there a way to automatically shorten a text when it goes beyond the boundaries of a div container?

How can I prevent a paragraph in one of two adjacent div containers from having a line break without changing the container's size? The surrounding div uses display: flex to position its children side by side. Currently, I've applied the followin ...

Disabled radio buttons are appearing as if they have been chosen

While working on customizing the styles of radio buttons in a form, I encountered an issue where disabled radio buttons appeared selected even though they were supposed to show as disabled. Here is the code snippet that I used: input ::-ms-clear { ...

Adjust the arc angle on the canvas

I am currently working on creating a Semi Arc using Canvas. My question is regarding changing the overall angle of the arc to match the expected image. Expected Image Below is the HTML code for the Semi arc: <canvas id="myCanvas" width="578" height=" ...

Switch back and forth between words using a simulated typewriter effect in JavaScript

My current project involves writing code that will display text in a typewriter style. The code should be able to print a string, erase the last word, and type out words from an array in sequence. Each word in the array should be displayed one at a time be ...

Transforming a Bootstrap 4 dropdown navbar by replacing the caret with Fontawesome 5 icons for Plus and Minus

After spending several days trying to find a solution, I am still struggling. I have managed to create a responsive Navbar with Dropdowns using Bootstrap 4. Now, my goal is to replace the caret with a Plus and Minus sign at the end of each row on small dev ...