Tech Forum Network

Programming, technical solutions and hot scripts
Home » TechQns » Displaying form elements inline

Displaying form elements inline

September 13, 2014 Posted by forumadmin under TechQns
Comments off

I am following the tutorial from http://www.sitepoint.com/building-list-jquery-local-storage/
to build a todo list and i want to display for elements in the same line .At the moment form elements are stacked over each other and displayed vertically but i want them to be displayed vertically .I ultimately want to achieve a resilt that looks like this:

enter image description here

Here is the CSS Code

.task-list{
    width: 250px;
    float: left;
    margin: 0 5px;
    background-color: #e3e3e3;
    min-height: 240px;
    border-radius: 10px;
    padding-bottom: 15px;

}

.task-list input, .task-list textarea{
    width: 240px;
    margin: 1px 5px;


}

.task-list input{
    height: 30px;

}

.todo-task{
    border-radius: 5px;
    background-color: #fff;
    width: 230px;
    margin: 5px;
    padding: 5px;
}

.task-list input[type="button"]{
    width: 100px;
    margin: 5px;

}

.todo-task > .task-header{
    font-weight: bold;
}

.todo-task > .task-date{
    font-size: small;
    font-style: italic;
}

.todo-task > .task-description{
    font-size: smaller;
}

Here is the html code

<div class="task-list">
  <h3>Add a task</h3>
  <form id="todo-form">
    <input type="text" placeholder="Task Name" />
    <textarea placeholder="Description"></textarea>
    <input type="text" id="datepicker" placeholder="Due (dd/mm/yyyy)" />
    <input type="button" class="btn btn-primary" value="Add Task" onclick="todo.add();" />
  </form>

  <input type="button" class="btn btn-primary" value="Clear Data" onclick="todo.clear();" />
  <div id="delete-div">
    Drag Here to Delete
  </div>
</div>

<div class="task-list task-container" id="pending">
  <h3>Pending</h3>
  <!--<div class="todo-task">
  <div class="task-header">Sample Header</div>
  <div class="task-date">25/06/1992</div>
  <div class="task-description">Lorem Ipsum Dolor Sit Amet</div>
  </div>-->
</div>

 

Asked By – Atif        Read Answers    

More Related Questions

  • Resize parent element withy dynamic content I have a styled div with an as h1 its only child element. The text of the h1 changes dynamically via javascript. When new text is inserted into the h1 tag the height of that h1 is […]
  • videoBG.js plugin resizing not working Currently I am trying to put a video in a division.. I am closely following the demo here.. http://syddev.com/jquery.videoBG/demo_div.html and also using this […]
  • Height equal to dynamic width (CSS fluid layout) Is it possible to set same height as width (ratio 1:1)? Example +----------+ | body | | 1:3 | | | | +------+ | | | div | | | | 1:1 | | | +------+ | | | | […]
  • Is there a way to alter the form action attribute with CSS only, or is there an alternative to JavaScript and server-side script? First of all, I don’t have access to the forms mark-up or server-side script due to being on a proprietary system. I did remove attributes with jQuery , and allow for my user action to […]
  • image width 100 % when the height larger than the width with JQuery I'm trying to make a wordpress theme ,so my code is : <div class="post-thumb"> <?php echo get_the_post_thumbnail(); ?> </div> i would when the height is bigger than […]
  • area map onclick sumbit not working Hi I have the code below its not working ( I cant click on the area map and its not submitting the form): <form method="post" action="" style="margin:0; padding:0"> <input […]
  • Form inline Bootstrap with select and button WHMCS Domain Checker integration I am trying to display a domain search field, with the select drop down menu and a search button. I am hoping someone can help me figure this out, it's displaying differently in all 3 […]
  • Dynamically resize textarea width and height to contain text I have a div that contains a textarea element. The div is fixed in size, but scroll bars will show if enough text is entered. Currently, the textarea height dynamically grows and shrinks […]
  • How to show two radio button next to each other in html? I have my html form like this as shown in this jsfiddle. If you click PROCESS button then it will show you a form which has two radio button. And they all are coming vertically for now, […]
  • Marquee text – Getting length of text in pixels I am trying to get the length of a news feed that scrolls from one side to the other on a page. I need to calculate the width of the text in pixels to determine when to re-position at the […]
0
  
Email
Tags: css, forms, html, javascript, jquery

Comments are closed.

« How do you delegate events in hammer.js version 2.0?
Jquery menu not show sub ul ifor mvc partial view »
Tech Forum Network powered by WordPress and The Clear Line Theme