Adjust the Width of the <div> Element

In my testing test.aspx page, there is a <div class="outerdiv1"> containing an <asp:Repeater/> that generates additional Divs inside outerDiv1.

<div class="outerDiv1">
   <asp:Repeater ID="Repeater1" runat="server">
     <ItemTemplate>
       <div class='<%# (Eval("Walkable").ToString() == "1") ? "isWalkable" : "isWall" %>' runat="server" id="Wall">
       </div>
     </ItemTemplate>
   </asp:Repeater>
</div>

The CSS for outerDiv1 is as follows:

.outerDiv1
{
   max-width:0px;
   overflow:auto;
   overflow: auto;           
}

Currently, the default max-width is set to 0px. I have the width of outerdiv1 stored in the Database. Is it possible to dynamically set the max-width in the CSS of outerDiv1 using the value from the Database? Can this be achieved with jQuery considering the backend code is in c#?

Answer №1

The value must be retrieved from the database and inserted into the style attribute of the outerDiv1.

Answer №2

To apply inline styles, as previously mentioned in a comment, you can edit the 'outerdiv1' div to have the runat=server attribute along with the style attribute.

You can implement it like this:

<div class="outerdiv1" runat="server" style="max-width: <%=CustomValue%>;"/>

Where CustomValue is a public property that contains the max-width data retrieved from your database.

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

Using AngularJS in conjunction with jQuery Flot to load data using http.get from the controller

I have implemented a custom directive to manage the loading of a jQuery Flot chart in AngularJS: var Dashboard = angular.module('StatsDashboard', []); Dashboard.directive('chart', function() { return { restrict: 'E&ap ...

What is the best way to implement style guidelines that are associated with a model in AngularJS?

In the process of creating an application where 1-5 views along with the corresponding model and controller are sent to the client upon page load. The user navigates through each view in sequence using routing, which is functioning correctly. However, I a ...

What is the best way to customize the small square area found between the vertical and horizontal scrollbars?

Please take a look at the images provided below: https://i.stack.imgur.com/QVHfh.jpghttps://i.stack.imgur.com/cubd8.jpg Whenever both vertical and horizontal scrollbars intersect, it results in a square space. This phenomenon occurs not just within the b ...

Tips for modifying text by filtering it and substituting it with alternative content

I have a website's contact page where there is a phone number and I want to create a code that can identify this specific phone number and replace it with a new one. Below is the code snippet: <div class="elementor-widget-container"> < ...

Enhance your HTML code using JavaScript (specifically jQuery)

Is there a way for me to transform the following code into a more visually appealing format? <td> <a href="/Test/Page/2">Previous</a> <a href="/Test/Page/1">1</a> <a href="/Test/Page/2">2</a> 3 ...

What is the reason that I am unable to derive from more than one class at a time

What influenced the design of C# in this manner, and what drawbacks come with the ability to inherit from an infinite number of classes? (I understand interfaces can handle many situations) ...

utilize jquery to submit numerous forms using ajax

If I have 3 forms, each with its own submit button: <form name="form1"> <input name="input"></input> <submit></submit> </form> <form name="form2"> <input name="input"></input> <submit></submi ...

Issues arise when attempting to retrieve JSON data through an Ajax GET call. Specifically, an "Undefined" error occurs for all records in the JSON object

Here is the client side code snippet I am working with: $.ajax({ url: 'http://localhost/App.WebAPI/api/Messages/AppName', type: 'GET', dataType: 'json', crossDom ...

Ensuring the legitimacy of Rails form submissions

I am encountering an issue with validating a form before submitting it, as the form is being submitted without triggering the jQuery part. <%= form_for(:session,class:"form-signin form-horizontal",:id=> "form",:role=> "form") do |f| %> & ...

Achieving fixed width and automatic height for images in Next JS: a guide

I am struggling to showcase a list of images with a fixed width while utilizing the original image height set at 100%. A similar inquiry can be found here, yet it remains unanswered. I have gone through the responses shared here and attempted them. The im ...

Error alert: $.simpleWeather function not found

Currently, I am attempting to incorporate simpleWeather.js from the website simpleweatherjs.com into my own website. However, upon inserting the html code onto my website, an error message pops up: Uncaught TypeError: $.simpleWeather is not a function ...

WCF 3.5 - Deletion of SVC Extension: An Exceptional Scenario

I am dealing with multiple RESTful endpoints structured like this: System.Security.Role.svc System.Security.User.svc etc. The intention behind this setup is to create a namespace pattern for our RESTful URL's, which would appear as follows: /rest/{ ...

The expression "routerlink" in Angular 9 is not recognized,

Currently, I am in the process of developing an Angular 9 application and have encountered two challenging issues. Firstly, as I navigate through the routes using the navbar, I notice an error message in the console stating "Syntax error, unrecognized exp ...

Exploring the concepts of displaying and concealing elements using jQuery

Is there a way to toggle the visibility of a div and adjust the width of another div using a single link? For example, how can I show a div and change its width with one click, and then revert back to the original settings with a second click? $("a").cli ...

Implementing the change method in Angular2 and JavaScript

Within my application, I have implemented two select elements. The objective is that when one select element is altered, the other will automatically change as well. Furthermore, I need to be able to detect the event when the second select element is modif ...

What is the importance of setting height: 0 when flex-basis: 0 is already defined in CSS3 flexbox?

I am currently working on creating a content reader with a fixed size and title that remains visible while scrolling. I attempted to achieve this using CSS3 flexbox with the following structure: .flex { display: flex; flex-direction: column; ...

Incorporate jQuery Tabs into every individual function for enhanced functionality

Is it possible to have multiple tab functions on the same page using a script for creating tabs easily? I've tried using an each.function to wrap the tabs, but I haven't been successful. The tab changes simultaneously on all rows. For reference, ...

Executing a Jquery function following a retrieval operation

While browsing through the jQuery documentation, I stumbled upon this interesting example: $( "h1" ).html().addClass( "test" ); I'm curious why this code doesn't seem to work. How exactly do getters and setters function in jQuery? EDIT If ...

"Creating Stylish Angular HTML Previews with Customized CSS

I am currently in the process of developing an application using AngularJS that includes a feature to display an HTML preview directly after the user has written the HTML in a textarea. However, I am facing a challenge on how to isolate the CSS for the HTM ...

What is the best way to disable the button hover effect after it has been clicked?

Many posts I've come across have similar issues to mine, but the suggested solutions are not working for me. I am struggling to remove the hover property of my button when it is clicked before triggering the removal event I have set up. Edit: Just t ...