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

Unable to assign to 'disabled' as it is not recognized as a valid attribute for 'app-button'

What is the method to dynamically modify the value of location.href using vanilla javascript?

Managing a new browser window using Selenium

Leveraging Excel VBA to manipulate the selection in a dropdown menu on a webpage

Sketch a straight path starting from the coordinates x,y at a specified angle and length

Tips for aligning hyperlinks in the navigation bar using CSS3 and HTML5

Could you explain the distinction between Node.bind() and Template Binding?

Is there a way to mimic this type of scrolling effect?

CSS3 alternative to width:calc(100% - 10px)

Is it possible to utilize a hyphen in the link_to attribute?

CSS Hover Effects on Navigation Bar Not Displaying as Expected

Leveraging CSS classes for enhancing the bootstrap grid system

css boxShadow merger

Is it possible to create a custom tag in HTML 4?

Incorporating Material-UI themes within styled components

Automatically updating quantity with the power of jQuery

What is the best way to display content at a specific time using Angular?

Developing SAPUI5: Construct a GenericTile featuring a centrally positioned icon

Select a specific element to apply a CSS selector for a button

Is it possible to establish the page state upon loading (in the context of a GET request