I have a table that works beautifullly but for some reason when I click on my testing button the table headers shift to the right. I tried using `style=”position:fixed” and I tried taking out the thead in my table neither one worked. I can’t find any other resources with my exact problem. Any help is appreciated.
LangInfo view:
@model OfficerLangVM
<body>
<div class="full-width">
<h4>Language Information</h4>
<table style="background-color:lightgray; width:75%" class="table table-boardered table-striped" cellpadding="5">
<thead>
<tr>
<th>Language</th>
<th>Fluency</th>
<th>Read</th>
<th>Write</th>
<th>Speak</th>
<th>Understand</th>
<th>Date Modified</th>
<th><!--Edit--></th>
<th><!--Delete--></th>
</tr>
</thead>
<tbody>
<input type="hidden" asp-for="OfficerKey" />
<input type="hidden" asp-for="AgGuid" />
<input type="hidden" asp-for="LanguageKey"/>
@{
if (Model.Languages != null)
{
int rownum = 0;
foreach (Language lang in Model.Languages)
{
<tr id="@rownum">
<td>@lang.LanguageName</td>
<td>@lang.Fluency</td>
@if (lang.CanRead == true)
{
<td><input type="checkbox" checked="checked" /></td>
}
else
{
<td><input type="checkbox" /></td>
}
@if (lang.CanWrite == true)
{
<td><input type="checkbox" checked="checked" /></td>
}
else
{
<td><input type="checkbox" /></td>
}
@if (lang.CanSpeak == true)
{
<td><input type="checkbox" checked="checked" /></td>
}
else
{
<td><input type="checkbox" /></td>
}
@if (lang.CanUnderstand == true)
{
<td><input type="checkbox" checked="checked" /></td>
}
else
{
<td><input type="checkbox" /></td>
}
<td>@lang.DateUpdated</td>
<td>
<!--Testing to keep user on same view page, doesn't pull an info-->
<input type="button" value="testing" onclick="show(@lang.LanguageKey); hide(@rownum)"/>
</td>
<td>
<!--This works just takes user to new view page-->
<a asp-action="LanguageUpdate" asp-route-id="@lang.LanguageKey">Edit</a>
</td>
<td>
<a asp-action="DeleteLang" asp-route-id="@lang.LanguageKey">Delete</a>
</td>
</tr>
<tr style="display:none" id="@lang.LanguageKey">
@await Html.PartialAsync("LanguageUpdate", lang)
</tr>
rownum++;
}
}
}
</tbody>
</table>
</div>
<script type="text/javascript">
function show(key) {
document.getElementById(key).style.display = "block";
}
function hide(rownum) {
document.getElementById(rownum).style.display = "none";
}
</script>
<style>
.body-container {
/*remove the container default padding attribute*/
/*padding-left: 0px !important;
padding-right: 0px !important;*/
/*increase width as per your need*/
max-width: 100%;
}
</style>
LanguageUpdate view that is called from testing button:
@model Language
<form asp-action="UpdateLang" method="post">
<input type="hidden" asp-for="OfficerKey" />
<input type="hidden" asp-for="AgGuid" />
<input type="hidden" asp-for="LanguageKey" />
@{
if (Model != null)
{
<td>
<select asp-for="LanguageName">
<option Value=""> 1) Select a Language . . .</option>
<option value="American Sign English (ASE)">American Sign English (ASE)</option>
<option value="American Sign Language (ASL)">American Sign Language (ASL)</option>
<option value="Arabic: Algerian">Arabic: Algerian</option>
<option value="Arabic: Egyptian">Arabic: Egyptian</option>
<option value="Awadhi">Awadhi</option>
<option value="Azerbaijani">Azerbaijani</option>
<option value="Bengali">Bengali</option>
<option value="Bhojpuri">Bhojpuri</option>
<option value="Chinese: Cantonese">Chinese: Cantonese</option>
<option value="Chinese: Fukein">Chinese: Fukein</option>
<option value="Chinese: Jinyu">Chinese: Jinyu</option>
<option value="Chinese: Mandarin">Chinese: Mandarin</option>
<option value="Chinese: Min Nan">Chinese: Min Nan</option>
<option value="Chinese: Wu">Chinese: Wu</option>
<option value="Creole">Creole</option>
<option value="Creole-Jamaican">Creole-Jamaican</option>
<option value="Czech">Czech</option>
<option value="Dutch">Dutch</option>
<option value="Esperanza">Esperanza</option>
<option value="Estonian">Estonian</option>
<option value="Farsi">Farsi</option>
<option value="French">French</option>
<option value="Gaelic">Gaelic</option>
<option value="German">German</option>
<option value="Greek">Greek</option>
<option value="Hausa">Hausa</option>
<option value="Hebrew">Hebrew</option>
<option value="Hindi">Hindi</option>
<option value="Hmong">Hmong</option>
<option value="Hungarian">Hungarian</option>
<option value="Icelandic">Icelandic</option>
<option value="Italian">Italian</option>
<option value="Japanese">Japanese</option>
<option value="Kannada">Kannada</option>
<option value="Korean">Korean</option>
<option value="Lao">Lao</option>
<option value="Latin">Latin</option>
<option value="Maithili">Maithili</option>
<option value="Marathi">Marathi</option>
<option value="Malayalam">Malayalam</option>
<option value="Native American: Blackfoot">Native American: Blackfoot</option>
<option value="Native American: Cheyenne">Native American: Cheyenne</option>
<option value="Native American: Chippewa">Native American: Chippewa</option>
<option value="Native American: Cree">Native American: Cree</option>
<option value="Native American: Dakota">Native American: Dakota</option>
<option value="Native American: Lakota">Native American: Lakota</option>
<option value="Native American: Lenape">Native American: Lenape</option>
<option value="Native American: Navajo">Native American: Navajo</option>
<option value="Native American: Ojibwi">Native American: Ojibwii</option>
<option value="Native American: Oneida">Native American: Oneida</option>
<option value="Native American: Onodaga">Native American: Onodaga</option>
<option value="Native American: Paivte">Native American: Paivte</option>
<option value="Native American: Shoshoni">Native American: Shoshoni</option>
<option value="Native American: Sioux">Native American: Sioux</option>
<option value="Niger-Congo: Akan">Niger-Congo: Akan</option>
<option value="Niger-Congo: Twi">Niger-Congo: Twi</option>
<option value="Norwegian">Norwegian</option>
<option value="Oriya">Oriya</option>
<option value="Panjabi">Panjabi</option>
<option value="Patois">Patois</option>
<option value="Polish">Polish</option>
<option value="Portuguese">Portuguese</option>
<option value="Romanian">Romanian</option>
<option value="Russian">Russian</option>
<option value="Serbian">Serbian</option>
<option value="Serbo-croatian">Serbo-croatian</option>
<option value="Sign Language">Sign Language</option>
<option value="Sindhi">Sindhi</option>
<option value="Slovaic(Slovak)">Slovaic(Slovak</option>
<option value="Spanish">Spanish</option>
<option value="Sunda">Sunda</option>
<option value="Swedish">Swedish</option>
<option value="Tagalog">Tagalog</option>
<option value="Tamil">Tamil</option>
<option value="Telugu">Telugu</option>
<option value="Thai">Thai</option>
<option value="Turkish">Turkish</option>
<option value="Ukrainian">Ukrainian</option>
<option value="Urdu">Urdu</option>
<option value="Vietnamese">Vietnamese</option>
</select>
</td>
<td>
<select asp-for="Fluency">
<option value="1) Limited Proficiency">1. Limited Proficiency</option>
<option value="2) Novice">2. Novice</option>
<option value="3) Intermediate">3. Intermediate</option>
<option value="4) Advanced">4. Advanced</option>
<option value="5) Native Speaker">5. Native Speaker</option>
</select>
</td>
@if (Model.CanRead == true)
{
<td>
@Html.CheckBoxFor((modelItem => Model.CanRead))
</td>
}
else
{
<td>
@Html.CheckBoxFor((modelItem => Model.CanRead))
</td>
}
@if (Model.CanWrite == true)
{
<td>
@Html.CheckBoxFor((modelItem => Model.CanWrite))
</td>
}
else
{
<td>
@Html.CheckBoxFor((modelItem => Model.CanWrite))
</td>
}
@if (Model.CanSpeak == true)
{
<td>
@Html.CheckBoxFor((modelItem => Model.CanSpeak))
</td>
}
else
{
<td>@Html.CheckBoxFor((modelItem => Model.CanSpeak))</td>
}
@if (Model.CanUnderstand == true)
{
<td>
@Html.CheckBoxFor((modelItem => Model.CanUnderstand))
</td>
}
else
{
<td>@Html.CheckBoxFor((modelItem => Model.CanUnderstand))</td>
}
<td>@Model.DateUpdated</td>
<td>
<input type="submit" value="Update" class="btn btn-primary" style="background-color:lightgray; color:black" />
</td>
<td>
<input type="submit" value="Delete" class="btn btn-primary" style="background-color:lightgray; color:black" asp-action="DeleteLang" asp-route-id="@Model.LanguageKey" />
</td>
<td>
<input type="submit" class="btn btn-primary" asp-action="Editing" asp-route-id="@Model.OfficerKey" value="Cancel" style="background-color:lightgray; color:black" />
</td>
}
}
Controller:
public IActionResult LanguageUpdate (int id)
{
Language lang = getLanguage(id);
return View(lang);
}
[HttpPost]
public IActionResult UpdateLang(Language UpdateLang)
{
MailkitErrors errors = new(ServiceProvider!, Configuration!);
UserEmail = HttpContext.Session.GetString("UserEmail")!;
string ConnectionString = connectionStrings.Get("ForeignLanguageConnectString");
var objLangUpdateConnect = new SqlConnection(ConnectionString);
var objLangUdDataSet = new DataSet();
string strLangUpdate = "UpdateLanguage";
try
{
var objCommandlang = new SqlCommand(strLangUpdate, objLangUpdateConnect);
objCommandlang.CommandType = CommandType.StoredProcedure;
//Add parameters for input
objCommandlang.Parameters.AddWithValue("@RowCount", 1);
objCommandlang.Parameters.AddWithValue("@OfficerKey", UpdateLang.OfficerKey);
objCommandlang.Parameters.AddWithValue("@LanguageKey", UpdateLang.LanguageKey);
objCommandlang.Parameters.AddWithValue("@LanguageName", UpdateLang.LanguageName);
objCommandlang.Parameters.AddWithValue("@Fluency", UpdateLang.Fluency);
objCommandlang.Parameters.AddWithValue("@CanRead", UpdateLang.CanRead);
objCommandlang.Parameters.AddWithValue("@CanWrite", UpdateLang.CanWrite);
objCommandlang.Parameters.AddWithValue("@CanSpeak", UpdateLang.CanSpeak);
objCommandlang.Parameters.AddWithValue("@CanUnderstand", UpdateLang.CanUnderstand);
objCommandlang.Parameters.Add("@UserUpdated", SqlDbType.VarChar, 150).Value = "";
var ObjDataAdapterLang = new SqlDataAdapter(objCommandlang);
ObjDataAdapterLang.Fill(objLangUdDataSet, "Language"); //FLIPV2 dbo.Language Table
}
catch (Exception)
{
ViewBag.ErrorMessage = "There has been an error. MAGLOCLEN HelpDesk has been notified.";
errors.ErrorEmails(UserEmail, "Error occured while updating language for selected officer:n");
}
UpdateLang.Officer = getOfficer(UpdateLang.OfficerKey);
UpdateLang.syncOfficer();
return RedirectToAction("Editing", new { id = UpdateLang.OfficerKey });
}
I changed the script in the LangInfo view from
function show(key) {
document.getElementById(key).style.display = "block";
}
to
function show(key) {
document.getElementById(key).style.display = "contents";
}