Layout for table using Bootstrap 4.2 not aligning as expected - layout

In the process of moving from Bootstrap 3 to Bootstrap 4.2. I have a table inside a Ajax modal screen. Here is the code snippet:
<div class="card-body">
<div class="row">
<table class="table table-hover table-responsive-lg">
<thead>
<tr>
<td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
<td class="text-center col-sm-3"><strong>QTY</strong></td>
<td class="text-center col-sm-3"><strong>RATE</strong></td>
<td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center ">
<asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</tbody>
</table>
</div>
</div>
In my system the columns showing QTY is too small to see the full number, even the number 1.
UPDATE
I changed the headers to col-sm-4 and the results are much the same. Here is an image of the outcome:
UPDATE 2
Suggested adding ROW class to the <tr> results in:


You can try adding class="row" to each tr instead of to the outside div
Example:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css">
</head>
<body>
<div style="width: 572px;">
<div class="card-body">
<div class="">
<table class="table table-hover table-responsive-lg">
<thead>
<tr class="row">
<td class="text-center col-sm-3"><strong>ACTIVITY</strong></td>
<td class="text-center col-sm-3"><strong>QTY</strong></td>
<td class="text-center col-sm-3"><strong>RATE</strong></td>
<td class="text-center col-sm-3"><strong>AMOUNT</strong></td>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-sm-3 text-center "><asp:Label ID="Label1" runat="server" Text="Closing Service" CssClass="form-con"></asp:Label></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_QTY" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_Rate" runat="server" CssClass="form-control"></asp:TextBox></td>
<td class="text-center col-sm-3">
<asp:TextBox ID="txtClosing_Total" runat="server" CssClass="form-control" ClientIDMode="Static"></asp:TextBox></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>


I wanted to close this out with a solution that worked for me. It was simple to fix. In the <thead> section of the table I removed the col-sm-3 tag and the table behaved as expected.
Thanks everyone!

Related

I used Python Selenium to choose a "Year" from the dropdown box, clicked "search," and it apparently worked. But the data says otherwise

There is a page with tables of statistics I'm trying to pull.
The page has the default year as 2020, with a dropdown box to select different years. I wrote this code to select 2009.
from selenium import webdriver as wd
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from pandas.io.html import read_html
from selenium.webdriver.support.ui import Select
import numpy as np
import re
import pandas as pd
driver=wd.Chrome()
driver.implicitly_wait(10)
driver.get('https://www.cpbl.com.tw/standings/history')
select = Select(driver.find_element_by_id('Year'))
# select by visible text
select.select_by_visible_text('2009')
button = driver.find_elements_by_xpath("//input[#value='查詢']")[0]
button.click()
main=driver.find_elements_by_xpath('//*[(#id = "PageListContainer")]')[0]
main_att=main.get_attribute('innerHTML')
tab=pd.read_html(main_att)
I purposely didn't say driver.close() to leave the browser open, so I can look at it, and apparently the selection of 2009 worked. The browser had tables for 2009. However, the data my code pulled was still from the default year (2020). I want data from 2009. Anyone know why?
I am using Python 3.7 and Spyder 4.0.1

To select 2009 from the html-select and extract the innerHTML of the PageListContainer you need to induce WebDriverWait for the visibility_of_element_located() and you can use either of the following Locator Strategies:
Code Block:
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.support.ui import Select
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.common.by import By
from selenium.webdriver.support import expected_conditions as EC
driver.get("https://www.cpbl.com.tw/standings/history")
Select(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.CSS_SELECTOR, "select#Year")))).select_by_visible_text("2009")
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "//input[#value='查詢']"))).click()
print(WebDriverWait(driver, 20).until(EC.visibility_of_element_located((By.XPATH, "//div[#id = 'PageListContainer']"))).get_attribute("innerHTML"))
Console Output:
<!--上半季戰績-->
<div class="RecordTableWrap">
<div class="record_table_caption">上半季戰績</div>
<div class="record_table_swipe_guide" style="display: none;">
<div class="desktop"></div>
<div class="mobile"></div>
</div>
<div class="record_table_scroll_ctrl" style="display: none;">
</div>
<div class="RecordTableOuter">
<div class="RecordTable">
<table>
<tbody><tr>
<th class="sticky">
<div class="sticky_wrap">
<div class="rank">排名</div>
<div class="team-w-trophy">球隊</div>
</div>
</th>
<th class="num">出賽數</th>
<th class="num">勝-和-敗</th>
<th class="num">勝率</th>
<th class="num">勝差</th>
<th class="num">中信兄弟</th>
<th class="num">樂天桃猿</th>
<th class="num">統一7-ELEVEn獅</th>
<th class="num">富邦悍將</th>
<th class="num">主場戰績</th>
<th class="num">客場戰績</th>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">1</div>
<div class="team-w-trophy">
中信兄弟
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">37-0-23</td>
<td class="num">0.617</td>
<td class="num">-</td>
<td class="num"> </td>
<td class="num">8-0-12</td>
<td class="num">16-0-4</td>
<td class="num">13-0-7</td>
<td class="num">18-0-12</td>
<td class="num">19-0-11</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">2</div>
<div class="team-w-trophy">
樂天桃猿
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">34-0-26</td>
<td class="num">0.567</td>
<td class="num">3</td>
<td class="num">12-0-8</td>
<td class="num"> </td>
<td class="num">9-0-11</td>
<td class="num">13-0-7</td>
<td class="num">18-0-12</td>
<td class="num">16-0-14</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">3</div>
<div class="team-w-trophy">
統一7-ELEVEn獅
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">26-0-34</td>
<td class="num">0.433</td>
<td class="num">11</td>
<td class="num">4-0-16</td>
<td class="num">11-0-9</td>
<td class="num"> </td>
<td class="num">11-0-9</td>
<td class="num">13-0-17</td>
<td class="num">13-0-17</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">4</div>
<div class="team-w-trophy">
富邦悍將
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">23-0-37</td>
<td class="num">0.383</td>
<td class="num">14</td>
<td class="num">7-0-13</td>
<td class="num">7-0-13</td>
<td class="num">9-0-11</td>
<td class="num"> </td>
<td class="num">13-0-17</td>
<td class="num">10-0-20</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!--上半季戰績 end-->
<!--下半季戰績-->
<div class="RecordTableWrap">
<div class="record_table_caption">下半季戰績</div>
<div class="record_table_swipe_guide" style="display: none;">
<div class="desktop"></div>
<div class="mobile"></div>
</div>
<div class="record_table_scroll_ctrl" style="display: none;">
</div>
<div class="RecordTableOuter">
<div class="RecordTable">
<table>
<tbody><tr>
<th class="sticky">
<div class="sticky_wrap">
<div class="rank">排名</div>
<div class="team-w-trophy">球隊</div>
</div>
</th>
<th class="num">出賽數</th>
<th class="num">勝-和-敗</th>
<th class="num">勝率</th>
<th class="num">勝差</th>
<th class="num">中信兄弟</th>
<th class="num">樂天桃猿</th>
<th class="num">統一7-ELEVEn獅</th>
<th class="num">富邦悍將</th>
<th class="num">主場戰績</th>
<th class="num">客場戰績</th>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">1</div>
<div class="team-w-trophy">
統一7-ELEVEn獅
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">32-1-27</td>
<td class="num">0.542</td>
<td class="num">-</td>
<td class="num">13-1-6</td>
<td class="num">10-0-10</td>
<td class="num"> </td>
<td class="num">9-0-11</td>
<td class="num">16-0-14</td>
<td class="num">16-1-13</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">2</div>
<div class="team-w-trophy">
富邦悍將
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">31-1-28</td>
<td class="num">0.525</td>
<td class="num">1</td>
<td class="num">9-1-10</td>
<td class="num">11-0-9</td>
<td class="num">11-0-9</td>
<td class="num"> </td>
<td class="num">15-1-14</td>
<td class="num">16-0-14</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">3</div>
<div class="team-w-trophy">
中信兄弟
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">30-2-28</td>
<td class="num">0.517</td>
<td class="num">1.5</td>
<td class="num"> </td>
<td class="num">14-0-6</td>
<td class="num">6-1-13</td>
<td class="num">10-1-9</td>
<td class="num">16-1-13</td>
<td class="num">14-1-15</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">4</div>
<div class="team-w-trophy">
樂天桃猿
</div>
</div>
</td>
<td class="num">60</td>
<td class="num">25-0-35</td>
<td class="num">0.417</td>
<td class="num">7.5</td>
<td class="num">6-0-14</td>
<td class="num"> </td>
<td class="num">10-0-10</td>
<td class="num">9-0-11</td>
<td class="num">16-0-14</td>
<td class="num">9-0-21</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!--下半季戰績 end-->
<!--全年戰績-->
<div class="RecordTableWrap">
<div class="record_table_caption">全年戰績</div>
<div class="record_table_swipe_guide" style="display: none;">
<div class="desktop"></div>
<div class="mobile"></div>
</div>
<div class="record_table_scroll_ctrl" style="display: none;">
</div>
<div class="RecordTableOuter">
<div class="RecordTable">
<table>
<tbody><tr>
<th class="sticky">
<div class="sticky_wrap">
<div class="rank">排名</div>
<div class="team-w-trophy">球隊</div>
</div>
</th>
<th class="num">出賽數</th>
<th class="num">勝-和-敗</th>
<th class="num">勝率</th>
<th class="num">勝差</th>
<th class="num">中信兄弟</th>
<th class="num">樂天桃猿</th>
<th class="num">統一7-ELEVEn獅</th>
<th class="num">富邦悍將</th>
<th class="num">主場戰績</th>
<th class="num">客場戰績</th>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">1</div>
<div class="team-w-trophy">
中信兄弟
</div>
</div>
</td>
<td class="num">120</td>
<td class="num">67-2-51</td>
<td class="num">0.568</td>
<td class="num">-</td>
<td class="num"> </td>
<td class="num">22-0-18</td>
<td class="num">22-1-17</td>
<td class="num">23-1-16</td>
<td class="num">34-1-25</td>
<td class="num">33-1-26</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">2</div>
<div class="team-w-trophy">
樂天桃猿
</div>
</div>
</td>
<td class="num">120</td>
<td class="num">59-0-61</td>
<td class="num">0.492</td>
<td class="num">9</td>
<td class="num">18-0-22</td>
<td class="num"> </td>
<td class="num">19-0-21</td>
<td class="num">22-0-18</td>
<td class="num">34-0-26</td>
<td class="num">25-0-35</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">3</div>
<div class="team-w-trophy">
統一7-ELEVEn獅
</div>
</div>
</td>
<td class="num">120</td>
<td class="num">58-1-61</td>
<td class="num">0.487</td>
<td class="num">9.5</td>
<td class="num">17-1-22</td>
<td class="num">21-0-19</td>
<td class="num"> </td>
<td class="num">20-0-20</td>
<td class="num">29-0-31</td>
<td class="num">29-1-30</td>
</tr>
<tr>
<td class="sticky">
<div class="sticky_wrap">
<div class="rank">4</div>
<div class="team-w-trophy">
富邦悍將
</div>
</div>
</td>
<td class="num">120</td>
<td class="num">54-1-65</td>
<td class="num">0.454</td>
<td class="num">13.5</td>
<td class="num">16-1-23</td>
<td class="num">18-0-22</td>
<td class="num">20-0-20</td>
<td class="num"> </td>
<td class="num">28-1-31</td>
<td class="num">26-0-34</td>
</tr>
</tbody></table>
</div>
</div>
</div>
<!--全年戰績 end-->

It worked when I used time.sleep(10)

NodeJS Server pdf Document Generation Issue

I am working on an API which generates a pdf document based on an EJS template which then gets emailed to some users. When running Locally everything works as expected however when my API is pushed to heroku the pdf is generated with some odd formatting errors. Its like the page is essentially cut down the middle vertically.
Does anyone know a possible cause of this?
I am using ejs, and html-pdf
Here is the code and template
document generation function
ejs.renderFile(path.join(__dirname, '../views/', "offer.ejs"), {offerData}, (err, data) => {
if(err)
reject(err)
else
{
const options = {
"height": "11.25in",
"width": "8.5in",
"header": {
"height": "10mm"
},
"footer": {
"height": "10mm",
}
};
//creates the actual pdf doc for sending
pdf.create(data, options).toFile(`./offer_${inqID}.pdf`, function(err, res) {
if (err)
reject(err)
else
resolve(res.filename)
});
}
});
html pdf template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Trade-in Disclosure Form</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<style>
body{
font-family: 'Roboto', sans-serif !important;
}
h1{
text-decoration: underline !important;
}
table.center {
margin-left:auto;
margin-right:auto;
}
td.rows{
padding-bottom: 10px;
text-align: left !important;
}
td.question{
padding-right: 15px;
}
span{
font-weight:bold !important;
}
</style>
</head>
<body style="border: solid black 2px; margin-left: 10px; margin-right:10px;">
<header class="text-center">
<h1 >The Auto Broker</h1>
<h2> Trade-In Vehicle Disclosure Form</h2>
<p style="margin-left: 6em; margin-right: 6em">
This Form has been filled out by the customer requesting a quote. It contains some basic details to help inform your evaluation of the vehicle.
If the customer provides false information you have the right to recind or adjust your offer to the customer; otherwise include the value of
this vehicle in your total value for the quote. Please ensure to carefully review all the data before providing a quote. Quotes are final and
cannot be altered once submitted.
</p>
</header>
<div style="padding-top:20px;">
<div class="form-container container">
<div class="row" style="background-color: black;">
<h3 style="color: aliceblue;" class="ml-2"> Vehicle History</h3>
</div>
<table class="center">
<thead>
<tr>
<th style="padding-bottom: 20px;"> <h4>Question </h4></th>
<th style="padding-bottom: 20px;"> <h4>Response </h4></th>
</tr>
</thead>
<tbody>
<tr>
<td class="rows question">Has the Vehicle been in an accident?</td>
<td class="rows"> <%= questionnaire.inaccident %> </td>
</tr>
<tr>
<td class="rows question">Have any panels been repainted, repaired <br> or replaced?</td>
<td class="rows"> <%= questionnaire.panelrepairs %> </td>
</tr>
<tr>
<td class="rows question">Are you the original owner?</td>
<td class="rows"> <%= questionnaire.originalowner %> </td>
</tr>
<tr>
<td class="rows question">Is this an American Vehicle?</td>
<td class="rows"> <%= questionnaire.usvehicle %> </td>
</tr>
<tr>
<td class="rows question">Has the Vehicle been registered in any other <br> Province/State?</td>
<td class="rows"> <%= questionnaire.outofprovreg %> </td>
</tr>
<tr>
<td class="rows question">Is the Odometer faulty, replaced or rolled back? </td>
<td class="rows"> <%= questionnaire.faultyodometer %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any lights on the dashboard?</td>
<td class="rows"> <%= questionnaire.dashlights %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have any factory warranty?</td>
<td class="rows"> <%= questionnaire.factorywarranty %> </td>
</tr>
<tr>
<td class="rows question">Does the vehicle have extended warranty?</td>
<td class="rows"> <%= questionnaire.extwarrenty %> </td>
</tr>
<tr>
<td class="rows question">Was the vehicle ever used as a daily rental, <br> police vehicle, or taxi/limousine?</td>
<td class="rows">
<% if (questionnaire.rental) { %>
Rental <br>
<% } %>
<% if (questionnaire.taxilimo) { %>
Taxi / Limo <br>
<% } %>
<% if (questionnaire.policecar){ %>
Police Vehicle <br>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Does the vehicle require repairs to the following: <br>
<span style="margin-left: 10px;">Engine </span> <br>
<span style="margin-left: 10px;">Transmission/Powertrain</span> <br>
<span style="margin-left: 10px;">Electrical System </span> <br>
<span style="margin-left: 10px;">Air Conditioning System</span>
</td>
<td class="rows">
<%= questionnaire.enginerepair %> <br>
<%= questionnaire.transrepair %> <br>
<%= questionnaire.electricalrepair %> <br>
<%= questionnaire.acrepairs %> <br>
</td>
</tr>
<tr>
<td class="rows question">Additional Repair Details</td>
<td class="rows"> <%= questionnaire.repairdetails %> </td>
</tr>
<tr>
<td class="rows question">Outstanding Balance</td>
<td class="rows">
<% if (questionnaire.outstandingbalance){ %>
<%= questionnaire.outstandingbalance %>
<% } %>
</td>
</tr>
<tr>
<td class="rows question">Total Current Milage</td>
<td class="rows"> <%= questionnaire.milage %> K.M </td>
</tr>
<tr>
<td class="rows question">V.I.N</td>
<td class="rows"> <%= questionnaire.vin %> </td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Proper Img
Broken Img

Was able to solve this issue by adding a single CSS style Rule.
html {
zoom: 0.55;
}
This is most likely required due to the default zoom setting of the html-pdf package. This setting and more can also be configured with options; however, i am unsure if the zoom options can be configured to < 1.

I'm facing the same prblm. I think u have to use inline CSS... u can't use bootstrap. I was facing the same problem. but now it is ok with puppeteer

Find label name which doesn't contain input immediately from a table

I am having a table which contains multiple td/tr.
My problem is label which i want to get doesn't contains input immediately neither that label has any attributes property.
I want to get "Countries of Permanent Residence" and Dates which are in span but doesn't have any properties that span is in div that too doesn't contains any property.
I tried with
formElement[input[name="icims_gh_Permanent_Country_Residence"]]
But don't know how to get associate label.
Html looks like:
<div style="margin:0px">
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Countries of Permanent Residence (list all) </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px"> Dates </span>
</div>
</td>
</tr>
<tr>
<td colspan="2" valign="top">
<div style="margin:0px">
<div>
<input type="hidden" name="icims_gh_Permanent_Country_Residence" value="1">
<a name="0.1_icims_ga_Permanent_Country_Residence"></a>
<div>
<table style="width:100%;border:0px">
<tbody>
<tr>
<td>
<table style="width:100%" border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountry"> </span>
</div>
</td>
<td valign="top">
<div style="margin:0px">
<span style="font-family:arial,helvetica,sans-serif;font-size:12px">
<input type="text" name="icims_0_permResidenceCountryDates"> </span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>

MODX: display elements in groups by two with wrapper for every group

Imagine situation when you need to have output like this
<table>
<tr class="row">
<td class="cell">First resource</td>
<td class="cell">Second resource</td>
</tr>
<tr class="row">
<td class="cell">Third resource</td>
<td class="cell">Fourth resource</td>
</tr>
<tr class="row">
<td class="cell">Fifth resource</td>
<td class="cell">Sixth resource</td>
</tr>
</table>
or like this
<div class="container">
<div class="row"><!--groups-->
<div class="col-md-6">
First resource
</div>
<div class="col-md-6">
Second resource
</div>
<div class="clearfix"> </div>
</div>
<div class="row"><!--group-->
<div class="col-md-6">
Third resource
</div>
<div class="col-md-6">
Fourth resource
</div>
<div class="clearfix"> </div>
</div>
<div><!--group-->
...
</div>
...
...
</div>
As for me this structures are similar for my purpose. I was looking for examples of the usage of placeholders, but do not get it. Please write the example with getResources or PDOTools or similar.

[[pdoResources?
&parents=`0`
&depth=`1`
&tplFirst=`tplFirst`
&tpl=`tpl`
&tplOdd=`tplOdd`
&tplLast=`tplLast`
&tplWrapper=`tplWrapper`
]]
tplFirst
<tr class="row">
<td class="cell">[[+pagetitle]]</td>
tpl
<td class="cell">[[+pagetitle]]</td>
tplOdd
<td class="cell">[[+pagetitle]]</td>
</tr>
<tr class="row">
tplLast
<td class="cell">[[+pagetitle]]</td>
</tr>
tplWrapper
<table>
[[+output]]
</table>

Scala find location of string in a string

I have this string:
var htmlString;
Assigned to:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<html>
<head>
<title>Payment Receipt</title>
<link rel="stylesheet" type="text/css" href="content/PaymentForm.css">
<style type="text/css">
</style>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
</head>
<body>
<div id="divPageOuter" class="PageOuter">
<div id="divPage" class="Page">
<!--[1]-->
<div id="divThankYou">
Thank you for your order!
</div>
<hr class="HrTop">
<div id="divReceiptMsg">
You may print this receipt page for your records.
</div>
<div class="SectionBar">
Order Information
</div>
<table id="tablePaymentDetails1Rcpt">
<tr>
<td class="LabelColInfo1R">
Merchant:
</td>
<td class="DataColInfo1R">
<!--Merchant.val-->
Ryan
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo1R">
Description:
</td>
<td class="DataColInfo1R">
<!--x_description.val-->
Rasmussenpayment
<!--end-->
</td>
</tr>
</table>
<table id="tablePaymentDetails2Rcpt" cellspacing="0" cellpadding="0">
<tr>
<td id="tdPaymentDetails2Rcpt1">
<table>
<tr>
<td class="LabelColInfo1R">
Date/Time:
</td>
<td class="DataColInfo1R">
<!--Date/Time.val-->
09-Jul-2012 12:26:46 PM PT
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo1R">
Customer ID:
</td>
<td class="DataColInfo1R">
<!--x_cust_id.val-->
<!--end-->
</td>
</tr>
</table>
</td>
<td id="tdPaymentDetails2Rcpt2">
<table>
<tr>
<td class="LabelColInfo1R">
Invoice Number:
</td>
<td class="DataColInfo1R">
<!--x_invoice_num.val-->
176966244
<!--end-->
</td>
</tr>
</table>
</td>
</tr>
</table>
<hr id="hrBillingShippingBefore">
<table id="tableBillingShipping">
<tr>
<td id="tdBillingInformation">
<div class="Label">
Billing Information
</div>
<div id="divBillingInformation">
Test14 Rasmussen<br>
1234 test st<br>
San Diego, CA 92107 <br>
</div>
</td>
<td id="tdShippingInformation">
<div class="Label">
Shipping Information
</div>
<div id="divShippingInformation">
</div>
</td>
</tr>
</table>
<hr id="hrBillingShippingAfter">
<div id="divOrderDetailsBottomR">
<table id="tableOrderDetailsBottom">
<tr>
<td class="LabelColTotal">
Total:
</td>
<td class="DescrColTotal">
</td>
<td class="DataColTotal">
<!--x_amount.val-->
US $250.00
<!--end-->
</td>
</tr>
</table>
<!-- tableOrderDetailsBottom -->
</div>
<div id="divOrderDetailsBottomSpacerR">
</div>
<div class="SectionBar">
Visa ****0027
</div>
<table class="PaymentSectionTable" cellspacing="0" cellpadding="0">
<tr>
<td class="PaymentSection1">
<table>
<tr>
<td class="LabelColInfo2R">
Date/Time:
</td>
<td class="DataColInfo2R">
<!--Date/Time.1.val-->
09-Jul-2012 12:26:46 PM PT
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo2R">
Transaction ID:
</td>
<td class="DataColInfo2R">
<!--Transaction ID.1.val-->
2173493354
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo2R">
Authorization Code:
</td>
<td class="DataColInfo2R">
<!--x_auth_code.1.val-->
07I3DH
<!--end-->
</td>
</tr>
<tr>
<td class="LabelColInfo2R">
Payment Method:
</td>
<td class="DataColInfo2R">
<!--x_method.1.val-->
Visa ****0027
<!--end-->
</td>
</tr>
</table>
</td>
<td class="PaymentSection2">
<table>
</table>
</td>
</tr>
</table>
<div class="PaymentSectionSpacer">
</div>
</div>
<!-- entire BODY -->
</div>
<div class="PageAfter">
</div>
</body>
</html>
And I want to find the location of "x_auth_code.1.val" in the string. And then I want to obtain a string from the location plus a certain number of characters. The goal would be to return the Authorization code.

You can use indexOfSlice, and then slice() in StringOps
scala> val myString = "Hello World!"
myString: java.lang.String = Hello World!
scala> val index = myString.indexOfSlice("Wo")
index: Int = 6
scala> val slice = myString.slice(index, index+5)
slice: String = World
With your html string:
scala> htmlString.indexOfSlice("x_auth_code.1.val")
res4: Int = 2771

Why aren't you using an XML parser? Don't treat XML as strings -- you'll get bitten if you do.
Here's a regex to do it, but my advice is: DO NOT USE IT! Use xml tools.
"""\Qx_auth_code.1.val\E[^>]*>([^<]*)""".r.findFirstMatchIn(htmlString).map(_ group 1)

Resources