Geek Answers Handbook

How to limit datepicker for CSS inheritance associated with a table?

I have two CSS files related to a table and one css for datepicker. But patepicker gets css table properties. So my question is how to restrict the datapixer to access the CSS table.

+4
source share
2 answers

In your table file, use: not Selector to select all table elements except the Datepiker tab

exp:

 table:not(.Datepiker) {
    //table style here excep Datepiker
    }
 table:not(.Datepiker) tr {
    //table style here excep Datepiker
    }


  tablestyle.css
------------------
@charset "utf-8";
table:not(.ui-datepicker) {
font-family: Arial,sans-serif;
font-size: 8pt;
border: 1px solid black;
border-collapse:collapse;
border-spacing:5px;
}

table:not(.ui-datepicker-calendar) tr:nth-child(odd){
//background:#b8d1f3;
background:rgb(233,237,244);
}
table:not(.ui-datepicker-calendar) tr:nth-child(even){
//background:#dae5f4;   
background:rgb(211,220,232)
}
table:not(.ui-datepicker-calendar) th{
//background:#666;
background:rgb(92,133,179);
color:white;
font-weight: bold;
text-decoration: underline;
}
table:not(.ui-datepicker-calendar) td { 
padding: 5px; 
font-size: 9pt;
border: 1px solid green;
}
table:not(.ui-datepicker-calendar):hover { //outline: 2px dashed #0090D2;}

table:not(.ui-datepicker) input[type='text']{
width:120px;
}

}




tablestyleresponsive.css
----------------------------------
@media  only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)  {

    /* Force table to not be like tables anymore */
    table, thead, tbody, th, td, tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    table:not(.ui-datepicker-calendar) thead tr, th {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    table:not(.ui-datepicker-calendar) tr { border: 1px solid #ccc; }

    table:not(.ui-datepicker-calendar) td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    table:not(.ui-datepicker-calendar) td:before {          
        position: absolute;         
        //top: 4px;         
        left: 4px;
        //width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    /* Label the data*/
    #Phone td:nth-of-type(1):before { content: "Type"; }
    #Phone td:nth-of-type(2):before { content: "Country"; }
    #Phone td:nth-of-type(3):before { content: "Phone"; }
    #Phone td:nth-of-type(4):before { content: "Preferred"; }
    #Phone td:nth-of-type(4):before { content: "Add/Delete"; }

    #Major td:nth-of-type(1):before { content: "Preferred"; }
    #Major td:nth-of-type(2):before { content: "Major"; }
    #Major td:nth-of-type(3):before { content: "Concentration"; }
    #Major td:nth-of-type(4):before { content: "Status"; }

    #Education thead:nth-of-type(1):before { content: "#Educational Information"; }
    #Education td:nth-of-type(1):before { content: "School Code"; }
    #Education td:nth-of-type(2):before { content: "School Name"; }
    #Education td:nth-of-type(3):before { content: "High school Average"; }
    #Education td:nth-of-type(4):before { content: "GPA Type"; }
    #Education td:nth-of-type(5):before { content: "CGPA"; }
    #Education td:nth-of-type(6):before { content: "Accdemic Level"; }
    #Education td:nth-of-type(7):before { content: "Degree"; }
    #Education td:nth-of-type(8):before { content: "Degree Date"; }
    #Education td:nth-of-type(9):before { content: "Transcript Date"; }
    #Education td:nth-of-type(10):before { content: "Add/Delete"; }

    #Test td:nth-of-type(1):before { content: "Preference"; }
    #Test td:nth-of-type(2):before { content: "Major"; }
    #Test td:nth-of-type(3):before { content: "Concentration"; }
    #Test td:nth-of-type(4):before { content: "Status"; }
    #Test td:nth-of-type(5):before { content: "Add/Delete"; }

    #Employee td:nth-of-type(1):before { content: "Job_title"; }
    #Employee td:nth-of-type(2):before { content: "Employer"; }
    #Employee td:nth-of-type(3):before { content: "From"; }
    #Employee td:nth-of-type(4):before { content: "To"; }
    #Employee td:nth-of-type(5):before { content: "Add/Delete"; }

    #Emergency_Contact td:nth-of-type(1):before { content: "Relationship"; }
    #Emergency_Contact td:nth-of-type(2):before { content: "First Name"; }
    #Emergency_Contact td:nth-of-type(3):before { content: "Last Name"; }
    #Emergency_Contact td:nth-of-type(4):before { content: "Phone"; }
    #Emergency_Contact td:nth-of-type(5):before { content: "Email Id"; }
    #Emergency_Contact td:nth-of-type(6):before { content: "Consent"; }
    #Emergency_Contact td:nth-of-type(7):before { content: "Working/Student"; }
    #Emergency_Contact td:nth-of-type(8):before { content: "Employee/Student ID"; }
    #Emergency_Contact td:nth-of-type(9):before { content: "Add/Delete"; }

    #Personal_document td:nth-of-type(1):before { content: "Attachment type"; }
    #Personal_document td:nth-of-type(2):before { content: "Attached File"; }
    #Personal_document td:nth-of-type(3):before { content: "View"; }
    #Personal_document td:nth-of-type(4):before { content: "Add Attachment"; }
    #Personal_document td:nth-of-type(5):before { content: "Accepted"; }
    #Personal_document td:nth-of-type(6):before { content: "Rejection Reason"; }

    #Accademic_Transcripts td:nth-of-type(1):before { content: "Attached File"; }
    #Accademic_Transcripts td:nth-of-type(2):before { content: "View"; }
    #Accademic_Transcripts td:nth-of-type(3):before { content: "Add Attachment"; }
    #Accademic_Transcripts td:nth-of-type(4):before { content: "Accepted"; }
    #Accademic_Transcripts td:nth-of-type(5):before { content: "Rejection Reason"; }
    #Accademic_Transcripts td:nth-of-type(6):before { content: "Add/Delete"; }

    #Accademic_Documents td:nth-of-type(1):before { content: "Attached File"; }
    #Accademic_Documents td:nth-of-type(2):before { content: "View"; }
    #Accademic_Documents td:nth-of-type(3):before { content: "Add Attachment"; }
    #Accademic_Documents td:nth-of-type(4):before { content: "Accepted"; }
    #Accademic_Documents td:nth-of-type(5):before { content: "Rejection Reason"; }
    #Accademic_Documents td:nth-of-type(6):before { content: "Add/Delete"; }

    #Other_Document td:nth-of-type(1):before { content: "Attached File"; }
    #Other_Document td:nth-of-type(2):before { content: "View"; }
    #Other_Document td:nth-of-type(3):before { content: "Add Attachment"; }
    #Other_Document td:nth-of-type(4):before { content: "Accepted"; }
    #Other_Document td:nth-of-type(5):before { content: "Rejection Reason"; }
    #Other_Document td:nth-of-type(6):before { content: "Add/Delete"; }

}

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    body {
        padding: 0;
        margin: 0;
        width: 320px; }
    }

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    body {
        //width: 495px;
    }
}



#content {
width: auto;
float: left;
}

#middle {
width: auto; /* Account for margins + border values */
float: left;
}

#sidebar {
width: auto;
float: left;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
	<title>Website</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="CSS/custom_style.css">
    <link rel="stylesheet" type="text/css" href="CSS/tableStyle.css">
    <link rel="stylesheet" type="text/css" href="CSS/tableStyleResponsive.css">
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">    
    <!-- Required For date picker -->   
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>   
    
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
	
    <!-- Required For Validation--> 
    <script src="JS/Basic.validation.js"></script> 
    
    <!-- Required For Table Responsive-->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>   
    <!-- Date Picker -->
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
	
	<!-- Date Picker JS And CSS  -->
	<style>
    #ui-datepicker-div { font-size: 12px; } 
    #datepicker{}
    </style>
    <script>
    $(function() {
	$("#dob").datepicker({
	   //showOn: both - datepicker will appear clicking the input box as well as the calendar icon
	   //showOn: button - datepicker will appear only on clicking the calendar icon
	   showOn: 'button',
	   //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
	   buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
	   buttonImageOnly: true,
	   changeMonth: true,
	   changeYear: true,
	   duration: 'fast',
	   dateFormat: 'dd-mm-yy'
	   });
	   $("#Issue_date").datepicker({
	   //showOn: both - datepicker will appear clicking the input box as well as the calendar icon
	   //showOn: button - datepicker will appear only on clicking the calendar icon
	   showOn: 'button',
	   //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
	   buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
	   buttonImageOnly: true,
	   changeMonth: true,
	   changeYear: true,
	   duration: 'fast',
	   dateFormat: 'dd-mm-yy'
	   });
	   $("#Passport_expiry_date").datepicker({
	   //showOn: both - datepicker will appear clicking the input box as well as the calendar icon
	   //showOn: button - datepicker will appear only on clicking the calendar icon
	   showOn: 'button',
	   //you can use your local path also eg. buttonImage: 'images/x_office_calendar.png'
	   buttonImage: 'http://theonlytutorials.com/demo/x_office_calendar.png',
	   buttonImageOnly: true,
	   changeMonth: true,
	   changeYear: true,
	   duration: 'fast',
	   dateFormat: 'dd-mm-yy'
	   });

    });
  </script>	
  <!--<script>
	$(document).ready(function() {
	$("input.add").live('click', function() {
		var $tr = $(this).closest('tr');
		var $clone = $tr.clone();
		$clone.find(':text').val('');
		$tr.after($clone);
    });
	$("input.delete").live('click',function(){
	        if(document.getElementById('phone').getElementsByTagName("tr").length!=3);{
	        var $tr = $(this).closest('tr');		
			$tr.remove();	
			return false;
			}		
	});
});   
</script> -->
</head>
	<!-- Body Started-->
    <body>
    <form name="Basicinfo" id="Basicinfo" method="post" action="Basic.html">
    <!-- Start Header -->
  	<p><strong>Admission Application - Basic Info</strong></p>           
    <div width="100%" height="5%" name="Applnbr" name="Applnbr">Application Nbr &nbsp;&nbsp;&nbsp;<span id="Application_Id">#NEW</span>
	<input type="hidden" name="Appnbr" id="Appnbr" value=""/>
    </div>
    <!-- End Header-->
    <!-- Strat of First Div-->
	<div class="columnsContainer">
	    <!-- Left Div Start-->
	    <!-- Other Information Field Starts-->
	  	<div class="leftColumn">
	  		<div>
            	<label id="doblbl" style="margin-left:10px;">Date Of Birth:<label style="margin-left:50px;"></label>
            		<input id="dob" name="dob" type="text" value="">
            	</label>
        	</div></br>
       		<div>          
            	<label id="MMFnamelbl" style="margin-left:10px;">Mother Maiden Name:</br>
            		<label style="margin-left:10px;">*First name:</label><label style="margin-left:50px;"></label>
            		<input id="MMFname" name="MMFname" type="text" value=""  style="margin-left:10px;" >
            	</label>
        	</div></br>
        	<div>
            	<label id="MMLnamelbl" style="margin-left:10px;">*Last name:<label style="margin-left:50px;"></label>
            		<input id="MMLname" name="MMLname" type="text" value=""  style="margin-left:10px;" >
            	</label>
        	</div></br>
        	<div>
            	<label id="passport_numberlbl" style="margin-left:10px;">*Passport Number:<label style="margin-left:10px;"></label>
            		<input id="passport_number" name="passport_number" type="text" value=""  style="margin-left:10px;" >
            	</label>
            </div></br>
            <div>
            	<label id="Place_of_Issuelbl" style="margin-left:10px;">*Place of issue:<label style="margin-left:30px;"></label>
            		<input id="Place_of_Issue" name="Place_of_Issue" type="text" value=""  style="margin-left:10px;" >
            	</label>
            </div></br>
            <div>
                <label id="Issue_datelbl" style="margin-left:10px;">*Issue Date:<label style="margin-left:50px;"></label>
            		<input id="Issue_date" name="Issue_date" type="text" value=""  style="margin-left:10px;margin-top:10px;">
            	</label>
            </div></br>
            <div>
                <label id="Passport_expiry_datelbl" style="margin-left:10px;">*Expiry:<label style="margin-left:70px;"></label>
            		<input id="Passport_expiry_date" name="Passport_expiry_date" type="text" value=""  style="margin-left:10px;">
            	</label>
           	</div>
          </div>   
          <div class="rightColumn" style="width:50%">*Gender:
            <input checked="checked" name="Gender" type="radio" value="M" />Male
            <input name="Gender" type="radio" value="F" />Female
            </br> </br>*Nationality:
            <select name="Nationality" id="Nationality">
           	 	<option value="UAE">UAE</option>
             	<option value="ARE" selected>ARE</option>
				<option value="USA">USA</option>
				<option value="IND">IND</option>
            </select>
               </br></br>*Country Of Residency:
            	<select name="Residency_country" id="Residency_country" onclick ="disableNational_ID();">
                    <option selected="selected" value="UAE">UAE</option>
                    <option value="ARE">ARE</option>
                    <option value="USA">USA</option>
					<option value="IND">IND</option>
                </select>
              </br></br>*National Id:
 			<!--  <label id="Emirateslbl" style="margin-left:70px;">*National Id:</label> -->
              <input id="Emirates_Id" name="Emirates_Id" type="text" value=""  style="margin-left:10px;" >
              </br></br>*Marital Status:
            	<select name="marital_status" id="marital_status">
				<!-- Dropdown will be filled from Xlatitem table -->
                     :%bind(:3);
                </select>            
            </br> </br> *Regional Preference:
            	<select name="religious" id="religious">
				<!-- Dropdown will be filled from Religious table -->
                     :%bind(:4);
                </select>
          </div>
        <!-- Phone Entry table ends-->
		<table  id="phone" width="100%" name="phone">
			<tr>
				<td colspan="5" bgcolor="#5C85B3">Phone</td>
			</tr>
			<tr>
				<th>Type</td>
				<th>Country Code</th>
				<th>*Phone</th>
				<th>Preferred</th>
				<th>Add/Delete</th>
			</tr>
			<tr>
				<td>
				<select name="phntype" id="phntype" style="width:50%">
				<!-- Phone Types -->
				%bind(:6);
				</select>
				</td>
				<td>
				<input type="text" name="cntrycde" id="cntrycde" value="">
				</td>
				<td>
				<input type="text" name="phone_no" id="phone_no" value="">
				</td>
				<td>
				<input type="hidden" name="prefferd" value="NO">
				<input type="checkbox" name="preferred" id="preferred" value="N" onchange ="changeCheckBox();">
				</td>
				<td>
    				<input type="button" value="+" class="add">
     				<input type="button" value="-" class="delete">
    			</td>
			</tr>
		</table>
		<p></p>
		<!-- Phone Entry table ends-->
		<!-- Footer Of The Page-->
	  	<footer>*How do you Learn about side:</label> 
	    	<select name="source" id="source">
				<option selected="selected" value="internet">Internet</option>
				<option value="Media">Media</option>
				<option value="Newspaper">Newspaper</option>
			</select>
				<input type="Submit" value="Submit And Next" style="float:right">
		</footer>
		<!-- Footer Ends-->
	</form>
  </body>
</html>
Run codeHide result
0
source

Why don't you use a table with an identifier selector.

table#phone {
    /* your css styling code here */
}
0
source

More articles:


All Articles