What is the best way to showcase labels and values in distinct columns within a view?

Question

What is the best way to showcase labels and values in distinct columns within a view?

I have set up a Drupal 7 view to showcase some user fields, opting for an unformatted list layout. However, I am unsatisfied with the current appearance.

My goal is to arrange the field labels ("Name," "Age," and "Country") and their corresponding values ("Jeroen," "19," and "Belgium") in my view within two outlined columns on the left side.

While I know how to eliminate the colons, I am unsure about how to properly separate the field labels from the values. Is there a way to achieve this?

Edit: After following Ajay's suggestion, I now have the code snippet below:

<div>
 <div class = "user-label">Name</div>
 <div class ="user-value">[field_name]</div>
</div>
<div>
 <div class = "user-label">Age</div>
 <div class ="user-value">[field_age]</div>
</div>
<div>
 <div class = "user-label">Country</div>
 <div class ="user-value">[field_country]</div>
</div>

This is the styling applied:

 .user-label{
    float:left;
    font-weight: bold;
   }

  .user-value{
    float:left;
    margin-left: 20px;
  }

Despite these adjustments, the layout is not visually appealing. How can I align the values neatly into two columns?

html css drupal-7 drupal-views multiple-columns

Answer 1

Answer №1

It seems that the suggested solutions above are no longer relevant, as they rely on outdated methods such as using floats. A more modern approach would be using CSS grid. Here's how I would implement it:

HTML:

<ul>
  <li><span>Label 1</span><span>Value 1</span></li>
  <li><span>Label 2</span><span>Value 2</span></li>
  <li><span>Label 3</span><span>Value 3</span></li>
</ul>

And CSS:

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

li {
  display: contents;
}

Answer 2

It seems that the suggested solutions above are no longer relevant, as they rely on outdated methods such as using floats. A more modern approach would be using CSS grid. Here's how I would implement it:

HTML:

<ul>
  <li><span>Label 1</span><span>Value 1</span></li>
  <li><span>Label 2</span><span>Value 2</span></li>
  <li><span>Label 3</span><span>Value 3</span></li>
</ul>

And CSS:

ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

li {
  display: contents;
}

Answer 3

Answer №2

Appreciate the new HTML layout you provided. Consider using float for this:

<!--language:css-->.user-label {
  float:left;
  clear:left;
  width:5em;/* adjust as needed, you could have another div for input too*/
}

Answer 4

Appreciate the new HTML layout you provided. Consider using float for this:

<!--language:css-->.user-label {
  float:left;
  clear:left;
  width:5em;/* adjust as needed, you could have another div for input too*/
}

Answer 5

Answer №3

1)Established a view named "Test"

2)Navigate to the field section and include a field called "Name" from the user. Beneath it, there is an option in the "Rewrite Result" section.

3)Access the "Rewrite Result" area where you will find a checkbox labeled "rewrite the output of this field". Check the box and insert the following code:

<div class= "main-user">
     <div class = "user-label">Name</div>
     <div class ="user-value">[name]</div>
 </div>

Furthermore, incorporate the style in your custom.css file of the theme

.user-label{
    float:left;
   }

  .user-value{
    float:left;
  }

Answer 6

1)Established a view named "Test"

2)Navigate to the field section and include a field called "Name" from the user. Beneath it, there is an option in the "Rewrite Result" section.

3)Access the "Rewrite Result" area where you will find a checkbox labeled "rewrite the output of this field". Check the box and insert the following code:

<div class= "main-user">
     <div class = "user-label">Name</div>
     <div class ="user-value">[name]</div>
 </div>

Furthermore, incorporate the style in your custom.css file of the theme

.user-label{
    float:left;
   }

  .user-value{
    float:left;
  }

What is the best way to showcase labels and values in distinct columns within a view?

Answer №1

Answer №2

Answer №3

Similar questions

Capture the onclick attribute with jQuery and then reapply it

displaying an item within a text field

Personalized navigation bar color while hovering in Bootstrap

The element positioned with a z-index of -1 will be placed beneath the grandparent's division

What are the steps for troubleshooting LESS in Chrome?

Please submit information that is not already filled out in the text fields

What is the proper way to address the error message regarding requestAnimationFrame exceeding the permitted time limit?

What is the set standard for the "minimum computer screen width"?

Utilizing CSS3 webkit-transitions with multiple properties on a div element along with multiple webkit-transition-delays

Is it possible for me to input a variable into the logical process of if(isset($_FILES['whatever']))?

Django template receiving incomplete data from view: missing variables

How to Detect Font Resizing in Google Web Toolkit (GWT)

Is there a way to use javascript to ensure that CSS variables stick even when overwritten by onclick events?

Can React JSX and non-JSX components be combined in a single project?

Send form data without reloading the page and connect it to a JavaScript script

The appearance of a scrollbar and displacement of elements is attributed to the presence of the <

Tips for designing a unique mosaic using flex technology

Utilizing the React.js Bootstrap grid system

Designing a dropdown menu in HTML that includes labels or helpful descriptive text to indicate different sections

How to Modify Button Backgrounds in Angular 8 after Click Events?