Is there a way to create a form that looks like the one shown in the picture, where regardless of the length of the variable names (Name, Mobile, Gender, Age), all value receiving blocks are the same size and aligned vertically?
My initial approach involves having two separate divs - one for all the names and another for all the blocks. However, this is uncharted territory for me.
Can this be achieved using Bootstrap? That would be my preferred method.
<!DOCTYPE html>
<html lang="en>
<head>
<title>Rizwan Ali</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Custom Form using Bootstrap</h2>
<form class="form-horizontal>
<div class="form-group>
<label class="control-label col-sm-2" for="pwd">Name:</label>
<div class="col-sm-4">
<input type="text" class="form-control" placeholder="Enter Name">
</div>
</div>
<div class="form-group>
<label class="control-label col-sm-2">Mobile:</label>
<div class="col-sm-4">
<input type="number" class="form-control" placeholder="Enter 10 digits">
</div>
</div>
<div class="form-group>
<label class="control-label col-sm-2">Alternate Mobile:</label>
<div class="col-sm-4">
<input type="number" class="form-control">
</div>
</div>
<div class="form-group>
<label class="control-label col-sm-2" for="pwd">Gender:</label>
<div class="col-sm-4">
<select class="form-control">
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="form-group>
<label class="control-label col-sm-2" for="pwd">Age:</label>
<div class="col-sm-4">
<input type="number" class="form-control" id="pwd" placeholder="In Years">
</div>
</div>
<div class="form-group>
<label class="control-label col-sm-2" for="pwd">Date of Dog Bite:</label>
<div class="col-sm-4">
<input type="date" class="form-control">
</div>
</div>
<div class="form-group>
<label class="control-label col-sm-2" for="pwd">Credit Card Number:</label>
<div class="col-sm-4">
<input type="date" class="form-control">
</div>
</div>
<div class="form-group>
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
</div>
</div>
<div class="form-group>
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
</div>
</body>
In my HTML table, I have 4 rows with Order ID and Product Comments columns disabled. Users can enter data in other columns and submit it. Upon submission, I receive a JSON object which I iterate through and display in the table. I am facing two challenges ...
Experimenting with FlexBox (for demonstration purposes only). I am facing a challenge in vertically centering text within the parent .top-nav-bar. While using justify-content: space-between, I have successfully aligned two elements horizontally, but I am s ...
I am currently in the process of developing a plugin for Woocommerce that involves offering customers the choice between packing their items in a plastic bag or a cartoon box, each with a different cost associated with it. When a user selects one of these ...
The primary-main is supposed to change color to something like #abcdefg, but it seems to be stuck displaying primary-main as is. I am working with angular MUI + React https://i.sstatic.net/x07aI.png https://i.sstatic.net/8yuU3.png ...
I am currently facing a situation where I am setting a cookie using a JavaScript script on my page, but I need to access this value while generating HTML on the server-side using PHP. Let me explain the scenario. When a user requests a page, PHP star ...
Check out this code snippet: var Ribbon = /** @class */ (function () { function Ribbon(svg) { // Code here... } Ribbon.prototype.init = function() { // Initialization code here... }; Ribbon.prototype.updateR ...
Hey there! I am currently working with code in Wordpress using the DIVI theme builder. I am still new to JS and jQuery, so bear with me. I recently found a cool Night Mode feature that activates when a button is clicked. I stumbled upon a custom toggle swi ...
I'm experimenting with storing JSON data in a variable and then randomly accessing it. (Superhero Alias Generator) The JSON data can be found on GitHub gist below I decided to try using the ajax method for the first time, but it doesn't seem to ...
As a beginner, I am facing an issue with a URL that contains Persian language characters. For instance: http://tabnak.ir/fa/news/577155/ویدیوی-درگیری-نیروهای-سیا-و-پنتاگون-در-سوریه-با-همدیگر-ویدیوهایی ...
Imagine I have a button with the ID #click, And let's say I attach the click event like this: $('#click').click(function(){ alert('own you'+'whatever'+$(this).attr('href')); }); However, I wish to change w ...
Imagine a scenario where we are working with the following Ajax request: $.ajax({ url:'myURL.php', data:{ ac:'do', isDoable:false } }); Now, on the backend, when processing the call data, the isDoable param ...
<?php $i = 1; $query1 = mysql_query("SELECT * FROM `alert_history` ORDER BY `alert_history`.`id` DESC LIMIT ".$start.",".$per_page.""); while($result = mysql_fetch_array($query1)){ echo '<td colspan = "2">& ...
I need assistance in creating a slider for a list of objects using ng-show and animations. The current setup works smoothly when the objects slide in one direction. However, I am facing issues when trying to implement the functionality for users to slide ...
My goal was to create a minimalist version of the classic game "tic tac toe" using AngularJS. To achieve this, I had to come up with a unique solution by assigning each button a distinct ID (f+i). HTML <table> <tr ng-repeat="f in [5,10,15]"& ...
I'm facing an issue with my navbar's divs not displaying side by side when set to display inline. Here is the HTML code snippet: <!--Nav starts here--> <nav class="navbar"> <div class="navbar-item-set"> ...
While implementing an ajax request, I want my users to see a spinner for visual feedback. Surprisingly, the spinner works flawlessly on Firefox 13, but fails to function on Chrome and IE9 even though the ajax request takes approximately 1.2 seconds to comp ...
Currently, I am utilizing the jQuery Tabs library within a small application. Within this page, there are 5 tabs that load content using Ajax. However, an issue arises when a tab is loaded and remains in the browser's memory along with its HTML elemen ...
Recently, I managed to position a fixed div at the bottom of the viewport to serve as a contact tab. When this tab is clicked, it smoothly triggers a panel to slide out, which is functioning correctly. However, I'm faced with the challenge of making ...
I'm currently working on a website built upon this template: https://github.com/issaafalkattan/React-Landing-Page-Template My issue arises when trying to remove margins in multiple sections. For instance, I want to eliminate the 'orange' ar ...
Encountering a peculiar issue with d3 axis generation. When creating a bottom x axis using d3.axisBottom() for ordinal domain values, extra padding is being added at the starting and ending points of ticks on the axis. This happens when the d3.scaleBand() ...