?

Can anyone please make proper  alignment of  HTML elements in the form(file attached) by applying CSS to it??

Posted on 2017-09-19
17
Low Priority
?
98 Views
Last Modified: 2017-09-27
The problem i am having in alignment of input and select fields. html and css code is attached. I am having hard time for resolving this as i am beginner in css learning.

Select fields for choosing time       from    [hour] [minutes]              to     [hour][minutes]  should be easily understood by user. right now it is not so.
Page is divided into two parts  - > left and right side.  left side's width is 60% and right side's is 40 %.

Form is in the left side. (which is to be consider)
select.php
capture18.PNG
0
Comment
Question by:v s
  • 9
  • 5
  • 3
17 Comments
 

Expert Comment

by:Md Zafar
ID: 42301192
please use either table or div don't mix both of them.. better option use bootstrap for responsive designing.
please see this attachment and add PHP code with this
Sample.html
0
 
LVL 14

Expert Comment

by:Leonidas Dosas
ID: 42301213
Check this more simplest solution.I use datetimepicker plugin.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<link rel="stylesheet" href="css/jquery.datetimepicker.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="js/jquery.datetimepicker.full.min.js"></script>
 <style>
               table{ 
                    font-family: arial, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    align-self: center;
                    margin-top: 10em;
                    overflow: hidden;
                    
                    }

           td,th{
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                 }

tr:nth-child(even) {
                     background-color: #ddd;
                   }
             
                   div.booking
                  {
                     background-color:peachpuff;
                     size:A4;
                     width:70%;
                     border:1px solid powderblue;
                     overflow: hidden;
                     margin-left:50px;
                     margin-top: 200px;
                     margin-right: 200px;
                     margin-bottom: 200px;
                     align-self:center;
                     padding:1em;
                    }
                    
                    div.main{
                              background-color:  graytext;
                            }
                   
                    fieldset{
                        display: table;
                    } 
                    fieldset p   {
                                  display: table-row;
                                 }
                                 
                                 
                    fieldset input,
                    fieldset select,
                    fieldset label
                                  {
                                      display: table-cell;
                                      margin: 3px;
                                  }
                   
                                  fielset label {
                                                 text-align: right;
                                                }
                                               
                                               fieldset input,select.effect
                                               
                                               {
                                                   -moz-box-sizing: content-box;
                                                    box-sizing: content-box;
                                                   -webkit-box-sizing:content-box; 

                                               }
                                               
                                               
                                               select{
                                                   
                                                     }
                   
                   
                   
        </style> 
</head>
<body>
  <div style="width:100%" class="main">  <!--- main div -->
            Header
            <div style="float: left; width:60%" >
                <div class="booking">
                   <form action="" method="post"   enctype="multipart/form-data" onsubmit="return confirm('Do you really want to confirm the booking?');">
                      
                           <fieldset>
                           <p>  
                               <label> Name</label>
               <input type="text" name="name"><br><br>
                           </p>

                     <p>   
                               
                            <label> Select Room</label>
                            <select name="select_room" >
                        
                            <option value="-1">Select</option>
                        
                         
                            </select>
                    </p>
            
           
            <label>Event </label>
            <input type="text" name="event">  <br><br>              
           

              <input type="text" id="date_1">         
                       
            
            
            
            
            
            

             <div style="text-align: left">
                <input type="submit"  name="Book" value="Book" style="width: 60px; height: 35px">  
            </div>
                
                                                      
                
                
                       </fieldset>
                    </form>
            <div style="float: right; width:40%" >
                        
            </div>
        
          
                               </div>
                               </div>
                               </div>
<script>
$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({
    onSelectDate:function(){
  console.log($('#date_1').val());
}
});      
</script> 
</body>
</html>

Open in new window


---------.JPG
0
 

Author Comment

by:v s
ID: 42302803
hello @Leonidas Dosas
Thank you for this help. I want to ask one thing that the value of datetime we get from datetime picker will be of which type. datetime or timestamp??

 will there be any need to convert it before storing it into the database (I want to store it as "datetime" in mysql )
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
LVL 14

Expert Comment

by:Leonidas Dosas
ID: 42302819
The val that return the function is a string.To convert it to unixtime then replace the script to this:
$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({    
    onSelectDate:function(){
    var dateTime=$('#date_1').val();
    dateTime=Math.round(new Date(dateTime).getTime()/1000);
    alert(dateTime);
}
}); 

Open in new window

---------.JPG
0
 

Author Comment

by:v s
ID: 42302824
@Leonidas Dosas
okay....
 how to access that datetime value upon submitting form. as name property on input tag is not defined

<input type="text" id="date_1">        

  $datetime= $_POST['date_1'];   ???? is it right or have to define name property
0
 
LVL 14

Expert Comment

by:Leonidas Dosas
ID: 42302865
Do you want to send that value to a php file?
0
 

Author Comment

by:v s
ID: 42302870
yes
0
 
LVL 14

Expert Comment

by:Leonidas Dosas
ID: 42302876
Then use the $,post Jquery   method . Replace the script with that:

$.datetimepicker.setLocale('en');
$('#date_1').datetimepicker({    
    onSelectDate:function(){
    var dateTime=$('#date_1').val();
    dateTime=Math.round(new Date(dateTime).getTime()/1000);
    $.post('myphpfile.php',{data:dateTime},function(res){
        console.log(res)
    });
}
});   

Open in new window

And the myphpfile.php is that:
<?php
if(isset($_POST['data'])){
    $datetime=$_POST['data'];
    echo json_encode($datetime);
}
?>

Open in new window


In the first page if you open the console when you select a datetime you have these string returns:
---------.JPG
Now in myphpfile.php you can manipulate the $datetime variable as you want (to send it into database etc..)
0
 

Author Comment

by:v s
ID: 42304519
@Leonidas Dosas

these jquery files are not working. these files contain errors. I have attached an image showing output.
Also attaching code
jquery.PNG

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
       
       <title>page division of html</title>
       <link rel="stylesheet" href="jquery.datetimepicker.min.css" />
       <script src="jquery.js"></script>
       <script src="jquery.datetimepicker.full.min.js"></script>
           <style>
               table{ 
                    font-family: arial, sans-serif;
                    border-collapse: collapse;
                    width: 100%;
                    align-self: center;
                    margin-top: 10em;
                    overflow: hidden;
                    
                    }

           td,th{
                  border: 1px solid #dddddd;
                  text-align: left;
                  padding: 8px;
                 }

tr:nth-child(even) {
                     background-color: #ddd;
                   }
             
                   div.booking
                  {
                     background-color:peachpuff;
                     size:A4;
                     width:70%;
                     border:1px solid powderblue;
                     overflow: hidden;
                     margin-left:50px;
                     margin-top: 200px;
                     margin-right: 200px;
                     margin-bottom: 200px;
                     align-self:center;
                     padding:1em;
                    }
                    
                    div.main{
                              background-color:  graytext;
                            }
                   
                    fieldset{
                        display: table;
                    } 
                    fieldset p   {
                                  display: table-row;
                                 }
                                 
                                 
                    fieldset input,
                    fieldset select,
                    fieldset label
                                  {
                                      display: table-cell;
                                      margin: 3px;
                                  }
                   
                                  fielset label {
                                                 text-align: right;
                                                }
                                               
                                               fieldset input,select.effect
                                               
                                               {
                                                   -moz-box-sizing: content-box;
                                                    box-sizing: content-box;
                                                   -webkit-box-sizing:content-box; 

                                               }
                                               
                                                                                                  
                                                 
                                         
                   
                   
        </style> 
    </head>
    <body>
        <div style="width:100%" class="main">  <!--- main div -->
            Header
            <div style="float: left; width:60%" >
                <div class="booking">
                   <form action="" method="post"   enctype="multipart/form-data" onsubmit="return confirm('Do you really want to confirm the booking?');">
                       <fieldset>
                           <p>  
                               <label> Name</label>
               <input type="text" name="name"><br><br>
                           </p>
             <?php  
        include 'config.php';
        $option="";
         $sql= mysqli_query($conn,"SELECT * FROM spacemaster");
         //$row= mysqli_num_rows($sql);
           
      while($row = mysqli_fetch_array($sql))
{
$option .= '<option value = "'.$row['Id'].'"     name = "'.$row['RoomName'].'"        >'.$row['RoomName'].'</option>';
}
         
?>
                               <p>   
                               
                               <label> Select Room</label>
                            <select name="select_room" >
                        
                       <option value="-1">Select</option>
                         <?php 
                          echo $option;
                            ?>
                         
                         </select>
                           </p>
            
            <p>
                <label>Event </label>
            <input type="text" name="event">  <br><br>              
            <p>
            <p>
                
                 <input type="text" id="date_1"> 
                
                
                       </fieldset>
            
            
            
            
            
            <br><br>

             <div style="text-align: left">
                <input type="submit"  name="Book" value="Book" style="width: 60px; height: 35px">  
            </div>
                
                </div>
            </div>  
                
         
                
                
                
            <div style="float: right; width:40%" >
                
            </div>
                           
            <script>
                $.datetimepicker.setLocale('en');
                $('#date_1').datetimepicker({    
                onSelectDate:function(){
                var dateTime=$('#date_1').val();
                dateTime=Math.round(new Date(dateTime).getTime()/1000);
                $.post('booking.php',{data:dateTime},function(res){
                console.log(res);
    });
}
});   
            
            </script>

Open in new window

0
 

Author Comment

by:v s
ID: 42304532
@Md Zafar
i am using netbeans as coding environment. i have not use bootstrap yet in netbeans. is there any need to add plugin for that ??

right now following output is showing (IMAGE ATTACHED)

Errors showing in code (no classes found)


error.PNG
bootstrap.PNG
0
 
LVL 14

Expert Comment

by:Leonidas Dosas
ID: 42304597
Use the src that I post to you:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

Open in new window

What errors do you have in console?
To help you understand when you select a datetime in the input via plugin the value "transfer" via POST method into your php file that you can fetch it.Then you can add this value into your database as you know.
0
 

Author Comment

by:v s
ID: 42304609
i have used that also. did not work.
then what i did is create a new js file copied that code from that url in that file then i have used:- <script  src="jquery.js"></script>
0
 

Author Comment

by:v s
ID: 42304621
one more thing error is in the last lines of the file  "global variable define is not declared"


if ( typeof define === "function" && define.amd ) {
      define( "jquery", [], function() {
            return jQuery;
      } );
}
0
 

Expert Comment

by:Md Zafar
ID: 42304849
Hi ... i am send you full of code all jquery bootstrat and css file plz find the attachment .....feel free to contact for any issu
Sample-Page.zip
0
 

Expert Comment

by:Md Zafar
ID: 42304854
no issue what environment u are using for development .. but plz check how i am using it or send me your page ..i will design for you
0
 

Author Comment

by:v s
ID: 42307297
@Md Zafar
I am using netbeans. i have developed an application of meeting rooms booking.
i have an issue with just designing. I have been through your page you designed. Its quite good. Now i want to integrate my coding with your page designed.

the format of datetime get from datetime picker you have used should be same as $bookingDate and $currentDate

In My project right now i am considering booking for only time interval within one day.
 i have compared datetime together in mycode.

code has been attached.You can go through my code and design page accordingly.
booking.php
0
 

Author Comment

by:v s
ID: 42310345
@Md Zafar

waiting for your response
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Join & Write a Comment

Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
These seven tips can help you create an extraordinary website, one that captivates audiences and has them wanting to return regularly for more. Keep reading to find out what your site is missing and what you need to add!
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Suggested Courses

589 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question