I have a simple page that pops up a telerik radwindow on button click.
But opens as collapsed in IE 9. Works fine with FF, Chrome, IE 8, IE Compatibility Mode.
Look at the below screenshots of how they open.
IE 9
Firefox
Heres the page code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<%# Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager ID="scriptManager" runat="server" />
<telerik:RadButton ID="btnOpen" runat="server" Text="Open" OnClick="btnOpen_Click" />
<br />
<telerik:RadWindow ID="TestDialog" runat="server" Title="Select Order Services"
VisibleStatusbar="false" AutoSize="true" AutoSizeBehaviors="Height" Width="400px"
Modal="true" VisibleOnPageLoad="false" Behaviors="Close, Move" EnableShadow="true">
<ContentTemplate>
<div style="overflow: hidden;">
<table cellspacing="0" border="0"
style="table-layout: auto; ">
<tbody>
<tr>
<th style="width: 100px;">Column 1</th>
<th style="width: 100px;">Column 2</th>
</tr>
<tr>
<td>
a
</td>
<td>
a
</td>
</tr>
<tr>
<td>
b
</td>
<td>
b
</td>
</tr>
<tr>
<td>
c
</td>
<td>
c
</td>
</tr>
</tbody>
</table>
</div>
</ContentTemplate>
</telerik:RadWindow>
</form>
</body>
</html>
Code behind:
protected void btnOpen_Click(object sender, EventArgs e)
{
TestDialog.VisibleOnPageLoad = true;
}
I want the overflow:hidden present in the style and still want the pop up opened fully in IE 9. How do I get it?
Found a way.
<ContentTemplate>
<div style="display: inline; overflow: hidden;">
...
This is a solution, but I dont really understand how this works! That was one lucky line of code I wrote!
If any one can explain me why it works, I will mark theirs as answer.
Related
EDIT: The following outlined example works in thunderbird as well.
I'm currently learning how to create emails using foundation for emails. What I currently want to do is to create an "expanded button" within a grid. I've come up with the following HTML by referencing the examples outlined for grid here and examples outlined for expanded button here.
The following is what I came up with, my thinking based on what I have read thus far is that I have to add the "expanded button" within the column of my grid, so I have the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
</head>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="columns first last">
<table>
<tr>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tr>
<td>
<table>
<tr>
<td>
<center data-parsed><a href="#"
align="center"
class="float-center">Reset Password</a>
</center>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
<table class="button small-expanded">
<tr>
<td>
<table>
<tr>
<td>Expand small only</td>
</tr>
</table>
</td>
</tr>
</table>
</column>
</tr>
</tbody>
</table>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
It looks exactly as I expect it to look like in Firefox, however it looks incorrect in outlook. For example, this is what it appears as in Firefox:
Here is what it looks like in outlook when I send an email:
For context, I'm trying to create an typical "Reset Password" email template. Do note that I have run the HTML through the CSS inliner located here, as instructed by the documentation.
This issue is resolved in version 2.3.1, but their official download link was not updated to serve the latest version of the code, hence I spent time trying to resolve an issue that was already rectified. While the button is now expanded, there is an issue with the anchor link in outlook.
See https://github.com/foundation/foundation-emails/issues/415 for more information.
i am trying to delete row when click on confirm link,alert is first time when click on delete link but second time alert not coming...
value getting deleted without alert
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SRK Pvt Ltd.</title>
</head>
<body>
<form:form method="get" action="">
<%-- <h1>${message}</h1>
Enter Name: <input id="tagsName"> --%>
Autocomplete
<center>
Dear <strong>${user}</strong>, Welcome to DBA Page. Logout
<div style="color: teal; font-size: 30px">SRK Pvt Ltd.</div>
<c:if test="${!empty employeeList}">
<script>
function ConfirmDelete() {
var x = confirm("Are you sure you want to delete?");
if (x)
return true;
else
return false;
}
</script>
<table border="1" bgcolor="black" width="600px">
<tr
style="background-color: teal; color: white; text-align: center;"
height="40px">
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td>Phone</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<c:forEach items="${employeeList}" var="user">
<tr
style="background-color: white; color: black; text-align: center;"
height="30px">
<td><c:out value="${user.firstName}" /></td>
<td><c:out value="${user.lastName}" /></td>
<td><c:out value="${user.email}" /></td>
<td><c:out value="${user.phone}" /></td>
<td>Edit</td>
<td><a href="delete?id=${user.id}"
Onclick="return ConfirmDelete();">Delete</a></td>
</tr>
</c:forEach>
</table>
</c:if>
Click Here to add new User
</center>
</form:form>
</body>
</html>
second time alert box not showing value getting deleted directly when click on delete link
In this table, when I check the radio button (present) on the 1st row and when I go and check again the present on the 2nd row, the first row present in getting unchecked automatically. And all the radiobutton gets checked. This is just a sample for two students.
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<%# page import="java.sql.*"%>
<table bgcolor="lightgray" border="5" width="60%" cellpadding="5" cellspacing="0.5" color="blue" >
<tr>
<th colspan ="3" bgcolor="#999999"><br>
<div align="Center" > <font face="verdana" size="5" color="white"> ATTENDANCE </font>
</div>
</th>
</tr>
<tr>
<td width="14%"><h3>Register No</td>
<td><h3> Student Name</td>
<td><h3> Attendance</td>
</tr>
<tr>
<td> 1 </td>
<td> <input type="radio" >Present <input type="radio">Absent
<tr>
<td>2</td>
<td> <input type="radio" >Present <input type="radio">Absent
</tr>
<%
Connection dbcon=null;
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
dbcon=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:orcl","scott","tiger");
Statement stmt=dbcon.createStatement();
ResultSet rst=null;
rst=stmt.executeQuery("select * from studenttables");
while(rst.next())
{%>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=1%></td>
<td><%=rst.getString("name")%></td>
<td><input type="radio" >Present <input type="radio">Absent
</tr>
<% } %>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Set a name and make a group of radio buttons like
() - name="rdg1" and id="Present"
() - name="rdg1" and id="Absent"
and
() - name="rdg2" and id="Present2"
() - name="rdg2" and id="Absent2"
if the rdg1 - Present is checked and you click to check the rdg1 - Absent the check box 1 will clear, same to second group.
This should be dead easy. How do you center a radiobuttonlist? It didn't used to be hard.
The below HTML does not work. What am I missing?
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<table style="width:100%">
<tr>
<td style="text-align: center">
<asp:RadioButtonList ID="radUserType" runat="server"
RepeatDirection="Horizontal">
</asp:RadioButtonList>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
RepeatLayout="Flow"
Renders the RadioButtonList in a span rather than a table.
Try using td attributes :
<td align="center">
<asp:RadioButtonList ID="radUserType" runat="server"
RepeatDirection="Horizontal">
</asp:RadioButtonList>
</td>
Following code works fine with IE, but doesn't work with other browsers.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function OnLoad() {
var tbl = document.getElementById("tbl");
tbl.addEventListener("keyup", OnKeyUp);
tbl.focus();
}
function OnKeyUp(event) {
alert(event.keyCode);
}
</script>
</head>
<body onload="OnLoad()">
<table id="tbl">
<tr>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</table>
</body>
</html>
The problem is that the table element cannot be given focus in some browsers. If you add a tabindex property to the table, your code should work, as that will allow the table to receive focus:
<table id="tbl" tabindex="1">
<!--Rest of your code-->
</table>
Here's a working example.