in my code i have a table inside an updatepanel with a button to update this table.
I put an updateprogress that showing "working".
The table , when i click button, will be filled from code behind with values, but when the script end, the table still empty.
If i remove the updateprogress the table will be updated..
Example code:
<asp:UpdatePanel runat="server" ID="uppanel" UpdateMode="Conditional">
<ContentTemplate>
<asp:Table><asp:TableRow><asp:TableCell runat="server" id="value"></asp:TableCell></asp:TableRow></asp:Table>
<asp:Button onClick="update_click" runat="server">
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="updateProgress" AssociatedUpdatePanelID="uppanel" runat="server">
<ProgressTemplate>
<div style="position: fixed; text-align: center; height: 100%; width: 100%; top: 0; right: 0; left: 0; z-index: 9999999; background-color: #000000; opacity: 0.7;">
<span style="border-width: 0px; position: fixed; padding: 50px; background-color: #FFFFFF; font-size: 36px; left: 40%; top: 40%;">Loading ...</span>
</div>
</ProgressTemplate>
Related
I have an HTML file where every time I click on the settings button, a popup with edit and delete buttons is supposed to appear like so:
(I clicked ash Ketchum)
[][1]
[1]: https://i.stack.imgur.com/tnXWm.png
However, as I move down the list, the popup is not relative to the button I click on, but rather is stuck in the same place like so:
[][2]
[2]: https://i.stack.imgur.com/Bgwzi.png
My question is, how could I style this popup to truly popup relative to the button chosen and not just stuck in a static position?
Here is the html and style file:
<div class="dropdown">
<nav>
<table class="tableLayout">
<ion-buttons slot="end" class="editButtonItem" (click)="onGetDragonIndex(dragon)">
<ion-button>
<label for="touch">
<span class="dropdown">
<ion-icon md="ellipsis-vertical" aria-label="ellipsis horizontal" role="img"
class="editButton"></ion-icon>
</span>
</label>
</ion-button>
</ion-buttons>
</table>
</nav>
<input type="checkbox" id="touch">
<div class="slide">
<div class="listItem">
<label for="touch">
<dragon-dragon></dragon-dragon>
</label>
</div>
</div>
</div>
.css
label {
padding: 0px;
}
span.dropdown {
padding-bottom: 15px;
padding-top: 20px;
cursor: pointer;
display: block;
z-index: 1;
}
span::after {
float: right;
right: 10%;
z-index: 1;
}
.slide {
height: 0px;
overflow: hidden;
text-align: center;
box-shadow: 2px 2px 2px 0px rgba(0.2, 0.2, 0.2, 0.2);
width: 110px;
background: white;
z-index: 2;
position: absolute;
margin-top: -10px;
}
.slide .listItem {
padding-top: 5px;
padding-bottom: 5px;
}
#touch {
position: absolute;
opacity: 0;
height: 0px;
}
#touch:checked+.slide {
height: 85px;
}
.tableLayout {
table-layout: fixed;
width: 100%;
}
Building a site for it class, just want to add text and images to my pages but it's not showing, only some is shown. I want it to be underneath my title page (an image with width 100%) but I think it's either being covered by that or the navbar.
I don't really mind how it looks as long as I can know how to put as much text as I want without it being covered.
Less of the text is covered if the page is minimised, (so it's like a mobile format) but there's still a limit to how much I can put before the rest gets covered.
I've tried using div tag, I'm mostly rushing this site and have copied some of the code. (like the navbar, I just edited the colours and to make the navbar text be in the centre of the page in a horizontal alignment instead of a vertical alignment which I kept getting before.)
https://jsfiddle.net/Theo1290/vz5Lwmb8/3/
body {
background-color: rgb(22, 21, 21);
color: #FFFFFF;
}
.titlepage {
position: relative;
top: 0;
left: 0;
}
.leftarrow {
position: absolute;
bottom: 60px;
left: 80px;
}
.rightarrow {
position: absolute;
bottom: 60px;
right: 80px;
}
.navbar {
background-color: rgb(22, 21, 21);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.navbar a {
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.active {
background-color: #4CAF50;
}
<div style="position: relative; right: 0; top: 0;">
<img src="contact.jpg" class="titlepage" style="width:100%" />
<a href="aboutpage.htm">
<img src="leftarrow.gif" class="leftarrow" style="width:157.5px;height:91.5px" />
</a>
<a href="homepage.htm">
<img src="rightarrow.gif" class="rightarrow" style="width:157.5px;height:91.5px" />
</a>
</div>
<div>
<p> something
</p>
</div>
<div class="navbar">
Home
Primary Data
Secondary Data
About
<a class="active" href="contactpage.htm">Contact</a>
You can use this code
body {
background-color: rgb(22, 21, 21);
color: #FFFFFF;
margin: 0;
}
.titlepage {
position: relative;
top: 0;
left: 0;
}
.leftarrow {
position: absolute;
bottom: 60px;
left: 80px;
}
.rightarrow {
position: absolute;
bottom: 60px;
right: 80px;
}
.navbar {
background-color: rgb(22, 21, 21);
overflow: hidden;
position: fixed;
bottom: 0;
width: 100%;
display: inline-block;
text-align: center;
}
.navbar a {
color: #FFFFFF;
padding: 14px 16px;
text-decoration: none;
font-size: 30px;
}
.navbar a:hover {
background: #f1f1f1;
color: black;
}
.active {
background-color: #4CAF50;
}
<div style="position: relative; right: 0; top: 0;">
<img src="https://images.taboola.com/taboola/image/fetch/f_jpg%2Cq_auto%2Ch_300%2Cw_600%2Cc_fill%2Cg_faces:auto%2Ce_sharpen/http%3A//www.relocationtarget.com/wp-content/uploads/2019/05/Hyundai_Atos_front_20080328.jpg" class="titlepage" style="width:100%" />
<a href="aboutpage.htm">
<img src="https://img.icons8.com/flat_round/64/000000/wide-long-left-arrow.png" class="leftarrow" style="width: auto; height: auto;" />
</a>
<a href="homepage.htm">
<img src="https://img.icons8.com/flat_round/64/000000/wide-long-right-arrow.png" class="rightarrow" style="width: auto; height: auto;" />
</a>
</div>
<div>
<p>something</p>
</div>
<div class="navbar">
Home
Primary Data
Secondary Data
About
<a class="active" href="contactpage.htm">Contact</a>
</div>
so i have a great looking one page website that looks great on one screen, but when i change browsers and use larger screens the aspect of the page always looks different.. I know bootstrap would solve this issue, but unfortunately i cant do it in bootstrap for other reasons... Can anybody help please??
CSS
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Siemens.Packing.PackingStatsShiftOverview.Default" %>
<!DOCTYPE html>
<html>
<head>
<title>Packing Shift Summary</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
</head>
<body style="height: 100%">
<form runat="server" name="PackingStatsForm">
<div style="height:100%">
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Font-Size="190pt" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; " CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class ="center" width:100%>
<img class ="imgFooter" src="Logo/siemensblack1.png" />
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="DDLProduct" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged" Font-Bold="True" ViewStateMode="Enabled" >
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" CellPadding="22" ForeColor="Black" GridLines="Horizontal" HorizontalAlign="Center" Font-Size="23px" OnRowDataBound="GridView1_RowDataBound" Width="100%" Font-Bold="True" >
<AlternatingRowStyle BackColor="White"/>
<FooterStyle BackColor="#CCCC99"/>
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black"/>
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right"/>
<RowStyle BackColor="#F7F7DE"/>
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black"/>
<SortedAscendingCellStyle BackColor="#FBFBF2"/>
<SortedAscendingHeaderStyle BackColor="#848384"/>
<SortedDescendingCellStyle BackColor="#EAEAD3"/>
<SortedDescendingHeaderStyle BackColor="#575357"/>
</asp:GridView>
<div class="center" width:100% >
<img class="imgFooter" src="Logo/siemenswhite1.png" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
CSS
body {
font-family: Arial;
color: white;
}
.split {
height: 100%;
position: fixed;
z-index: 1;
top: 0;
overflow-x: hidden;
padding-top: 20px;
}
.left {
left: 0;
background-color: #110;
width: 30%;
height: 100%;
text-align: center;
}
.right {
right: 0;
background-color: white;
width: 70%;
text-align: center;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.center {
text-align: center;
}
.auto-style1 {
position: absolute;
width: 100%;
height: 100%;
top: 49%;
left: 43%;
}
h1 {
color: red;
font-weight: bold;
padding-top: 20px;
}
div { padding: 30px 10px 15px; }
.imgFooter {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
bottom: 10%;
}
.clsLeft {
float: left;
width:30%;
background-color:Cyan;
}
.clsRight {
width:70%;
float:right;
background-color:Yellow;
}
.clsColumn {
height: 100%;
text-align: center;
}
table {
border: 1px solid black;
background-color:White;
margin: 0 auto; /* or margin: 0 auto 0 auto */
}
th {
font-style:Bold;
background-color:White;
}
td {
text-align: center;
}
#parent {
Height:100%;
display: table;
}
#child {
font-size:24pt;
display: table-cell;
vertical-align: middle;
}
Using floats and absolute positioning is not the best solution for responsive web development, you can apply flexbox to the container and have a good looking form, let me suggest a solution for your form:
<!DOCTYPE html>
Packing Shift Summary
<script>
window.setTimeout('document.forms[0].submit()', 5000); //refresh the page (without losing state)
</script>
<form runat="server" name="PackingStatsForm">
<!-- <div style="height:100%"> -->
<div class="split left">
<div class="center" width:100%>
<h1>TOTAL QUANTITY PACKED</h1>
<asp:Label ID="labeltotal" runat="server" Font-Size="190pt" style="text-align: center; padding-top: 800px; color: #ff0000; transform: translate(-50%, -50%); text-align: center; padding-left: 90px; "
CssClass="auto-style1" Font-Bold="True"></asp:Label>
</div>
<div class="center" width:100%>
<img class="imgFooter" src="Logo/siemensblack1.png" />
</div>
</div>
<div class="split right">
<div class="center" width:100%>
<asp:DropDownList ID="DDLProduct" runat="server" AutoPostBack="True" OnSelectedIndexChanged="Dropdownlist1_SelectedIndexChanged"
Font-Bold="True" ViewStateMode="Enabled">
</asp:DropDownList>
<h1>CELL TARGETS & ACTUAL FIGURES</h1>
<asp:GridView ID="GridView1" runat="server" BackColor="White" BorderColor="black" BorderStyle="Ridge" CellPadding="22" ForeColor="Black"
GridLines="Horizontal" HorizontalAlign="Center" Font-Size="23px" OnRowDataBound="GridView1_RowDataBound" Width="100%"
Font-Bold="True">
<AlternatingRowStyle BackColor="White" />
<FooterStyle BackColor="#CCCC99" />
<HeaderStyle BackColor="white" Font-Bold="True" ForeColor="black" />
<PagerStyle BackColor="#F7F7DE" ForeColor="Black" HorizontalAlign="Right" />
<RowStyle BackColor="#F7F7DE" />
<SelectedRowStyle BackColor="#CE5D5A" Font-Bold="True" ForeColor="black" />
<SortedAscendingCellStyle BackColor="#FBFBF2" />
<SortedAscendingHeaderStyle BackColor="#848384" />
<SortedDescendingCellStyle BackColor="#EAEAD3" />
<SortedDescendingHeaderStyle BackColor="#575357" />
</asp:GridView>
</div>
<div class="center" width:100%>
<img class="imgFooter" src="Logo/siemenswhite1.png" />
</div>
</div>
<!-- </div> -->
</form>
In the html, i commented (removed) the div container and i will apply flexbox just to the parent which in this case is the element ..
body {
font-family: Arial;
color: white;
}
.center {
text-align: center;
border: 1px solid red;
}
h1 {
color: red;
font-weight: bold;
}
div {
padding: 30px 10px 15px;
}
form {
display: flex;
height: 100vh;
justify-content: space-between;
width: 100%;
}
.split {
display: flex;
flex-direction: column;
justify-content: space-evenly;
width: 100%;
height: 100%;
}
.left {
background-color: black;
flex: 0 0 30%;
}
.right {
flex: 0 0 70%;
}
th {
font-style: Bold;
background-color: White;
}
td {
text-align: center;
}
#media only screen and (max-width: 480px) {
form {
flex-flow: column nowrap;
}
}
In the CSS i replaced the floats with flexbox, in the form the height is 100vh so your form will take 100% height of any screen, .left and .right have a flex-basis of 30% and 70% , keep using relative units for better responsive design than using pixels,also use media queries for mobile and tablet,i used one breakpoint here to stack the two parts in a column view if the screen is less than 480px, i will link a refrence to flexbox, it's a very useful resource , also you can see this code in the linked codpen.. hope that help
FlexBoxGuide
Codepen
Attempting an assignment, and managed the initial step, but when I go into the index.html on my browser I see weird characters in the box.
inspector view vs text editor view
Then I proceeded to link CSS into the .html file and it appeared exactly as it did in the inspector view image. (see below for css code and html code with link)
I tried editting the files, removing cache from my browser and saw a suggestion to check on inspector and remove the stylesheet. But no luck, I have no idea what to do at this point.
body,
html {
height: 100%;
width: 100%;
position: absolute;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #0c93b0;
}
#profile_screen {
position: absolute;
height: 100%;
width: 100;
}
#information_holder {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 200px;
background-color: #666666;
}
#my_name {
color: white;
font-family: helvetica;
text-align: center;
font-weight: normal;
}
#date_of_birth {
color: white;
text-align: center;
font-family: helvetica;
font-size: 16px;
font-weight: normal;
}
#current_age,
#current_weight {
color: white;
text-align: center;
font-family: helvetica;
font-size: 14px;
font-weight: normal;
}
#main_navigation_holder {
position: absolute;
top: 200px;
width: 100%;
min-height: 200px;
}
.main_button {
width: 50% height: 100% -webkit-appearance: none;
background-color: transparent;
outline: none;
border: none;
background-position: center center;
background-size: 85px;
background-repeat: no-repeat;
}
#settings_page_button {
position: absolute;
left: 0;
background-image: url(‘../images/currentmedications#2x.png’);
}
#health_history_button {
position: absolute;
right: 0;
background-image: url(‘../images/medicalhistory#2x.png’);
}
#add_item_screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
<!doctype>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./index_files/index.css">
</head>
<body>
<div id=“profile_screen” class=“screen”></div>
<div id=“information_holder”>
<h1 id=“my_name”> John Doe</h1>
<h2 id=“date_of_birth”>02/28/2015</h2>
<h3 id=“current_age”>01 yrs old </h3>
</div>
</div>
<div id=“add_item_screen” class=“screen”></div>
<div id=“list_of_history_screen” class=“screen”></div>
<div id=“settings_screen” class=“screen”></div>
<div id=“main_navigation_holder”>
<input type=“button” id=“settings_page_button” value="Settings" />
<input type=“button” id=“health_history_button” value="Health History" />
</div>
</body>
</html>
Use " instead of “ and
Put this code in the head and try again ?
<meta charset="UTF-8">
Your code should be like this
<div id="profile_screen" class="screen"></div>
<div id="information_holder">
<h1 id="my_name"> John Doe</h1>
<h2 id="date_of_birth">02/28/2015</h2>
<h3 id="current_age">01 yrs old </h3>
</div>
<div id="add_item_screen" class="screen"></div>
<div id="list_of_history_screen" class="screen"></div>
<div id="settings_screen" class="screen"></div>
<div id="main_navigation_holder">
<input type="button" id="settings_page_button" value="Settings" />
<input type="button" id="health_history_button" value="Health History" />
</div>
Just use normal quote characters " " instead of “ ” in your html file.
Check it out here
I cant get my text to align right:
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
Here is the other pertinent css:
#logo
{
position: absolute;
top: 15%;
margin-left: 1em;
}
#login_status
{
font-size: 1.2em;
text-align: right;
display: block;
float:right;
}
#header_container
{
background: #7fc041;
height: 7.4em;
left: 0;
right: 0;
position: fixed;
width: 100%;
top: 0;
}
#header_text
{
margin-left: 9.75em;
font-size: 2em;
color: White;
font-style: italic;
}
and the html/server controls:
<div id="header_container">
<div id="header">
<div id="headerBar">
<img src="images/logo.png" id="logo"/>
<span id="header_text">Scrum Reports</span>
<asp:LoginStatus ID="LoginStatus1" runat="server" CssClass="login_status" />
</div>
</div>
</div>
Well I'm no asp.net expert, but I see you using #login_status with text-align: right and CssClass="login_status", which seems to me like it would output
<div class="login_status">
Thus you should either change #login_status to .login_status, or have it set the id rather than the class because the styles seem to be fine.
http://jsfiddle.net/ExplosionPIlls/mzUTW/