I have set up the following code to retrieve and display items from a database:
<!-- HTML code -->
<%
// Additional Java code
while(rs.next())
{
%>
<p><%=rs.getString("item")%></p>
<%
}
// Additional Java code
%>
<!-- HTML code -->
I am looking to format the output similar to the image provided, where after 5 rows, the item names move to the next column. Any suggestions on how to achieve this?
To control the number of lines, you can specify a numerical value for height: line-height * numbersOfLineWanted + padding/margin applied to tags (considering box-sizing).
If you want to establish a specific column width, set a value for column-width and apply the same value to the element's width.
ul {
width:100px;
-moz-column-width:100px;
-webkit-column-width:100px;
column-width:100px;
height:6.5em;
}
/* demo show */
ul {
border-left:solid;
padding:0;
counter-reset:lis;
}
li {
display:block;
}
li:after {
counter-increment:lis;
content:' ' counter(lis);
}<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>Alternatively, you can utilize the flex display:
ul {
display:flex;
flex-direction:column;
flex-wrap:wrap;
height:6.5em;
width:0;
}
/* demo show */
ul {
border-left:solid;
padding:0;
counter-reset:lis;
}
li {
display:block;
width:100px;
}
li:after {
counter-increment:lis;
content:' ' counter(lis);
}<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>While researching browser compatibility for the gap property, I came across this informative page: https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap. The page includes examples for both Flex and Grid Layouts, leading me to assume it would only work ...
Custom CSS Styles for Menu Bar * { margin: 0; padding: 0; } body { background: white; font-family: 'Helvetica Neue', Helvetica; font-weight: 400; font-size: 1.05em; line-height: 1.6rem; color: white; font-size ...
Is there a way to eliminate the odd white space between two nested divs in Chrome? <div class="bar"> <div class="progress"> </div> </div> .bar { width: 200px; height: 6px; border: 1px solid black; ...
My goal is to create top and bottom shadows for a parent container when scrolling through the content. This effect works perfectly everywhere except on Chrome browser with retina screens, where it behaves strangely. The background becomes stuck at the top, ...
My goal is to have sidebar elements align with specific id tags in the main content, rather than just stacking up one after another. I want the sidebar elements to align with certain id tags mentioned in the main post content. The image at shows the basic ...
Utilizing the bootstrap5 variant-button mixin, I aim to create a custom-colored button. While I have successfully altered the default hover effect color, I am encountering difficulty in setting the background color of the button itself. Upon inspecting the ...
When working in both Chrome and Firefox, everything goes smoothly until the moment I try to extract text. At that point, an error is triggered: h3 = next(element for element in h3s if element.is_displayed()) StopIteration I attempted to address this issu ...
I'm currently working on incorporating a menu item with a login form inside it. The functionality is there, but the width of the form is way too small. I've been searching through the documentation for a solution, but haven't come across any ...
Having trouble aligning my image without affecting its position. When the wind text is hidden (JavaScript not functioning in CodePen), meaning it is not displayed below the temperature, the weather image shifts upwards. I attempted to use 'absolute&ap ...
I have a div with a background image of a world map that I need to clip at two precise points. Clipping from the left side is straightforward. In my CSS: .le-map { background-image: url('../img/le-map-of-le-world.mlg'); background-size: 100% ...
I find myself in a dilemma. I need to create a div content with a scrollbar that looks similar to the design shown in an image. After researching, I only came across one solution that seems suitable: jQuery custom content scroller. However, it appears to ...
The V-tab below generates the button known as the right one on the v-app-bar: https://i.stack.imgur.com/DzNmq.png <v-tab :to="'/demo'" active-class="text--primary" class=&quo ...
My textarea's height is supposed to be 500%, but it's not changing. I suspect that being inside a table might have something to do with the issue, but I'm unsure of what needs to be adjusted to set the height correctly. Surprisingly, the wid ...
I need the Button element to always take up 100% of the container, no matter how many elements are inside. Check out my Fiddle link here: Js Fiddle Link <div class="inputFieldBoolean buttonSeries" data-type="Boolean"><button class="true" data-va ...
I am struggling to change the logo and menu item colors in Woocommerce without success. The rest of my website uses the standard navigation, but I want a different logo and color scheme on all the shop-related pages. This means hiding one logo and menu col ...
I have a project in which I am creating a webpage that displays a list of flights that can be filtered by destination, origin, price, and more. To achieve this, I have categorized each flight within a div element using its specific properties as classes. F ...
I recently utilized ANTD and React to develop a customized component step style, but ran into an issue. Here is the CSS code snippet I used: /* step connector */ .ant-steps-item-title:after { border: solid rgba(65, 64, 66, 0.1) !important; } /* step * ...
I am embarking on creating a website with registration and login features without relying on any CMS, using only pure HTML/CSS and other necessary tools. My main confusion lies in how I can develop a homepage that can cater to any visitor by displaying rel ...
Looking for a way to center my brand logo within my navbar with menu items positioned around it? Preferably without the use of javascript? I've tried different methods, including adjusting the Bootstrap navbar styling, but haven't found a perfect ...
Having an issue with divs not expanding vertically when there are anchors with padding inside. The explanation isn't the clearest, so I've recreated the problem here: http://jsfiddle.net/uF6KN/3/. Essentially, I want the blue anchors to align wi ...