Tips for presenting a label and its value on separate lines while also displaying additional nested label-value pairs:

I have a specific request in mind,

https://i.sstatic.net/aK5nG.png

But the result I am seeing is different,

https://i.sstatic.net/ajvhF.png

Here's the code snippet, I'm utilizing bulma framework but encountering some challenges...

<section class="section">
  <p>Please verify the details below as per the specified requirements, no room for error</p>
  <div class="container">
    <div class="columns">

      <div class="column is-3 has-text-right has-text-weight-bold">
        Short Label 1:
      </div>
      <div class="column is-2">
        <div class="field">
          <p class="control">
            Short Label 1 Value
          </p>
        </div>
      </div>

      <div class="column is-2 has-text-right has-text-weight-bold">
        Short Label 2:
      </div>
      <div class="column is-2">
        <div class="field">
          <p class="control">
            long value long value long value long value long value long value long value 
          </p>
        </div>
      </div>

      <div class="column is-2 has-text-right has-text-weight-bold">
        Bit Long Label Than Usual 3:
      </div>
      <div class="column is-2">
        <div class="field">
          <p class="control">
            long value long value
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
htmlcssbulma

Answer №1

It appears that you will need to include the following:

<div class="column ...">
    ...
</div>

within rows

 <div class='rows'>
      <div class='row is-full'> column 1 | column 2 </div>
      <div class='row is-full'> column 1 | column 2 </div>
    </div>

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

Use JavaScript to convert only the initial letter to uppercase

Once again, I am in the process of learning! Apologies for the simple questions, but learning is key... Attempting to implement a trick I found online to change all letters to uppercase, I am now trying to adjust it to only capitalize the first letters. T ...

javascripthtmlcss

Ways to extract a specific line of text from HTML code

Can someone help me extract a specific line from an HTML code using Python? For instance, in this website: The snippet of code is as follows: var episodes = [[8,54514],[7,54485],[6,54456],[5,54430],[4,54400],[3,54367],[2,54327],[1,54271]]; I am lookin ...

pythonhtmlweb

Merge two methods to create proportional buttons that function flawlessly on Mac Firefox

code I am facing an issue with the buttons in my code. While they work fine on Mac Firefox, they are not proportional. I made modifications to make them proportional as desired, but now they are not working on Mac Firefox. Since I have multiple pages wit ...

cssbootstrap-4

Manipulate the contents of children divs within a parent div using JavaScript or JQuery

<div id="abc"> <div id="a_b"> abcd </div> <div id="c_d"> xyz </div> </div> I have a challenge where the divs on my page are generated dynamically and their IDs change every time the page loads. When the window i ...

javascriptjqueryhtmlcss

Incorporate a local asciinema file into an HTML document

Is there a way to embed a local asciinema session into an html file? Here is how my directory is structured: $ tree . ├── asciinema │ └── demo.cast ├── css │ └── asciinema-player.css ├── index.html ├── js │ ...

javascripthtmlcssasciinema

The footer is being obscured by the sidebar

#contents { width: 1100px; margin-left: auto; margin-right: auto; } #sidebar { padding: 10px; position: sticky; top: 20px; left: 10px; width: 150px; border-right: 1px solid black; float: left; } #main { padding: 15px; margin-left: ...

htmlcss

Update the icon using CSS style properties

I have been using liqour-tree and I need to change the arrow icon to a custom one. Unfortunately, I am not sure how to do this. Can someone please help me out? I have identified the element tag where the icon is placed. <i class="tree-arrow expanded ha ...

cssvue.jstreevue-component

What is the best way to choose every single element on the webpage excluding a specific element along with all of its children?

Is there a way to hide all content on a page except for a specific element and its children using CSS? I've been exploring the :not selector, but I'm struggling to make it work with the * selector. :not(.list-app) { display: none; } :not(. ...

css

Is it possible to apply the same styling to multiple elements simultaneously in jQuery by grouping them as in CSS?

Keeping code neat is essential. In CSS, elements can be grouped like this: .element1, .element2, .element3, .element4, .element5, .element6 { font-weight:bold; } I am curious if there is a similar method in jQuery or if each element needs to be set indi ...

jquerycssreadability

Switching between div elements in ReactJS

I am currently working on a web application built with ReactJS. One feature that I would like to include is similar to the following: My query is as follows: What is this specific effect called? How can I go about implementing it? I am not looking for ...

cssreactjs

Is there a way to place my searchbox in the top right corner of the page?

I am currently working on creating a search function for my list of products. However, I have encountered an issue where the searchBox is not appearing in the top right corner as intended. Despite trying various solutions, I have been unsuccessful in movin ...

javascriptcssreactjs

Real-time Email Validation: Instant feedback on email validity, shown at random intervals and does not persist

I am attempting to show the email entered in the email input field in a validation message. The input field also checks my database for registered emails and displays a message based on the outcome. I then included this code from a source. What happens is ...

phpjqueryhtml

JavaScript can be utilized to monitor outbound clicks effectively

I am currently working on implementing the code found at this link: Make a ping to a url without redirecting. The original poster is looking to ping a URL without opening multiple windows. My goal is to achieve the same functionality, but I also want to vi ...

javascriptphphtmlajaxhttp-redirect

Utilize JavaScript to randomly choose images as background tiles in HTML

Currently, I am in the process of developing a game using HTML/CSS/JavaScript. My background is currently set to a single image (100px / 100px) being repeated vertically and horizontally to tile across the entire page body; CSS: body { background-ima ...

javascripthtmlcssimagebackground-image

Toggle the menu using jQuery on unordered list items

Below is the HTML code I am using : <ul class="main-block"> <li class="firstLevel"> <a href="#category">EXAMPLE CATEGORY 1</a> <ul class="dijete"> <li class="child"> <a href="some-sub-categ ...

javascriptjqueryhtmlcss

Please refrain from initiating the next action until the previous action has been completed

As a beginner, I am currently working on a photo viewer project using JavaScript and jQuery. My main issue arises when clicking on the arrow to view the next picture. I want the current picture to fade out smoothly before the new one fades in. However, th ...

javascriptjqueryhtmlcsscallback

What's the best way to trigger an event within a tag in a Vue.js component?

app.js Vue.component("popup",{ template : /*html*/` <div class="popup is-active" > <div class="popup-background"></div> <div class="popup-card"> <header class=" ...

javascripthtmlvue.jsvuejs2

Establishing a class for wp_nav_menu

Is there a way to transform the following code: <ul class="ulStyle"> <li class="liStyle"> <div class="first"> <div class="second"> menu1 </div> </div> </li> </ul> into wp_nav_menu? I'm struggling with ...

phpcsswordpressnavigationhtml-lists

Populate a secondary dropdown menu using the selection from a primary dropdown menu and retrieve the corresponding "value" instead of displaying the value as a dropdown option

I am attempting to create two dropdowns that are populated by another dropdown. Below is the code: HTML: <form type=get action="action.php"> <select name="meal" id="meal" onChange="changecat(this.value);"> <option value="" disabled select ...

javascriptarraysjsonhtml

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

javascripthtml