What is the best way to reduce the distance between labels and input fields?

Currently, I am utilizing Blazorise along with Bootstrap 5, however, I have noticed that the spacing between the input field and the label is too wide.

Here is an illustration of the space between the input and the label:

Is there a way for me to reduce this gap?

<Row>
  <Column ColumnSize="ColumnSize.Is2.OnTablet.Is1.OnFullHD">
    <Tooltip Text="End Date" Placement="TooltipPlacement.Top">
      <FieldLabel TextColor="TextColor.Secondary">Start</FieldLabel>
      <DateEdit Style="width:150px" TextColor="TextColor.Primary" TValue="DateTime?" @bind-Date=Agenda.PeriodoInicial />
    </Tooltip>
  </Column>
  <Column ColumnSize="ColumnSize.Is2.OnTablet.Is1.OnFullHD">
    <Tooltip Text="End Date" Placement="TooltipPlacement.Top">
      <FieldLabel TextColor="TextColor.Secondary">End</FieldLabel>
      <DateEdit Style="width:150px" TextColor="TextColor.Primary" TValue="DateTime?" @bind-Date=Agenda.PeriodoFinal />
    </Tooltip>
  </Column>
  <Column ColumnSize="ColumnSize.Is8.OnTablet" Class="form-check-inline">
    <FieldLabel TextColor="TextColor.Secondary">Period</FieldLabel>
    <RadioGroup TextColor="TextColor.Secondary" Orientation="Orientation.Horizontal" TValue="int" Name="tipoPeriodo" @bind-CheckedValue=Agenda.TipoPeriodo>
      <Radio TextColor="TextColor.Primary" Inline="true" Value=0>Start Date</Radio>
      <Radio TextColor="TextColor.Secondary" Inline="true" Value=1>Release Date</Radio>
    </RadioGroup>
  </Column>
</Row>
htmlcssblazorbootstrap-5blazorise

Answer №1

Blazorise has already incorporated the form-label into its Class attribute.

Solution using CSS

<style>
    .form-label{
        margin-bottom:0px;
    }
</style>

Outcome

View the result image

Answer №2

To customize the appearance of Field Labels or Data elements, you can modify the CSS parameters. For instance, adjusting the margin-bottom for labels or adding margin-top/padding top for the Data/field inputs.

If you already have inline style attributes ( Style="width:150px" ), you can include the margin-top in them. However, it would be more efficient to declare a CSS ID or Class on the field inputs to apply the property change to all other elements.

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

Discovering the process of extracting a date from the Date Picker component and displaying it in a table using Material-UI in ReactJS

I am using the Date Picker component from Material-UI for React JS to display selected dates in a table. However, I am encountering an error when trying to show the date object in a table row. Can anyone provide guidance on how to achieve this? import ...

javascripthtmlreactjsmaterial-ui

Bypassing CORS/CORB restrictions in a React app without the need for a NodeJS/Express server

Encountering an issue while trying to launch an app on Heroku that fetches a response from Okta, as I am getting a CORB error The Cross-Origin Read Blocking (CORB) has blocked the cross-origin response from with MIME type application/json. Is there a wa ...

htmlreactjsherokucross-origin-read-blocking

Transform pixel padding into percentage ratios

I've been searching through various discussions to find a solution, but none of them seem to fit my particular scenario. My issue involves a hyperlink with absolute positioning inside a div with relative positioning. The padding and margins are curre ...

javascripthtmlcsspositionpadding

The try and catch block in JavaScript is failing to correctly capture the HTTP status

I have a function that successfully posts JSON to an API endpoint. Here is the code I am using: function sendValuesPageLoad(){ var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function () { try { if (xhr.readyState === ...

javascripthtmljsonxmlhttprequest

Error alert: Blinking display, do not dismiss

I am trying to make it so that when the "enviar" button is clicked, the "resultado" goes from being hidden ("display:none") to being visible ("display:block"). This is my html document: <script type="text/javascript"> function showResu ...

javascripthtmlcssblock

Incorporating jQuery to seamlessly add elements without causing any disruptions to the layout

I'm looking to enhance the design of my website by adding a mouseenter function to display two lines when hovering over an item. However, I've encountered an issue where the appearance and disappearance of these lines cause the list items to move ...

javascriptjqueryhtml

The allure of Beautiful Soup lies in its ability to effortlessly gather every <br/> tag nestled within the <strong> element

I'm facing a peculiar issue that's getting on my nerves. Trying to convert HTML into markdown, but the formatting of my HTML is quite unusual. It includes things like: <strong>Ihre Aufgaben:<br/></strong> and <strong> ...

pythonhtmlparsingbeautifulsoupdom-manipulation

Transferring HTML information to Flask

I'm struggling with passing a value from a text box in a web application to a Flask application. Despite my efforts, the request object in Flask does not seem to contain the data I need. Can anyone provide assistance with this issue? Below are the rel ...

javascriptpythonhtmlflask

Alter the hue of a component upon being clicked

Seeking help to modify the color of my menu elements upon clicking on the "center" or "right" containers (reverting back when clicked again). Currently, the three lines in my menu are white, but I desire them to turn red when either of these containers is ...

javascriptjqueryhtmlcss

Tips for overlaying text on the background in Next.js:

I'm currently working on creating an image element with overlay text. Check out my jsx code below: <div className={styles.img}> <img src={src} alt="" /> <p>{`(${size})`}</p> </div> And here is t ...

javascriptcssnode.jsnext.jssass

Turn off automatic compilation for LESS styling

In my Eclipse environment, I am looking to have LESS compile only when explicitly triggered by mvn package. Currently, any changes made in my less file immediately update the CSS. How can I prevent this automatic behavior? <plugin> <groupId> ...

csseclipsemavenless

The hovering over a table data element results in a superior transformation

I recently created a table with an interesting structure where the first <tr> contains two <td> elements (the first one having a rowspan), while the second <tr> only has one <td>. My goal is to have hovering over the <td> in t ...

csshover

How can I add a black-colored name and a red-colored star to the Placeholder Star as a required field?

I'm looking to customize the placeholder text in an input field. I want the main placeholder text to be in black and have a red star indicating it's a required field. However, my attempt to set the color of the star specifically to red using `::- ...

javascriptjqueryhtmlcss

Using jQuery to dynamically populate a list with the information from a JSON dataset

How can I utilize JSON data to ensure that jquery populates the correct ul in this code snippet, creating 5 ul and populating them with li elements? Expected output: The slides should be assigned to specific modules as indicated in the JSON data, instead ...

javascriptjqueryhtmljson

How can I prevent tinymce from stripping out my <link> tag?

I'm having an issue with tinymce. dd<script id="kot-id" src="***insert link here***"></script><div id="kotcalculator"></div><link rel="stylesheet" href="***insert link here***" type="text/css" media="screen" /> It seems ...

javascriptphphtmlcsstinymce

How can I redirect after the back button is pressed?

I am currently working with a trio of apps and scripts. The first app allows the user to choose a value, which is then passed on to the second script. This script fetches data from a database and generates XML, which is subsequently posted to an Eclipse/J ...

javascripthtmlback-button

Creating Radial Fades with CSS3

Seeking guidance on creating a background similar to the one shown here using just CSS. I believe it can be done, but I struggle with CSS3. The goal is for the background to be compatible with all modern browsers, not overly concerned about support for br ...

css

Instructions on adding a solid border color to a circular div using CSS

Hey there! I'm curious, is it possible to style a straight border color on a rounded div using CSS? Here I have some basic Tailwind CSS code. <div class="rounded-2xl w-72 h-20 border-l-4 border-l-yellow-500"> ... </div> In the ...

css

Moving the words from textArea to each 'ol' element using JavaScript

When a word is entered in the textarea, it should be assigned to a specific class within an 'ol' tag. Each subsequent word will be placed in the next class sequentially. If there are no more words, the remaining classes should remain empty. <! ...

javascripthtml

Using Jquery to utilize next() function along with removeClass()

https://i.sstatic.net/6xlR6.png The image above demonstrates what I am trying to achieve - when a row is clicked, it should hide, the next row turns red and clicking on that hides it too, moving on to the next available row in the sequence. $(document).r ...

jqueryhtml