CSS - Text and dropdown misalignment due to spacing issue

I'm looking to decrease the spacing between the text "Allow type of Compartment Option" and the dropdown box.

Here is the code snippet being used:

.cl-checkbox {
      padding-left: 20px;
      padding-bottom: 10px;
      padding-top: 20px;
         }

    .cl-checkbox label {
      padding-left: 25px;
      text-indent: -25px;
      padding-top: 3px;
       }

    .cl-checkbox input {
      vertical-align: bottom;
      top: -1px;
      overflow: hidden;
      margin: 10px 2px 0 0;
       }
     .form-control {
    background: #d8d8e5;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 1px solid #56565c;

/* more CSS styles for form control, form group, etc. */
}

<!-- HTML structure with form rows, checkboxes, labels, select options, etc. -->

Currently, there seems to be some excess space between the text and the dropdown box. All CSS classes are global and utilized project-wide. A new CSS class can be introduced to address this issue. Please suggest ways to minimize the gap without causing overlap, especially when the page size is reduced. Here's a link to Image 4 showing the current state.

After attempting to resolve the space issue as per @Warden330's suggestion, the row has shifted right. Image 5 shows the updated layout. View Image 5 here.

htmlcssangularformsflexbox

Answer №1

To ensure there is always space, you can include additional rules in the form-row class. Edit: A new class has been added to the first element in the row, allowing for specific behavior specification. The row now centers all elements in the middle of the screen. Comments indicate where changes have been made.

.cl-checkbox {
      padding-left: 20px;
      padding-bottom: 10px;
      padding-top: 20px;
         }
    
    .cl-checkbox label {
      padding-left: 25px;
      text-indent: -25px;
      padding-top: 3px;
       }
    
    .cl-checkbox input {
      vertical-align: bottom;
      top: -1px;
      overflow: hidden;
      margin: 10px 2px 0 0;
       }
     .form-control {
    background: #d8d8e5;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border-bottom: 1px solid #56565c;
}
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + .75rem + 2px);
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.form-group {
    margin-bottom: 1rem;
}
.form-row {
    display: flex;
    /*Shorthand for flex-direction + flex-wrap*/
    flex-flow: row wrap;
    /*horizontal positioning of elements*/
    justify-content: flex-start;
    margin-right: -5px;
    margin-left: -5px;
}
/*new class to give the first Element in your form-row some behaviour*/
.row-checkbox{
  display: flex;
  flex-flow: row nowrap;
  /*make it move all the way to the right*/
  justify-content: flex-end;
  /*You can set how much space you want between the Checkbox-Text and the dropdown here with the padding*/
  padding-right: 5px;
}
.form-row>.col, .form-row>[class*=col-] {
    padding-right: 5px;
    /*padding-left: 5px;
   Close the tag before making comments*/   
 }
<div class="form-row">
        <div class="form-group  cl-checkbox row-checkbox">
          <label for="isRequired"><input class="form-check-input position-static" type="checkbox"
              value="option1" id="value12">Allow type of Compartment Option</label>
        </div>
        <div class="form-group row-dropdown">
          <label class="cl-label">Type </label>
          <select class="form-control" formControlName="type_XID">
            <option>Select Type</option>
          </select>
        </div>
    </div>
<div class="form-row">
    <div class="form-group  cl-checkbox row-checkbox">
      <label for="isRequired"><input class="form-check-input position-static" type="checkbox"
          value="option1" id="value12">A different Checkbox</label>
    </div>
</div>
<div class="form-row">
    <div class="form-group  cl-checkbox row-checkbox">
      <label for="isRequired"><input class="form-check-input position-static" type="checkbox"
          value="option1" id="value12">Anotherdifferent Checkbox</label>
    </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

Repositioning a jQuery function from inside a plugin

I need assistance with customizing the functionality of a jQuery plugin called AjaxFileUpload. You can find the plugin here: https://github.com/davgothic/AjaxFileUpload The current behavior of the plugin is that it uploads the file as soon as it is select ...

jqueryhtmlplugins

Display an image overlay upon hovering over a div

I've developed an add-on for Elementor that includes a card with the following HTML markup: <div class="card"> <div class="header"> <img src="img.jpg"> < ...

htmlcsselementor

Angular developers may encounter a dependency conflict while attempting to install ngx-cookie

I'm currently facing an issue while attempting to add the ngx-cookie package for utilizing the CookieService in my application. Unfortunately, I am encountering some dependency conflicts that look like the following: $ npm install ngx-cookie --save np ...

angulartypescriptnpmcookiesdependencies

Nesting two ngFor loops in Angular using the async pipe leads to consistent reloading of data

In my Angular application, I am trying to retrieve a list of parent elements and then for each parent, fetch its corresponding children (1 parent to n children). Parent Child1 Child2 Parent Child1 Parent3 Child1 Child2 Child3 Initially, I succes ...

angularasynchronousrxjspipeobservable

The footer seems to be malfunctioning

Let's start with the code: CSS: *{ margin:0; padding:0; } body,html{ height:100%; } body{ background:url('../images/bg.png'); background-position:center; background-repeat:no-repeat; background-attachment:fixed; height:100%; ...

htmlcss

Angular 5 facing issue with loading external scripts dynamically

I have configured the external scripts in the .angular-cli.json file under the scripts property: ` "scripts": [ "../src/assets/plugins/jquery/jquery.min.js", "../src/assets/plugins/popper/popper.min.js", "../src/assets/plugins/jquer ...

angulardynamicangular-cliangular5external-script

Utilize CSS styling for elements persistently, even following a postback event triggered by

In my asp.net app, I have multiple hrefs with dynamic Ids that all share the same CssClass called MyClass. I am looking to hide these buttons based on a certain condition. Initially, I used the .ready function: $(document).ready(function() { if(condit ...

asp.netjquerycss

HTML5 allows users to choose data from a list using a ComboBox and submit the 3-digit code

I'm looking to enhance my form by including an input box where users can select airports, similar to the functionality on this website (). When typing in the Destination Input, I want users to see a list of possible values with detailed suggestions su ...

javascriptjqueryhtmlcomboboxautocomplete

When attempting to update to Angular Material 8 using ng update, I ended up with @angular/* version ~9.0.0-next-0. Can anyone explain why there is this

While attempting to upgrade my Angular 7 application to Angular 8 using the instructions provided here, I encountered an issue with the last step: ng update @angular/material After running this command, the Angular Material packages were successfully u ...

angularangular8angular-material-8

Share edited collection with Observer

The challenge Imagine creating an Angular service that needs to expose an Observable<number[]> to consumers: numbers: Observable<number[]>; Our requirements are: Receive the latest value upon subscription Receive the entire array every tim ...

javascriptangulartypescriptrxjsreactive-programming

React and Mui are experiencing a peculiar issue where a background is mysteriously missing from a component in a specific location

Exploring React 16 and functional components with hooks Discussing Mui 4 framework Adding a background pattern to multiple login pages seems simple, right? Here is an example of a login page component: return ( <Box width={1} height={1}> ...

cssreactjsmaterial-uibackground

Is there a way to transform an HTML table from a horizontal layout to a vertical

I have reorganized the bus seating layout horizontally using a table. However, I now need to transform it vertically for mobile phones without disrupting my existing code. My attempt at using transform(rotate90deg) achieved the desired result, but the tab ...

htmlcssvue.jsbootstrap-5

Improve your code by avoiding the use of multiple ngIf statements

Looking for ways to shorten my code for better readability. I have multiple ngIf statements with various conditions for numbering lists (e.g., 1, 1.1, 1.1.1) Here is a snippet of the code from my template: <span *ngIf="...">{{...}}.</span> .. ...

angulartypescriptangular6angular-ng-if

Angular2 - Creating PDF documents from HTML content with jspdf

For my current project, I am in need of generating a PDF of the page that the user is currently viewing. To accomplish this task, I have decided to utilize jspdf. Since I have HTML content that needs to be converted into a PDF format, I will make use of th ...

angularpdftypescriptjspdfhtml2canvas

Is there a way to receive messages from background.js of a Chrome Extension within an Angular web application?

I've developed a Chrome Extension that sends messages to all tabs (through background.js) using the following code: chrome.tabs.query({}).then((tabs)=> { if (tabs) { tabs.forEach(tab => { chrome.tabs.sendM ...

angulargoogle-chrome-extension

migrate the HTML variable to PHP

Hello, as a beginner in php, I have a question regarding storing the var effort value from an html5 canvas code into a php session for transfer to mysql. Can someone provide guidance on how to achieve this? Your assistance is greatly appreciated. <di ...

phphtmlcanvas

Working with Array of Objects Within Another Array in Angular 6 Using Typescript

I'm currently working with an array of "food": "food": [ { "id": 11, "name": "Kabeljaufilet", "preis": 3.55, "art": "mit Fisch" }, { "id": 12, "name": "Spaghetti Bolognese", "preis": 3.85, "art": "mit Fleisch" }, { "id": 1 ...

arraysangulartypescriptobject

Issues encountered while attempting to update data in angular2-datatable

Once the datatable has been rendered, I am facing an issue where I cannot update the data. I'm utilizing angular2-datatable. In my appcomponent.html file: If I try to update 'data2' in my appcomponent.ts file as shown below: this.httpserv ...

javascriptgoogle-mapsangulartypescriptdatatable

The div element nested within the button is not visible

Fiddle I am trying to create a unique social button design that resembles the custom Google+ sign-in button: However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected: Here is the c ...

javascriptjqueryhtmlcss

Issue: Unable to assign value to 'googleUri' property of null. Resolving with Interface for two-way binding?

Can anyone help me figure out why I keep getting a 'set property of null' error while attempting 2way binding in my interface? Whenever I submit the form and trigger the onSave function, I encounter the error "Cannot set property 'googleUri ...

angulartypescriptangular5