Any ideas on how to present data in a card layout with two columns?

      .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
    
    }
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    .container {
      padding: 2px 16px;
    }
    .card {
      width: 50%;
      height: 50%;
    
    }
    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <div><input type="text" id = "1" name="dataKey" placeholder="Enter id you want to search" required>
      <button type="submit" value="Submit" onclick= goodfunction()>Submit</button></div>
<p></p>
        <div class="card">
        <div class="container" id="101">
          <h4><b>PRODUCTID</b></h4>
          <p>IT WILL DISPLAY THE PRODUCTID </P>
          <h4><b>TERRITORY</b></h4>
          <p1>IT WILL DISPLAY THE TERRITORY</p1>
          <h4><b>LANGUAGE</b></h4>
          <p2>IT WILL DISPLAY THE LANGUAGE OF MOVIE</p2>
          <h4><b>STARTDATE</b></h4>
          <p3>IT WILL DISPLAY THE STARTDATE</p3>
          <h4><b>ENDDATE</b></h4>
          <p4>IT WILL DISPLAY THE END DATE</p4>
          <h4><b>EXCLUSIVITY</b></h4>
          <p5>IT WILL SHOW THE EXCLUSIVITY</p5>
          <h4><b>ACQUIRING DIVISION</b></h4>
          <p6>IT WILL DISPLAY THE ACQUIRING DIVISION</p6>
          <h4><b>PRODUCT TITLE</b></h4>
          <p7>IT WILL DISPLAY THE PRODUCT TITLE</p7>
          <h4><b>MEDIA</b></h4>
          <p8>IT WILL DISPLAY THE MEDIA RIGHTS</p8>
          <h4><b>FORMAT</b></h4>
          <p9>IT WILL DISPLAY THE FORMAT</p9>
          <h4><b>OWNER</b></h4>
          <p10>IT WILL DISPLAY THE OWNER OF THE MOVIE</p10>
    
        </div>

I have designed a card for displaying data in two columns, but I am facing issues with dividing it properly to avoid scrolling.

Despite using various methods for division, the desired result has not been achieved, and I require assistance with this task.

Your help is greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

.container {
  width: 100%;
}

.row {
  display: flex;
  justify-content: center;
  text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <style>
    .card {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
      transition: 0.3s;
    }
    
    .card:hover {
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    }
    
    .container {
      padding: 2px 16px;
    }
  </style>
</head>

<body>
  <div><input type="text" id="1" name="dataKey" placeholder="Enter id you want to serch" required>
    <button type="submit" value="Submit" onclick=g oodfunction()>Submit</button></div>



  <p></p>
  </div>
  </div>
  <div class="card">
    <div class="container" id="101">
      <div class="row">
        <div>
          <h4><b>PRODUCTID</b></h4>
          <p>IT WILL DISPLAY THE PRODUCTID </P>
          <h4><b>TERRITORY</b></h4>
          <p>IT WILL DISPLAY THE TERRITORY</p>
          <h4><b>LANGUAGE</b></h4>
          <p>IT WILL DISPLAY THE LANGUAGE OF MOVIE</p>
          <h4><b>STARTDATE</b></h4>
          <p>IT WILL DISPLAY THE STARTDATE</p>
          <h4><b>ENDDATE</b></h4>
          <p>IT WILL DISPLAY THE END DATE</p>
          <h4><b>EXCLUSIVITY</b></h4>
          <p>IT WILL SHOW THE EXCLUSIVITY</p>
        </div>
        <div>

          <h4><b>ACQUIRING DIVISION</b></h4>
          <p>IT WILL DISPLAY THE ACQUIRING DIVISION</p>
          <h4><b>PRODUCT TITLE</b></h4>
          <p>IT WILL DISPLAY THE PRODUCT TITLE</p>
          <h4><b>MEDIA</b></h4>
          <p>IT WILL DISPLAY THE MEDIA RIGHTS</p>
          <h4><b>FORMAT</b></h4>
          <p>IT WILL DISPLAY THE FORMAT</p>
          <h4><b>OWNER</b></h4>
          <p>IT WILL DISPLAY THE OENER OF THE MPVIE</p>
        </div>
      </div>


      
    </div>

Answer №2

Try using the flex property to style your code and create two columns within a div:

Click here for an example

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <div><input type="text" id = "1" name="dataKey" placeholder="Enter id you want to search" required>
  <button type="submit" value="Submit" onclick= goodfunction()>Submit</button></div>



    <p></p>
  </div>
  </div>
  <style>
  .card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;

}
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
}
.container {
  padding: 2px 16px;
}
.card {
  width: 100%;
  height: 50%;

}
.container {
  display: flex;
    flex-direction: column;
    column-count: 2;
    flex-wrap: wrap;
    height: 510px;
}
h4 {
  margin-right:15px;
}
p,p1,p2,p3,p5,p6 {
  max-width:50%;
}


  </style>
  </head>
  <body>
    <div class="card">
    <div class="container" id="101">
      <h4><b>PRODUCTID</b></h4>
      <p>IT WILL DISPLAY THE PRODUCTID </P>
      <h4><b>TERRITORY</b></h4>
      <p1>IT WILL DISPLAY THE TERRITORY</p1>
      <h4><b>LANGUAGE</b></h4>
      <p2>IT WILL DISPLAY THE LANGUAGE OF MOVIE</p2>
      <h4><b>STARTDATE</b></h4>
      <p3>IT WILL DISPLAY THE STARTDATE</p3>
      <h4><b>ENDDATE</b></h4>
      <p4>IT WILL DISPLAY THE END DATE</p4>
      <h4><b>EXCLUSIVITY</b></h4>
      <p5>IT WILL SHOW THE EXCLUSIVITY</p5>
      <h4><b>ACQUIRING DIVISION</b></h4>
      <p6>IT WILL DISPLAY THE ACQUIRING DIVISION</p6>
      <h4><b>PRODUCT TITLE</b></h4>
      <p7>IT WILL DISPLAY THE PRODUCT TITLE</p7>
      <h4><b>MEDIA</b></h4>
      <p8>IT WILL DISPLAY THE MEDIA RIGHTS</p8>
      <h4><b>FORMAT</b></h4>
      <p9>IT WILL DISPLAY THE FORMAT</p9>
      <h4><b>OWNER</b></h4>
      <p10>IT WILL DISPLAY THE OWNER OF THE MOVIE</p10>

    </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

Nested floating elements

Consider the layout below <div style='float: left;'>Outer Div </div> <div style='float: left;'> <div style='float: left;'>Inner Div </div> <div style='float: left;'>Inne ...

htmlcss

Enhance your Vue PWA by utilizing ServiceWorker to efficiently cache remote media assets fetched from an array of URLs

In my PWA development project, I am looking to provide users with the option to download and cache all media assets used in the application. However, the default behavior of PWAs only caches assets when they are requested during app navigation. My goal is ...

javascriptvue.jscachingservice-workerprogressive-web-apps

What is the best way to send a JavaScript array to a Perl script using AJAX?

Is it possible to convert a JavaScript array passed via AJAX into a Perl array? Accessing in Perl: @searchType = $cgi->param('searchType'); print @searchType[0]; Result: employee,admin,users,accounts It appears that the first value in the ...

javascriptajaxarraysperl

Styling HTML elements with CSS to create a full width underline effect

Is there a way to make the underlines/borders full width for each line in a paragraph without adding line breaks? I'm seeking suggestions on how to achieve this. Two potential solutions I've considered are using the tag or creating an image, ...

javascripthtmlcss

What causes AJAX to return the newest variable from a loop in an HTML template?

Below is the HTML file I am working with: <div id="preview_updated_notifications"> {% for lst in unread_list %} <div > <span data-notification-item="{{ lst.id }}" id="_mark_as_read_id" ...

htmljquerydjangoajax

Error: Cannot access the length property of an undefined value in the JEST test

I'm currently working on incorporating jest tests into my project, but I encountered an error when running the test. The issue seems to be related to a missing length method in the code that I am attempting to test. It appears to be originating from s ...

javascriptreactjsjestjsstyled-components

Content in Tab Fails to Load due to IFRAME URL

On my web page, I have embedded an IFRAME with its src attribute set to load HTTPS content. This IFRAME is placed within a Bootstrap Nav-Tab Content, which in turn is located inside a Card element. Upon loading the webpage, I noticed that the content does ...

htmliframebootstrap-4

Verify if the second list item contains the "current" class

When displaying a list of blog items on the blog page, I am using grid-column: 1 / -2;. In the first row, the first blog item spans two columns while the second and subsequent rows display three items in each row. This setup works well, but when moving to ...

htmljquerycss

Could anyone clarify the concept of how a function is able to be equivalent to zero?

function checkForSpecialCharacters(text) { var specialChars = [";", "!", ".", "?", ",", "-"]; for(var i = 0; i < specialChars.length; i++) { if(text.indexOf(specialChars[i]) !== -1) { return true; } } ...

javascript

Setting a false condition on jQuery's .on('canplaythrough') event

Struggling to implement a custom audio control with jQuery, but encountering some issues. I'm in the process of converting native JavaScript to jQuery for consistency in my code, however, I can't seem to get it working. The original code that is ...

javascriptjqueryaudio

Executing an external function on an element as soon as it is created in AngularJS: tips and tricks

I am looking to implement a function from an external library that will be executed on each item as it is created in AngularJS. How can I achieve this? Here is the code snippet of my application. var app = angular.module('app', []); app.contr ...

javascriptangularjs

Angular/JS encountered a premature end of program unexpectedly

I am taking my first steps in the world of web development with Angular (and JavaScript in general). I have been trying to rewrite some basic and common examples using Angular. One thing I attempted was to display a simple message using data binding. This ...

javascriptangularjs

Executing Cascading Style Sheets (CSS) within JQuery/Javascript

I've been encountering a problem with my website. I have implemented grayscale filters on four different images using CSS by creating an .svg file. Now, I'm looking to disable the grayscale filter and show the original colors whenever a user clic ...

javascriptjquerycss

The TypeORM connection named "default" could not be located during the creation of the connection in a Jest globalSetup environment

I've encountered a similar issue as the one discussed in #5164 and also in this thread. Here is a sample of working test code: // AccountResolver.test.ts describe('Account entity', () => { it('add account', async () => { ...

javascripttypescriptjestjstypeormts-jest

Leveraging JavaScript promises to execute a function only once

var dataFetch= $q.defer(); function fetchData(){ return dataFetch.promise; } (function getData(){ setTimeOut( function(){ myPromise.resolve("data"); } ,1000); })(); fetchData().then(function(){alert("use ...

javascriptangularjspromiseecmascript-6

Associate JSON sub-string with corresponding main parent

I am working with a JSON string that is generated from an API. [{"categories":{"category":{"id":"1","Name":"fruit"}}},{"categories":{"category":{"id":"2","Name":"veg"}}},{"products":{"product":{"id":"1","Name":"fruit"}}},{"products":{"product":{"id":"2"," ...

javascriptarraysjsonobject

Rails - What's causing HAML to display the complete hash?

Check out this code snippet: !!! %html %head %title= full_title(yield(:title)) =stylesheet_link_tag "application", media: "all" =javascript_include_tag "application" =csrf_meta_tags =render 'layouts/shim' %body =re ...

htmlrubyruby-on-rails-3haml

Opening external stylesheets in a separate window

Objective: Create a new window, add elements to it, and then apply CSS styles to the elements in the new window using an external style sheet. Issue: While I am able to add elements to the new window and link it to an external style sheet in the head sect ...

javascriptjqueryhtmlcss

Clicking on a marker in Google Maps will display the address

I have a map that contains several markers, each designated by their latitude and longitude coordinates. I would like to be able to see the address associated with each marker when I click on it. However, I am currently experiencing an issue where nothing ...

javascripthtmlgoogle-mapsmapsreverse-geocoding

jQuery DatePicker Not Displaying Calendar

I've been attempting to implement a date picker in jQuery. I've included the necessary code within the head tag: <link rel="stylesheet" type="text/css" media="screen" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jqu ...

javascriptjquerydatepicker