Is there a way to format the markup below in order to achieve the layout described?
<form>
<input name="one">
<input name="two">
<input name="three">
<input name="four">
<input name="five">
<input name="six">
<textarea></textarea>
</form>
Including the following arrangement:
input input textarea
input input
input input
Utilizing textarea as the initial element helps you to accomplish
form{
width:100%;
display:table;
}
input{
width:30%;
display:inline-block;
}
textarea{
width:33.33%;
float:right;
display:inline-block;
}<form>
<textarea></textarea>
<input name="one">
<input name="two">
<input name="three">
<input name="four">
<input name="five">
<input name="six">
</form>If you utilize Bootstrap, the process will become much easier.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<form>
<div class="row">
<div class="col-md-6">
<input name="one">
<input name="two">
<input name="three">
<input name="four">
<input name="five">
<input name="six">
</div>
<div class="col-md-6">
<textarea></textarea>
</div>
</div>
</form>If I were to choose, I'd opt for using div, but here's an alternative:
<form>
<table>
<tr>
<td><input name="one"></td>
<td><input name="four"></td>
<td rowspan="3"><textarea></textarea></td>
</tr>
<tr>
<td><input name="two"></td>
<td><input name="five"></td>
</tr>
<tr>
<td><input name="three"></td>
<td><input name="six"></td>
</tr>
</table>
</form>Why not opt for a table instead of using a div?
td{
display:block;
}<form>
<table>
<th>
<td><input name="one"></td>
<td><input name="two"></td>
<td><input name="three"></td>
</th>
<th>
<td><input name="four"></td>
<td><input name="five"></td>
<td><input name="six"></td>
</th>
<th>
<td><textarea></textarea></td>
</th>
</table>
</form> <!--The following code includes inline CSS with HTML, which can be separated if necessary-->
<form style="float:right;width:100%">
<div style="float:left;width:30%;height:auto">
<input name="A" style="width:100%">
<input name="B" style="width:100%">
<input name="C" style="width:100%">
</div>
<div style="float:left;width:30%;height:auto">
<input name="D" style="width:100%">
<input name="E" style="width:100%">
<input name="F" style="width:100%">
</div>
<div style="float:left;width:30%;height:auto">
<textarea style="width:100%"></textarea>
</div>
</form>
What do you think of this solution?
form{
position: relative;
}
input{
display: inline-block;
width: 35%;
}
textarea{
position: absolute;
right: 0;
top: 0;
}
/* Alternatively */
form{
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
}
Give this a try, utilizing a table format
textarea
{
height:100px
}<form>
<table>
<tr>
<td><input name="one"></td>
<td><input name="two"></td>
<td rowspan=3><textarea></textarea></td>
</tr>
<tr>
<td> <input name="three"></td>
<td><input name="four"></td>
</tr>
<tr>
<td><input name="five"></td>
<td> <input name="six"></td>
</tr>
</table>
</form><li><a href="maine/home#services">SERVICES</a></li> <li><a href="maine/home#about">ABOUT</a></li> <li><a href="maine/home#contact">CONTACT</a></li> I'm currently using CodeIgnite ...
There is a p tag, <p> most iconic character in cinema</p> I need to truncate the text after 8 characters, and display dots afterwards. For example: most ic... Is there a way to achieve this using CSS? Any help with AngularJS would also be ...
Looking to align text B to the right when text A and B are on the same line, but automatically aligning text B to the left if it wraps to the next line due to space constraints. .text-left { float: left; /* Float to the left */ } .text-right { fl ...
Something seems off on the Safari browser, as there's still a gap in the right side of the navbar and footer. I've been using Bootstrap and steering clear of Javascript. Any ideas on how to fix this? Appreciate any help. Thanks! Here's the ...
I've been working on a dropdown menu box and an arrow, and for the most part it's looking good. However, I've run into an issue with the arrow icon not changing color when the user is focused on it. I'm using the :focus pseudo-class to ...
I have a markup template that looks like this. <template id="unsequenced-template"> <button type="button" class="btn btn-primary railcar"></button> </template> Then, I use the following JavaScript ...
In the table-like container, I have elements with horizontal scrolling. Each element has the same width but potentially different heights. I want to add a button in the top-right corner of each element without it disappearing when scrolling. I came across ...
I'm currently working on a Symfony project where I need to export PDF code that includes images and text stored in the database. Since I can't install anything on the web servers, I've opted for using the Spread PDF Generator Bundle instead ...
I've encountered an issue where my child's ul li elements are not behaving as expected, despite following advice from other sources. After days of debugging with no success, I am unable to pinpoint the problem. The image showcases the issue perfe ...
I'm having trouble printing a website with a simple layout featuring two columns, each containing tables. The website I want to print is located at the following link: . However, when I try to print it using the JavaScript function window.print(), the ...
I am looking to incorporate a transition animation when the image changes, but it seems that the transition is not working as intended. Can anyone provide guidance on how to make the transition style work correctly in this scenario? (Ideally, I would like ...
Trying to create an infinite looping marquee that looks good on desktop, but experiences spacing and element disappearance issues on mobile or window adjustments. The code I used can be found here. You can see what I have so far on this CodePen link. < ...
Consider this example: $('#key').on('click', function(){ $('.task').html("<button id='key'>Button</button>"+Date()); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.j ...
I would like to update the color of the arrow buttons. .carousel-control-prev-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f00' viewBox='0 0 8 8' ...
I am creating a website for my school project and needed a dynamic dropdown feature. I followed a tutorial to implement it, which can be found here. After completing the first 6 parts successfully, I encountered an issue in the last part where the dropdow ...
As a beginner in the world of Javascript, I am venturing into creating a password generator that involves using icons. The concept is simple - by clicking on any number of icons from a list, the corresponding hex code will be displayed in an input box. The ...
It came as a surprise to me that Twitter Bootstrap does not include media queries specifically for creating a well-suited version of a website for mobile portrait screens. Defining the width for "mobile portrait" is a bit complicated. In the past, most ph ...
Currently, I am aware that there will be a need to refactor this code later on to separate things into their own components. However, due to time constraints, I have to wire this up as is at the moment. To achieve this, I utilized array.map() to create car ...
Hey there, I am currently using AngularJS in my project. However, when I attempted to add a span to one of my input fields, all the radio buttons related to it stopped functioning. Can anyone offer some suggestions on what might be going wrong here? < ...
Struggling with integrating a JavaScript function from one file into an HTML file? I'm having trouble getting it to work and suspect it has something to do with making the JavaScript accessible in the HTML. The function is meant to sum up values taken ...