Twitter Bootstrap Question posted in

HTML page layout – multiple form tags – Twitter bootstrap

I have a twitter-bootstrap & thymeleaf project where I need to have two form tags covering the respective parts of the page as shown below:

page layout

The area represented by the black box contains two text areas and a submit button. Users can type text into textbox1 and hit submit. the text they type is displayed in textbox2 as date+time+user+commentstring. At the same time it is save in the data base. textbox2 is to hold multiple comments each prefixed with date time and user.

The area represented by the red box is the remainder of the form – it has several fields that will be sent to the backend when the main submit button is clicked.

I understand tags must be closed within the element that they are opened in. Given this constraint – can I have a form tag that covers the red area using bootstrap grid layout. Non-layout centered solutions are welcome.

Thanks

UPDATE 1

Here is a fiddle to demonstrate better :

Layout example https://jsfiddle.net/0an6vwdq/8/

The two large text boxes and submit note button are area 1. The rest is area 2.

UPDATE 2

The fiddle has the second set of form tags starting on line 24 and closing on line 54 – right after due date picker – the form tags close early and miss the dynamic list at the bottom of the page.

I had to close them early because of the bootstrap grid system and the opening tag being inside a row.

So the question is still how to maintain this layout with bootstrap grid system but have second form tags cover remainder of page.

Tags:

2

Answers


  1. 0

    Just use float: left; on the first form element.

    .small {
  float: left;
  width: 100px;
  height: 100px;
  background: red;
  border-right: 10px solid white;
  border-bottom: 10px solid white;
}

.big {
  width: 100%;
  height: 300px;
  background: blue;
}
    <form class="small">

</form>

<form class="big">

</form>
    Login or Signup to reply.
  2. 0

    I am no expert in bootstrap, however you may try this.

    <form id="plan" class="form-horizontal" method="post" action="#" th:Action="@{/plan}" th:object="${file}">
<div class="col-xs-3" style="background-color: lightgray">
</div></form>

    Instead of this.

    <div class="col-xs-3" style="background-color: lightgray">
<form id="plan" class="form-horizontal" method="post" action="#" th:Action="@{/plan}" th:object="${file}">
</form</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search