Skip to content
This repository has been archived by the owner on Mar 14, 2023. It is now read-only.

Html response is not getting as expected. #91

Open
Sunsiha opened this issue Sep 29, 2022 · 0 comments
Open

Html response is not getting as expected. #91

Sunsiha opened this issue Sep 29, 2022 · 0 comments

Comments

@Sunsiha
Copy link

Sunsiha commented Sep 29, 2022

Am getting a response as html content. So when am trying to load that HTML content few things are missing; like radio button, checkbox, input type etc.
The following html i tried;


	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>form</title> 
	
	<meta name="viewport" content="width=device-width, initial-scale=1.0">


<style>
body{
  font-family: "regularFont" !important;
}
.form-input {
   background: #EFF0F6; 
    width: 97%;
    font: inherit;
    letter-spacing: inherit;
    color: currentColor;
    padding: 4px 0 5px;
    border: 0;
    box-sizing: content-box;
    height: 1.4375em;
    margin: 0;
    border-radius: 5px;
}
.table-form-input{
background: #EFF0F6; 
 border: none;
 height: 5vh;
 width: 20%;
 padding: 5px 15px;
 margin: 10px 0;
}
.primary-color{
	color: #262626
}
.secondary-color{
	color: #696871;
}
table{
  border-spacing: 0;
}
table, tr, th {
  text-align: left;
  font-size: 16px;
  color: #4F4F4F;
  font-weight: normal;
  padding: 15px 0;
}
table, tr, td {
  font-size: 14px;
  color: #1F1F1F;
 padding: 15px 10px 15px 10px;
}
.container {
  display: flex;
  position: relative;
  padding:0px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  justify-content: center;
}

/* Hide the browser's default radio button */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
  position: absolute;
  /*top: 0;
  left: 0; */
  height: 15px;
  width: 15px;
  border: 2px solid #828282;
  border-radius: 50%;
  align-items: center;
    text-align: center;
    justify-content: center;
    display: block;
  
}


/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #ffffff;
  border: 1px solid #445BC7;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
       top: 2px;
    left: 2px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #445BC7;
}


/* checkbox */
.container-checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container-checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark-check {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 18px;
  border: 1px solid #1f1f1f;
  border-radius: 5px;
  margin-top: 6px;
}


/* When the checkbox is checked, add a blue background */
.container-checkbox input:checked ~ .checkmark-check {
  background-color: #445BC7;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-check:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container-checkbox input:checked ~ .checkmark-check:after {
  display: block;
}

/* Style the checkmark/indicator */
.container-checkbox .checkmark-check:after {
 left: 6px;
    top: 3px;
    width: 4px;
    height: 8px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

tr:nth-child(even) {
  background-color:rgba(105, 104, 113, 0.07);
}

td:nth-child(1) {
  width: 55%;
}

.text-center{
text-align: center;
}

.align-item-center-table{
  text-align: center;
    justify-content: center;
    vertical-align: middle;
}

.display-flex{
  display: flex;
}

</style>


<h3 style="margin-top: 0px;margin-bottom: 10px; font-size: 24px;">Administrative Assistant Skills Checklist</h3>

<form id="skillChecklistForm">
	<div style="display: flex;">
		<div style="padding: 10px; padding-left: 0;">
			 <label style="color: #1f1f1f;font-size: 14px;" for="fname">First Name</label>
       <input class="form-input" type="text" name="fname" value="Sunisha"><br>
		</div>
 
<div style="padding: 10px;">
	 <label style="color: #1f1f1f;font-size: 14px;" for="lname">Last Name</label>
   <input class="form-input" type="text" name="lname" value="Guptan"><br>
</div>

 
<div style="padding: 10px;">
	  <label style="color: #1f1f1f;font-size: 14px;" for="cdate">Date</label>
    <input class="form-input" style="width:90%" type="text" name="cdate" value="Jul 12, 2022"><br>
</div>
  
</div>

<div style="display: flex;">
	<div style="padding: 10px;  padding-left: 0;">
		<p style="font-size: 12px; font-weight: bold">
			Key:
		</p>
	</div>
	<div style="padding: 10px;">
		<p style="font-size: 12px;">1	= No Experience</p>
		<p style="font-size: 12px;">2	= Need Training</p>
		<p style="font-size: 12px;">3	= Able to perform with supervision</p>
		<p style="font-size: 12px;">4	= Able to perform independently</p>
	</div>
</div>

<div>
	<p class="primary-color" style="border-bottom: 1px solid rgba(105, 104, 113, 0.2);font-weight: bold; font-size: 16px; padding: 10px 0;">Administration</p>
	</div>

	<div>
		<table style="width:100%;  padding-left: 0;">
  <tbody><tr>
    <th>Questions</th>
    <th class="align-item-center-table">1</th>
    <th class="align-item-center-table">2</th>
    <th class="align-item-center-table">3</th>
    <th class="align-item-center-table">4</th>
  </tr>
  <tr>
    <td>A</td>
    <td><label class="container"><input type="radio" name="q1" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="2" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q1" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>B</td>
    <td><label class="container"><input type="radio" name="q2" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="2"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q2" value="4"><span class="checkmark"></span></label></td>
  </tr>

   <tr>
    <td>C</td>
    <td><label class="container"><input type="radio" name="q3" value="1" checked="true"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="2"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="3"><span class="checkmark"></span></label></td>

    <td><label class="container"><input type="radio" name="q3" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>D</td>
    <td><label class="container"><input type="radio" name="q4" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q4" value="4"><span class="checkmark"></span></label></td>
  </tr>
  
  <tr>
    <td>E</td>
    <td><label class="container"><input type="radio" name="q5" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q5" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>F</td>
    <td><label class="container"><input type="radio" name="q6" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q6" value="4"><span class="checkmark"></span></label></td>
  </tr>


</tbody></table>
	</div>


	<div>
	<p class="primary-color" style="border-bottom: 1px solid rgba(105, 104, 113, 0.2);font-weight: bold; padding: 10px 0;">Reception/Customer Service</p>
	</div>

	<div>
		<table style="width:100%;  padding-left: 0;">
  <tbody><tr>
    <th style="font-size: 16px;">Questions</th>
    <th class="align-item-center-table">1</th>
    <th class="align-item-center-table">2</th>
    <th class="align-item-center-table">3</th>
    <th class="align-item-center-table">4</th>
  </tr>
  <tr>
    <td>Multi-Line Phones </td>
    <td><label class="container"><input type="radio" name="q14" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q14" value="4"><span class="checkmark"></span></label></td>
  </tr>

  <tr>
    <td>Customer Service  </td>
    <td><label class="container"><input type="radio" name="q15" value="1" checked="true"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="2"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="3"><span class="checkmark"></span></label></td>
    <td><label class="container"><input type="radio" name="q15" value="4"><span class="checkmark"></span></label></td>
  </tr>


</tbody></table>


</form>

1

2

Expected Output:

3'

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant