Are you up for a good challenge?
In my MVC project, I have a dynamic list of divs that I want to split into two columns.
The number of divs in the list is unknown.
How would you go about achieving this task?
EDIT: Just to clarify, when I say split, I'm referring to splitting from a UI perspective only.
Sincerely, Malcolm
If you're okay with the columns being read left to right, one simple method is to showcase the child divs as inline-block elements.
(P.S. The 49% mentioned accounts for borders and other factors; there might be a more optimal solution)
.child {
width: 49%;
display: inline-block;
}<div id="parent">
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
<div class="child">some content</div>
</div>To style the inner DIV, you can utilize float='Left'
Utilize the inline-block display property for your child element and set the width:50%;
Important: Ensure that the parent div has a font-size of 0 to eliminate space between the inline-block elements.
#parent{
font-size: 0;
}
.child{
font-size: 16px;
display: inline-block;
width:50%;
}
My current project involves developing an internal business application that requires tracking the time spent by users on a specific task. While users may access additional pages or documents for information while filling out a form, accurately monitoring ...
My current setup includes a jquery menu with sub menus within a jquery dialog. You can see it in action here: http://jsfiddle.net/pnmpn25/VPXjs/17/ $("#menu").menu(); $("#dlg").dialog(); The issue I'm facing is that when I open a sub menu, it gets ...
I'm currently customizing the checkbox color in Material UI while using FormIk for data submission. I aim to change the default checkbox color to red, but I'm unsure about how to achieve this. <FormGroup> <Box display=" ...
I've been working on creating an HTML multiple select form element with Vue.js and encountered an interesting issue. Everything was functioning perfectly following the guidance provided in this resource. However, when I decided to incorporate the Mate ...
After downloading a new font and setting font-variant: small-caps;, I noticed that my numbers appear much larger than the letters. Is there a way to apply small caps only to the letters, not the numbers? While traditionally numbers do not have a capital ...
I have an Iframe editor and I am trying to change some CSS inside the editor. However, when I attempt to apply the CSS, it does not affect the styles within the Iframe. <div id="editor" style="flex: 1 1 0%;"> <iframe src="https://editor.unlay ...
Currently employing js DataTable, I aim to establish a default height for the table and row. My current approach is as follows: $(document).ready(function() { var table = $('#example').DataTable ({ iDisplayLength: 15, "bLen ...
I have a button centered on my page, but the CSS filter I applied to the HTML tag is also affecting the button. How can I prevent this from happening? HTML <body> <div class="button"> <a href="#">START EXPERIENCE</a> ...
Is there a way to dynamically change the image based on different cultures in my ASP.NET webpage? I have successfully been able to switch strings using a resource file, but I am unsure how to handle images. Currently, I have an A tag with a specific clas ...
Hey everyone, I'm sure we've all encountered this issue before and can agree that it's pretty annoying. Does anyone have a solution for removing the white space from select boxes? <select> <option> testing </option& ...
Let's say I have multiple order IDs $order_id='12345566778'; $prod_id='126778899'; $sell_id='373462562363'; When I select a particular order ID, I want to pass it to a PHP variable located in the modal body of a popup. ...
I've implemented a custom walker in my Wordpress site: class Custom_Walker_Nav_Menu extends Walker_Nav_Menu { function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) { if ( $depth ) $indent = str_repeat("& ...
I am facing challenges with obtaining the cursor caret position within a contenteditable div. Currently, I am utilizing the following function : onBlurArea (field, ev) { ev.preventDefault() const editable = ev.target.childNodes[1].childNodes[2] ...
Recently, I started using .net and encountered an issue where I'm attempting to transfer data from a .html file to the controller using AJAX. Here is my ajax call: var dataValue = { ID: 10, Name: 'Test' }; ...
When transitioning between states in an AngularJS application, I utilize CSS animations to add visual appeal to the view change. This may involve applying fades or transforms using classes like .ng-enter and .ng-leave. In iOS 7+, users can swipe their fin ...
For my current project, I have incorporated dotdotdot.js to handle text truncation. However, after integrating a rich-text editor (tinymce), some HTML elements like p, a, b, i, etc., have been added to the text. Unfortunately, dotdotdot is now not behaving ...
Is it possible to have one dropdown automatically change its value based on the selection made in another dropdown? For instance, if 'Value 1' is chosen from 'dropdown 1', can we set 'dropdown 2' to automatically display the ...
One of the features on my website is a small modal that smoothly slides in from the top of the page upon entering, and then slides back out again when clicked on. However, I am encountering an issue where I do not want the modal to completely disappear aft ...
I have a couple of queries that revolve around the same concept: If I want to insert a new 'row' in MongoDB, can I do so by specifying the order of the fields? For instance, if my collection looks like items = { { name: "John", age: "28" ...
Recently, I've noticed a strange behavior in Internet Explorer 9-11 and Edge (Spartan). In all browsers except for IE, my example displays as desired: However, in Internet Explorer, it looks different: I used to encounter this issue on multiple bro ...