ASP repeater exceeding container boundaries

Having trouble with my asp repeater that reads from a database and generates repeatable divs. The issue arises when the h4 spills over the div, particularly when using <%Eval. Any suggestions on how to fix this? Manual input divs don’t seem affected or overflowing.

HTML

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>" SelectCommand="SELECT [Headline], [Story], [image] FROM [News]"></asp:SqlDataSource>
<asp:Repeater ID="Repeater1" runat="server" DataSourceID="SqlDataSource1">
    <ItemTemplate>
        <div id="news">
            <div class="headline">
                <div id="spacer">
                    <h5><%#Eval("Headline") %></h5>
                </div>
            </div>

            <div id="newsFoot">
                <h4><%#Eval("Story") %></h4>
                <img src="<%#Eval("image") %>" width ="290px" />
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

Answer №1

It seems that the problem lies in your CSS, not in your code itself.

Verify that the height value for your H4 tag's CSS is set correctly.

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

The dimensions of the window - creating divs within td elements - the appearance of scroll

Here is the HTML code that I am working with: <table> <tr> <td class='tclone' id='clone'></td> <td class='loader' id='loader'> <div id='tdiv& ...

Angular JS is encountering an issue where the promise object is failing to render correctly

I'm currently learning Angular and I have a question about fetching custom errors from a promise object in Angular JS. I can't seem to display the custom error message on my HTML page. What am I missing? Below is my HTML file - <!DOCTYPE htm ...

Locating the CSS pixel value without being affected by the browser's zoom settings

Check out this JS fiddle I created to illustrate my issue. As you zoom in and out of the browser page, the value of max-width that appears in the console keeps changing. However, in the CSS code it is always set to 500px. How can I retrieve the original CS ...

Rails 5 not allow user submission of bootstrap modal form

I am facing an issue with a form inside a modal in my Rails application. When I click on the submit button, nothing happens. How can I use Ajax to submit the modal form and save its content on another page? <button type="button" class="btn btn-primary ...

Selenium Webdriver launches Firefox only to disappear moments later

My introductory WebDriver test script is not working as expected in C# using Visual Studio 2015. After launching a Firefox browser, nothing happens. I have come across several discussions online about the issue I am facing: OpenQA.Selenium.WebDriverExc ...

Displaying an error or success message upon submitting a form is currently not functioning as

I have implemented a registration/login system on my website, and currently, it shows errors and success messages at the top of the page. I want to display these messages under the form instead. However, every time I attempt to place them below the form, i ...

Unique CSS-created chronological schedule with alternating design

I am looking to customize my CSS timeline by removing the first line and changing the color of each individual circle. How can I achieve both of these modifications? I attempted to add a class called .not_complete to one of the timeline containers, but it ...

Transformation of visuals with alteration of status

I am attempting to change the image of a door from closed to open when the status changes in my home automation dashboard. I need help with this task. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu ...

Arrange JSON data in ascending order based on the dates, starting with the most recent date, by utilizing jquery

I'm in need of assistance on sorting a list of articles from an external json file based on their creation date. Can anyone provide guidance? Currently, I am fetching the data using AJAX and displaying only 6 results, but I'm facing difficulties ...

I am attempting to swap values within table cells using AngularJS. Would it be recommended to utilize ngBind or ngModel, or is there another approach that would

How can I make a table cell clickable in AngularJS to switch the contents from one cell to another, creating a basic chess game? I want to use angular.element to access the clicked elements and set the second clicked square equal to the first clicked using ...

The functionality of Selenium's get(link) feature appears to be experiencing issues

Recently, I wrote a simple piece of code using selenium to open a webpage. from time import sleep from selenium import webdriver from selenium.webdriver.chrome.options import Options from selenium.webdriver.common.by import By import warnings warnings.simp ...

Creating a perfectly centered square canvas on your screen

In the game I'm developing, I need to position a canvas at the center of the screen. The canvas should have equal width and height, covering the entire screen without overflowing, essentially creating a square shape. Is there a way to achieve this us ...

Is there a way to retrieve the HTML code of a DOM element created through JavaScript?

I am currently using java script to generate an svg object within my html document. The code looks something like this: mySvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); myPath = document.createElementNS("http://www.w3.org/2000/svg", ...

What is the best way to toggle the visibility of a progress bar for PageMethods?

As I work on developing a web application with asp.net framework 4.0, I have incorporated multiple PageMethods to ensure complete AJAX functionality without using UpdatePanel for partial postback. However, the challenge arises when I need to display a prog ...

Is there a way to set a custom background image for a specific Vaadin view?

I am developing a view in Vaadin that looks something like this... public class PosAppPickerView extends VerticalLayout implements View { Everything is functioning smoothly, but I am interested in incorporating an image as the background for the body/mai ...

Display data-content vertically using CSS

Looking for a way to display text vertically one by one with CSS? While the rotation method produces this result: https://i.stack.imgur.com/utAiN.png However, I aim to achieve something more like this: https://i.stack.imgur.com/fuVyb.png If you have an ...

Steps for adding a user-glyphicon within an img tag

In the given code, I am trying to create a function where if no photo is uploaded, a default bootstrap glyphicon-user image should be displayed. Once a photo is uploaded, it should overwrite the default image. //Please ensure necessary Bootstrap files are ...

Retrieving table information using javascript

My goal is to retrieve information from the <td> elements within the following HTML table: <table class="datadisplaytable" summary="This table lists the scheduled meeting times and assigned instructors for this class.."> <caption class="cap ...

Positioning the .aspx buttons in a coordinated manner

In my update panel, I have a label, a dropDownList, and two buttons: <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <div id="dropDownList" style="position:relative;" runat=" ...

Issues detected with Foundation Block Grid in small size setting

I created a React component to display a series of div elements on a page using the Foundation Block Grid system to control the number of divs per row. However, I am facing an issue where the number of divs does not change when switching to a small-sized s ...