The functionality of CSS Inline Block display is not displaying inline as expected

I have the following HTML and CSS code, but I am having issues getting the dropdown to display inline.

.project Type{
    display: inline-block;
}

<form class="smart-form">
  <div class="row">
    <div class="col col-sm-6 col-md-2 col-lg-2">
      <label class="project Type" >Project Type</label>
      <label class="project Type" >
        <select type="text" class="padding-5">
          <option *ngFor="let t of epmodel.ProjectType" value="{{t.id}}">{{t.type}}</option>
        </select>
      </label>
    </div>
  </div>
</form>

View image description here

htmlcssangularformsbootstrap-4

Answer №1

It is important to avoid using spaces in class names as it can be misinterpreted as nested classes in CSS. For example, if you are looking for an element Type inside a block with the class project, consider using the class projectType instead. Your CSS should then be:

.projectType {
  display: inline;
}

<label class="projectType">...</label>

Answer №3

When writing CSS declarations, remember that class names should not be separated by spaces, similar to how you name JavaScript variables.

If you are working with Bootstrap, you can simply use the appropriate class names in your HTML code without having to write additional styling.

<form class="smart-form">
  <div class="row">
    <div class="col col-sm-6 col-md-2 col-lg-2">
      <label class="d-inline" >Project Type</label>
      <label class="d-inline" >
        <select type="text" class="padding-5">
          <option *ngFor="let t of epmodel.ProjectType" value="{{t.id}}">{{t.type}}</option>
        </select>
      </label>
    </div>
  </div>
</form>

For more information on Bootstrap display utilities, check out Bootstrap display utilities.

If you are not using Bootstrap, you can add the following CSS code:

.d-inline {
  display: inline-block;
}

Answer №4

To achieve flexible layout, apply the style display: flex;, and it's best practice to avoid spaces in CSS class names.

.projectType{
    display: flex;
}

Answer №5

.workType{
    visibility: visible;
}

Don't forget to update your HTML class attribute to class="workType"

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

Is the homepage the only page rendering correctly?

After working on an MVC project for over 6 months, I consistently faced a problem with HTML and CSS. The homepage always rendered correctly, as shown here: http://prntscr.com/tucp1 However, all other pages had strange white spaces between words, like in t ...

htmlcss

How to use RxJs BehaviorSubject in an Angular Interceptor to receive incoming data

Being a newcomer to rxjs, I grasp most operators except for the specific use case involving BehaviorSubject, filter, and take. I am working on renewing an oauth access and refresh token pair within an Angular interceptor. While reviewing various codes fro ...

angulartypescriptrxjs

Comparing attribute selectors to class selectors in the realm of styling

I often come across code that looks like this: <input type="text" class="class1" name="text"> <input type="submit" class="class2" name="submit"> which is then styled as follows: input[type=text] { styles here...} input[type=submit] { sty ...

cssclassattributescss-selectors

Display an icon button when a user edits the text in a text field, and make it disappear once clicked on

Figuring out how to incorporate a v-text-area with an added button (icon) that only appears when the text within the text area is edited, and disappears once it is clicked on, has proven to be quite challenging. Below is a simplified version of my code to ...

javascripthtmlvue.jsvuetify.js

Angular 2 communication between parent and child components

I am having trouble incorporating an action button in the child_1 component, while the event handler is located in the sub child component, child_2. Here's a snippet of the code: app.component.html (Parent HTML) <div style="text-align:center"> ...

htmlangular

Which is better for creating hover effects: CSS3 or JavaScript?

When hovering over a link, I want to highlight a specific picture and blur the rest. Here's my HTML code: <body> <div id="back"> <div id="one"></div> <div id="two"></div> </div> ...

javascripthtmlcss

Mastering the Conversion from NGRX Effect to NGRX Effect v15

I am currently working on converting the code snippet to NGRX 15. As a newcomer to Angular, I could use some guidance. "@ngrx/effects": "^15.4.0" @Injectable() export class SnackbarEffects { @Effect({ dispatch: false }) cl ...

angulartypescriptngrxngrx-effects

Setting the image source for each image in a table using VB.net

Is it more efficient to loop through the img src of various cells using a For Each loop and set their src based on another value (x) by directly referencing the img src attributes in code, or would embedding the table in a control higher up the hierarchy ...

htmlvb.net

CSS - image does not adhere to max-height when placed in a fluid container - link to jsFiddle

For instance: http://jsfiddle.net/vjqjv/7/ I am facing an issue with an image inside a container (refer to #slider-section in the jsFiddle) that has a fluid height and a set max-height. I have defined max-height and max-width for my image as 100% (check ...

imagecss

Can a map key value be converted into a param object?

I have a map containing key-value pairs as shown below: for (let controller of this.attributiFormArray.controls) { attributiAttivitaMap.set(controller.get('id').value, { value: controller.get('valoreDefault').value, mandatory ...

angulartypescriptdictionary

Reorganizing the position of the HTML form method for processing PHP $_POST data

Content goes here ...

javascriptphphtmlcss

Tips on choosing additional (sibling) elements with CSS?

My navbar has the following structure: <ul class="nav navbar-nav"> <li class="nav-item"><a href="#services">Services</a></li> <li class="nav-item"><a href="#work">Work</a></li> <li class ...

css

Customizing HTML element tags in MUI: Best practices

Using the most recent version of MUI (v5) and incorporating CssBaseline from @mui/materials. Typically, in CSS, I would set up my styles like this: body, html, #root { width: 100%; height: 100%; min-height: 100%; margin: 0; padding: 0; font-siz ...

cssreactjsmaterial-ui

What is the method for adjusting the file browser size within Bootstrap 4?

Is there a way to adjust the size of the file browser (either making it large or small)? Perhaps by using a class like custom-file-lg Here is an example code snippet from Bootstrap 4 documentation: <div class="custom-file"> <input type="file ...

bootstrap-4

24-hour countdown tool featuring a visual progress bar

Currently, I am in the process of developing an application aimed at assisting individuals in either forming new habits or breaking old ones. In this application, I am looking to implement a countdown timer that ticks down daily; with the help of this help ...

javascripthtmljquerycsscountdown

Ensure that the <aside> elements span the entire width of their containing parent element

I am currently designing a website and I am aiming for a specific layout. Any advice on how to achieve this would be greatly appreciated. The header of the page consists of: a logo aligned to the left within an <a> tag 2 widgets placed in <asid ...

htmlcss

Leverage the power of JSON values by incorporating them directly into HTML tags

My JSON file is generating the following styles: { "h1" : { "font-family" : "Lato", "font-size" : "24px", "line-height" : "28px", "font-weight" : 600, "colorId" : 3, "margin-bottom" : "10px", "margin-top" : "20px" }, "h2" : { ...

htmljsonparsingvue.js

Update the class name of an element depending on the URL

Hey there! I'm working on customizing the style of some elements (specifically tds within a table) based on the current URL. Here are the pages I'm targeting: http:\\domain\site\welcome.html http:\\domain\site& ...

jqueryhtmlcssclass

csslimit overflow display only left side

I am struggling to implement a drag and drop feature resembling a shopping cart. Unfortunately, the content within the box is concealing the div I want to drag when moving out of the box. Is there a method to display only the content on the left side? Che ...

jquerycssoverflow

Adding JSON data to an HTML document

Seeking guidance on how to efficiently parse and display information from a JSON file consisting of 3 objects onto a widget. Unsure of the best approach to achieve this task. Any suggestions or methods would be greatly appreciated. Widget Structure: < ...

javascriptjqueryjsonhtml