Ways to prevent blank class from occupying space until filled with Javascript

Question

Ways to prevent blank class from occupying space until filled with Javascript

I've been working on a checkout calculator using JavaScript, and here's how I'm inputting the data:

<p class="car-rent-class-info h6 pb-1"></p>
<p class="car-rent-pickupdropoff-info h6 pb-1"></p>
<p class="car-rent-coverage-info h6 pb-1"></p>
<p class="car-rent-age-info h6 pb-1"></p>
<p class="car-rent-dropfee-info h6 pb-1"></p>
<p class="car-rent-adddriver-info h6 pb-1"></p>
<p class="car-rent-roadside-info h6 pb-1"></p>
<p class="car-rent-afterhours-info h6 pb-1"></p>
<p class="car-rent-tax-info h6 pb-1">Tax Included</p>
<h2 class="car-rent-price-total h1 t600"></h2>

Here is my script:

carpricetotal = $( ".car-rent-price-total" );
carpricetotal.html("$"+generateBillMath(DaysBetween(start_date,end_date),dayprice, weeklyprice, monthlyprice, car_class, pickup_loc, dropoff_loc, coveragec));

The problem I'm facing is that when not all fields are filled, there can be unsightly gaps as shown in this screenshot:

https://i.stack.imgur.com/l8aRt.png

Any suggestions on how to avoid this uneven vertical spacing?

html css

Answer 1

Answer №1

The additional space could be a result of the margin set for <p> tags.

To address this issue, you can utilize the :empty CSS pseudo-selector to eliminate the margin when there is no content present. For more information, check out this resource.

.pb {
  padding-bottom: 1em;
}

.pb:empty,
p:empty {
  margin: 0 !important;
  padding: 0 !important;
}

<p></p>

<div class="pb"></div>

Hello

Answer 2

The additional space could be a result of the margin set for <p> tags.

To address this issue, you can utilize the :empty CSS pseudo-selector to eliminate the margin when there is no content present. For more information, check out this resource.

.pb {
  padding-bottom: 1em;
}

.pb:empty,
p:empty {
  margin: 0 !important;
  padding: 0 !important;
}

<p></p>

<div class="pb"></div>

Hello

Answer 3

Answer №2

To hide an element in CSS, you can set the class to

display: none;

This prevents any space from being allocated for the element. When you want to display it again after adding content, you can use jQuery like this:

carpricetotal = $( ".car-rent-price-total" );
carpricetotal.html("$"+generateBillMath(DaysBetween(start_date,end_date),dayprice, weeklyprice, monthlyprice, car_class, pickup_loc, dropoff_loc, coveragec));
carpricetotal.show();

Answer 4

To hide an element in CSS, you can set the class to

display: none;

This prevents any space from being allocated for the element. When you want to display it again after adding content, you can use jQuery like this:

carpricetotal = $( ".car-rent-price-total" );
carpricetotal.html("$"+generateBillMath(DaysBetween(start_date,end_date),dayprice, weeklyprice, monthlyprice, car_class, pickup_loc, dropoff_loc, coveragec));
carpricetotal.show();

Answer 5

Answer №3

If your corresponding field isn't filled out, you might notice empty HTML elements with default block-level styles that include top and bottom margin.

To conceal these empty elements, consider adding a specific class to each one. Alternatively, if jQuery is part of your toolkit (which seems likely), you can utilize the hide function like so:

// Use this code snippet for any paragraph or header lacking input data
$( ".car-rent-price-total" ).hide()

Answer 6

If your corresponding field isn't filled out, you might notice empty HTML elements with default block-level styles that include top and bottom margin.

To conceal these empty elements, consider adding a specific class to each one. Alternatively, if jQuery is part of your toolkit (which seems likely), you can utilize the hide function like so:

// Use this code snippet for any paragraph or header lacking input data
$( ".car-rent-price-total" ).hide()

Answer 7

Answer №4

It appears that you are utilizing Bootstrap, as evidenced by the classes being used. The <p> element by default adds margin on top and bottom.

To adjust this, you can incorporate the m{side}-{size} notation, with size ranging from 0 to 5. This information can be found in the Bootstrap 4 documentation

For {side}:

t - top
b - bottom
l - left
r - right
x - top and bottom
y - left and right

For {size}:

0 - 0rem
1 - 0.25rem
2 - 0.5rem
3 - 1rem
4 - 1.5rem
5 - 3rem

You can update your code by adding mx-0 to eliminate the spacing between paragraphs like so:

<p class="car-rent-class-info h6 pb-1 mx-0"></p>
<p class="car-rent-pickupdropoff-info h6 pb-1 mx-0"></p>
<p class="car-rent-coverage-info h6 pb-1 mx-0"></p>
<p class="car-rent-age-info h6 pb-1 mx-0"></p>
<p class="car-rent-dropfee-info h6 pb-1 mx-0 "></p>
<p class="car-rent-adddriver-info h6 pb-1 mx-0"></p>
<p class="car-rent-roadside-info h6 pb-1 mx-0"></p>
<p class="car-rent-afterhours-info h6 pb-1 mx-0"></p>
<p class="car-rent-tax-info h6 pb-1 mx-0">Tax Included</p>
<h2 class="car-rent-price-total h1 t600 mx-0"></h2>

Answer 8

It appears that you are utilizing Bootstrap, as evidenced by the classes being used. The <p> element by default adds margin on top and bottom.

To adjust this, you can incorporate the m{side}-{size} notation, with size ranging from 0 to 5. This information can be found in the Bootstrap 4 documentation

For {side}:

t - top
b - bottom
l - left
r - right
x - top and bottom
y - left and right

For {size}:

0 - 0rem
1 - 0.25rem
2 - 0.5rem
3 - 1rem
4 - 1.5rem
5 - 3rem

You can update your code by adding mx-0 to eliminate the spacing between paragraphs like so:

<p class="car-rent-class-info h6 pb-1 mx-0"></p>
<p class="car-rent-pickupdropoff-info h6 pb-1 mx-0"></p>
<p class="car-rent-coverage-info h6 pb-1 mx-0"></p>
<p class="car-rent-age-info h6 pb-1 mx-0"></p>
<p class="car-rent-dropfee-info h6 pb-1 mx-0 "></p>
<p class="car-rent-adddriver-info h6 pb-1 mx-0"></p>
<p class="car-rent-roadside-info h6 pb-1 mx-0"></p>
<p class="car-rent-afterhours-info h6 pb-1 mx-0"></p>
<p class="car-rent-tax-info h6 pb-1 mx-0">Tax Included</p>
<h2 class="car-rent-price-total h1 t600 mx-0"></h2>

Ways to prevent blank class from occupying space until filled with Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Tips for incorporating a visible HTML comment in JSX code?

Modifying CSS stylesheet does not alter the background color

Creating UL tabs using just HTML and CSSHere's a step-by-step guide

Determining if the device is connected to the internet

Ensure that the browser is instructed to utilize a designated Accept field within the HTTP request

Tips for implementing a CSS loader exclusively on a particular section of your content

How can I use JavaScript to disable a table row and then save the selected option in a MySQL database?

Using the onClick function to set attributes in React JS

Incorporating HTML5 & CSS3: Leveraging various Pseudo classes and the translateX/Y properties

Step-by-step guide on building a mat-table with nested attributes as individual rows

What is the process of compiling HTML code?

having trouble with developing a dropdown menu using jquery

What is causing the CORS error with JQUERY and JQM?

What is the best way to adjust a <div> element so that it stays centered on the webpage while also keeping its size attributes intact?

error being triggered due to relative positioning

Issue with Bootstrap side navbar not collapsing when clicked on a link

Enhancing User Experience with CSS

Having trouble with the alignment of the product grid on Woocommerce with the Wootique theme?

Adding a code for divs into CSS caused the navigation bar to be completely obliterated

Tips for Implementing Multi-Level/Nested in Ajax Requests