Creating form components in a row

I'm currently working on an app and I'm attempting to align 3 form elements in a ratio of 25/25/50, but it's proving to be quite challenging. At the end of this message, you'll find a picture showing the current layout. Additionally, I'm wondering if there's a way to insert some spacing between these form elements to make them easier to read and understand?

Between
<div class="ui-grid-e">
  <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
  <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
  Comment
  <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
</div>

https://i.sstatic.net/DfA3Q.jpg

javascripthtmlcssvisual-studiocordova

Answer №1

simply make the necessary changes to your code

.ui-grid-e {
position: relative;
width: 400px;
}

.ui-block-a,
.ui-block-b,
.ui-block-c {
box-sizing: border-box;
padding: 0 5px;
}

.ui-block-a{
padding-left: 0;
}

.title-c {
padding-left: 5px;
}

.ui-block-title{
box-sizing: border-box;
float: left;
width: 50%;
}

.ui-block-a,
.ui-block-b {
float: left;
width: 25%;
}

.ui-block-c{
float: left;
width: 50%;
}

input {
width: 100%;
}
<div class="ui-grid-e">
                     <div class="ui-block-title title-a-b">Between</div>
                     <div class="ui-block-title title-c">Comment</div>
                        <div class=ui-block-a><input type="text" name="between1" id="between1" required /></div>
                        <div class=ui-block-b><input type="text" name="between2" id="between2" required /></div>
                        
                        <div class=ui-block-c><input type="text" name="betweencomment" id="betweencomment" required /></div>
                    </div>

Answer №2

If you're working with HTML, I recommend the following structure:

<form class="ui-grid-e">
       <input type="text" name="between1" id="between1"  />
       <input type="text" name="between2" id="between2"  />
       <input type="text" name="betweencomment" id="betweencomment"/>
</form>

For styling in your CSS file:

.ui-grid-e{ 

display: inline;

float: left;


}

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

Establishing the state in a separate React component

I've tried various solutions found in other posts, but I still can't seem to resolve this issue. My main goal is to update the state of one component from another component. Below is a simplified version of my code: function updateOtherState(n ...

javascriptreactjs

What could be causing my web application to not properly identify angular.js?

As a newcomer to angular, I have been struggling to incorporate it into my web application (VS) as I keep encountering issues with recognizing angular. Despite trying various methods, the result remains the same - angular is not being recognized. I dow ...

javascriptangularjsweb-applications

What is the best way to handle errors in the front-end when receiving responses from expressjs?

Here is the issue that I am facing: //express server app.post('/register', (req, res) => { const { password, passwordConfirm } = req.body; if (password === passwordConfirm) { //... } else { ...

javascriptreactjsexpress

Can Firebase lists be reversed?

I have searched extensively on SO for an answer to this question, but I haven't found a solution yet. Therefore, please do not mark this as a duplicate. Currently, I am working with AngularFire in Angular 2 and Typescript. I am using FirebaseListObse ...

javascriptangularjsfirebasefirebase-realtime-databaseangularfire

Tips for extracting text with selenium

I'm struggling to extract the address of this website using selenium: page My attempt to do so was with the following code: address = driver.find_element_by_css_selector('main-content-cell.p-bottom').text print(address) Unfortunately, wh ...

htmlseleniumselector

Unleashing the potential of Chrome's desktop notifications

After spending the past hour, I finally found out why I am unable to make a call without a click event: window.webkitNotifications.requestPermission(); I am aware that it works with a click event, but is there any way to trigger a Chrome desktop notifica ...

javascriptjquerygoogle-chrome

Tips for integrating AngularJS into Zend Framework 2

Hi there! I am a newcomer to Zend Framework 2 and I am exploring the integration of AngularJS into my project. Currently, I am calling a function in the controller like this: return new ViewModel(array( 'result' => $result, 'use ...

javascriptangularjszend-framework2

"Is it possible in Typescript to set the parameters of a returning function as required or optional depending on the parameters of the current

I am currently exploring Typescript and attempting to replicate the functionality of styled-components on a smaller scale. Specifically, I want to make children required if the user passes in 'true' for the children parameter in createStyledCompo ...

javascriptreactjstypescriptstyled-components

What's the advantage in using 2 functions instead of just utilizing one?

When I'm asking for help with my code, I make sure to include all of it in case there's a connection between the different functions. Recently, I received assistance to get one of my functions working properly. Specifically, I'm looking at t ...

javascriptjqueryajaxjson

Iterate over JSON elements beginning with a specific pattern

What is the best way to iterate through JSON objects that specifically start with a certain format? For example, if we have a JSON structure like this: { "END": true, "Lines": "End Reached", "term0": { "PrincipalTranslations": { // nest ...

javascriptjqueryjsonjquery-selectors

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...

cssreactjstypescriptmaterial-ui

Transferring data from a JavaScript variable to PHP using AJAX

I’m currently working through the tutorial at http://www.w3schools.com/php/php_ajax_database.asp and I think I have a good grasp of how it all operates. This is my code: PHP: <?php include('./db.php'); $PM = mysqli_query($con, "SELECT DIS ...

javascriptphpjqueryajax

Adjusting the height of the v-footer

I'm having trouble adjusting the height of the v-footer component. According to the documentation, I should be able to use the height prop, but when I try height="100px" or height="50%", the footer doesn't change. What could be causing this issue ...

cssvue.jsvuetify.jsfooter

Combining multiple Float32Arrays to create a single Float32Array

I need help creating a function that can flatten multiple Float32Arrays into one large Float32Array const first = new Float32Array([1,2]); const second = new Float32Array([3,4,5]); const third = new Float32Array([6,7,8,9]); const chunks = [ ...

javascriptflatten

Function Errors, How to Fix Them?

I've recently developed a tool for character creation within a new video game. However, I'm currently facing an issue: When it comes to assigning points in Magic Power or Weapon Power for the Warrior and Wizard characters, there seems to be a p ...

javascriptjqueryfunction

Does the padding and margin of an element alter when the position is set to relative?

By utilizing relative positioning, an element can be moved in relation to its original position in normal flow. - Citation from the book "HTML&CSS: design and build websites" by John Duckett If an element has a relative position property, it opens up ...

csscss-positionmarginpadding

Loop through each instance of a data record in a JSON document using Vue's v-for directive

I am currently working on a project that involves extracting data from a website that monitors traffic jams and maintenance work. My goal is to specifically retrieve information about traffic jams and display them individually. The code I am using utilize ...

javascriptvue.js

What causes Gun.js to generate duplicate messages within a ReactJs environment?

I need assistance with my React application where gun.js is implemented. The issue I am facing is that messages are being duplicated on every render and update. Can someone please review my code and help me figure out what's wrong? Here is the code s ...

javascriptreactjstypescriptgun

Adjust the width of a container to exceed 32767 using jquery in the Opera browser

I am looking to create a compact timeline using jQuery, and I want this timeline to have a width exceeding 32767 pixels. Interestingly, when I attempt to modify the width using the jQuery code $(".timelinecontainer").width(32767);, it doesn't seem to ...

javascriptjquerywidthopera

Utilizing Cell References in the Table Component of React Material UI

I'm exploring React and aiming to create an editable table that dynamically updates the $/Unit cell based on changes in the Price and Units cells. I'm having trouble figuring out how to access values from other cells. Can this be achieved using ...

javascriptreactjsmaterial-ui