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

Position an element to the right within a div using the float property

My product page features a range of attributes that can vary from 1 to 4, each sharing a common fieldset class name. I am attempting to position two of the fieldsets side by side and the remaining ones below them in a similar layout. However, achieving thi ...

htmlcss

Display fewer search results initially and have the option to view more when hovering

I am working with a PHP function that generates a ul element. <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> I am looking to display the list in a li ...

phpjquerycsshtml-lists

Various objects are becoming engaged and chosen instead of a single item being focused on

In my React application, I have integrated a searchable Semantic UI dropdown. The issue I am encountering is that when I select an item by typing in the search field, the element matching the search text gets the class "active" and the element at the index ...

htmlcssreactjsreact-reduxsemantic-ui-react

The main page wrapper will be centered on all devices except for tablets, where it will appear

I have set up a main container, #main, for my page content with a central position. It is positioned absolutely to create some space above the container. Centering is achieved using negative margins and left:50% instead of margin:auto. However, the issue a ...

androidhtmlcss

Is it necessary to include the Fonts file (which accompanies Bootstrap files) in the HTML document?

As a beginner in HTML, I decided to incorporate Bootstrap into my project. After downloading the necessary files, including css, js, and fonts, I found myself able to easily add the css and js files using the appropriate tags. However, I encountered some c ...

htmlcssbootstrap-4

Livewire refreshes dropdown selection

Scenario In my form, I have utilized a livewire component to enable real-time calculations by binding multiple inputs. My expectation is that the dropdown options remain static while the text input fields should be dynamic. Challenge The issue arises wh ...

phphtmllaravellaravel-livewire

equal child width as parent column container

I'm in the process of developing a custom dropdown search bar that presents results as the user enters text. One issue I'm facing is that the list of results must have a position: absolute. This causes it to disregard the width of the parent col ...

htmlcsstwitter-bootstrap

What is causing justifyContent: space-between not to function properly?

I want to display Text1Text2Text3Text4Text5Text6Text7 at the top with text alignment using justifyContent: 'space-between'. However, when I tried to do so, all texts ended up at the top. <div style={{display: 'flex-item', flex: 1, ...

htmlcssflexbox

Countdown malfunction: wrong date displayed

Utilizing the Countdownjs library in my project is resulting in an incorrect day count. Incorporating AngularJS, here is the custom directive I've implemented for the countdown: .directive('tempoPercorrido', function($interval){ ret ...

javascripthtmlangularjsangularjs-directivecountdown

Troubleshooting the issue of Angular 2 error: Cannot access the 'getOptional' property

Currently, I am navigating my way through angular 2 and attempting to define a service named searchservice. I want to inject this service in the bootstap part of my project: import {SearchService} from 'src/service'; Here is the code for the Se ...

angularjstypescriptangular

How to attach input to function invocation in Angular 2

Can we connect the @Input() property of a child component to a parent component's function call like this: <navigation [hasNextCategory]="hasNextCategory()" [hasPreviousCategory]="hasPreviousCategory()" (nextClicked)="next ...

javascripthtmlcssangularjsangular

The Validator.js module cannot be located - Unable to resolve 'http' in the client

Struggling with integrating the amadeus-node package into an angular 10 project. When I add the following line: const Amadeus = require('amadeus'); I encounter this error: ERROR in ./node_modules/amadeus/lib/amadeus/client/validator.js Module ...

node.jsangularnode-modulesamadeus

What is the process for passing input values to a dynamic Angular component?

My goal is to develop a dynamic filtering system where users can specify multiple attributes and their corresponding values to filter a list of components. The dynamically added component includes two dropdown menus: one for attribute selection and another ...

angulartypescript

Tips for ensuring elements within a modal receive immediate focus when opened in Angular 2

I am relatively new to Angular JS and I am encountering some challenges with implementing a directive in Angular 2 that can manage focusing on the modal when it is opened by clicking a button. There have been similar queries in the past, with solutions pr ...

javascriptangularangular2-directives

Sending HTTP POST request with FormData from an Angular2 client to a Node server

I am having trouble sending a file from my Angular2 client to my NodeJS server using http and a FormData object. upload.html ... <input #fileinput type="file" [attr.multiple]="multiple ? true : null" (change)="uploadFile()" > ... upload.component. ...

node.jsangularform-data

Streamlining programming by utilizing localStorage

Is there a more efficient way to streamline this process without hard-coding the entire structure? While attempting to store user inputs into localStorage with a for loop in my JavaScript, I encountered an error message: CreateEvent.js:72 Uncaught TypeErr ...

javascripthtmlcssfor-loop

Show only the lower left quadrant within the img tag during the prepend operation

I'm attempting to add an <img> tag in front of a <div> similar to this example on JSFiddle. However, I have a specific requirement to only display the bottom left quarter of the image instead of the entire one. HTML Markup <div id="my ...

javascriptjqueryhtmlcss

A checkbox placed within an anchor tag

Here is some code that I have: <a href class="dropdown-toggle"> <input type="checkbox" ng-model="test.checked"> <span class="fa fa-angle-down"></span> </a> When I click on the above code, I want the chec ...

javascripthtmlangularjscheckbox

Create an interactive and responsive user interface for Object using the Angular framework

After receiving a JSON Object from an API call with multiple string values, I need to create an Interface for this Object in the most efficient way possible. Rather than manually writing an Interface with 100 keys all of type string, is there a quicker a ...

javascriptangulartypescript

What is the most effective way to choose and give focus to an input using JavaScript or jQuery?

How do you use JavaScript or jQuery to focus on and select an input? This is the relevant snippet of my code: <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </he ...

javascripthtmljquery