I am using a tabContainer in my page, and I have set the HeaderTemplete - e.g:
<cc1:TabContainer ID="TabContainer1" runat="server" CssClass="tab">
<cc1:TabPanel ID="ListView" runat="server" HeaderText="List View">
<HeaderTemplate>
<asp:Label style="padding:2px;" Width="100px" ID="ListHeader" runat="server"
CssClass="tdheader" Text="List View"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="MapView" runat="server" HeaderText="Map View">
<HeaderTemplate>
<asp:Label style="padding:2px;" Width="100" ID="Label1" runat="server" CssClass="tdheader" Text="Map View"></asp:Label>
</HeaderTemplate>
<ContentTemplate>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>
How can set the style of the Active tab, i.e. I want the active tab to be blue and the rest of the tabs as grey.
In your CSS class for the tabs, use the ajax__tab_active class. Take a look at the Tabs example page for a list of CSS classes that can be applied to the Tabs control.
I took my tabs theme from Matt Berseth's site, and he uses these classes in his sample code.
Related
When the tab-content component (a subcomponent of tabs) contains a video, the user is unable to swipe to switch between tab pages, with the result that the progress bar is dragged instead.
The code where the exception occurs is as follows:
<template>
<div style="background-color: #00bfff;">
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div style="flex-direction: column;">
<text style="color: red">1</text>
<stack class="video" >
<video class="video1" id="111"
src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4">
</video>
</stack>
</div>
<div style="flex-direction: column;">
<text style="color: red">2</text>
</div>
<div style="flex-direction: column;">
<text style="color: red">3</text>
</div>
</tab-content>
</tabs>
</div>
</template>
Cause Analysis:
The video component is set as a subcomponent of tabs, while both components support swiping. When the user swipes across the video area, the system will respond to the sliding of the progress bar prior to the tab page switchover, given the event bubbling framework.
Add a div component between video and its parent node stack to cover the video. Make sure that div is lower than video in height to ensure that the progress bar and buttons are not hidden. When the user swipes across the video area, they are swiping on the div component instead. Because div and video are sibling nodes, the video progress bar will not be dragged.
The sample code is as follows:
<template>
<div style="background-color: #00bfff;">
<tabs index="0" >
<tab-bar mode="fixed">
</tab-bar>
<tab-content>
<div style="flex-direction: column;">
<text style="color: red">1</text>
<stack class="video">
<video class="video1" id="111"
src="https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/cae-legoup-video-target/93be3d88-9fc2-4fbd-bd14-833bca731ca7.mp4"
onstart="start" ontouchmove="move" onseeked="seeked">
</video>
<div style="width: 100%;height:300px;" onclick="bof">
</div>
</stack>
</div>
<div style="flex-direction: column;">
<text style="color: red">2</text>
</div>
<div style="flex-direction: column;">
<text style="color: red">3</text>
</div>
</tab-content>
</tabs>
</div>
</template>
References:
tabs component
video component
The layout needs to differentiate between touching video progress and touching video tab.
So we need to have element besides video in the tab, for example
<stack class="video">
<video
</video>
<div >
</div>
</stack>
The extra div or anything to cover the video without color
So that the tab is detecting click.
Assuming user knows not to touch the lower part of the video to swap tab, this is common behavior seems.
I have a GWT app with one main panel showing a table of PostgreSQL instances. I want the app to show other kinds of instances, e.g. Redis instances. So I'm initially wrapping the main panel in a DeckLayoutPanel to swap out the PostgreSQL panel with a Redis panel. There will a vertical menu on the left side that the user will use to select the type of instance to show.
Adding DeckLayoutPanel to the UI XML causes the main panel to not display, although I do see the content in a DOM inspector.
Here's the original, working UI, without g:DeckLayoutPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<table width="100%" border="1">
<tr>
<td colspan="2" align="left">
Logo
</td>
<td colspan="2" align="right">
Hello John
</td>
</tr>
<tr>
<td colspan="4">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</td>
</tr>
<tr>
<td>Help</td>
<td>About</td>
<td>Contact</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>
If I remove the g:HTMLPanel and also the HTML table, trimming it to, this works:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder
xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:DeckLayoutPanel ui:field="deckLayoutPanel">
<g:VerticalPanel ui:field="instancesPanel">
<g:Label ui:field="mainErrorLabel" />
<g:FlexTable ui:field="flexTable" />
<g:HorizontalPanel>
<g:TextBox ui:field="createInstanceTextBox" />
<g:ListBox ui:field="createInstanceVersionsListBox" />
<g:Button ui:field="createInstanceButton">Create</g:Button>
<g:Label ui:field="createInstanceErrorLabel" />
</g:HorizontalPanel>
</g:VerticalPanel>
</g:DeckLayoutPanel>
</ui:UiBinder>
I'm using an HTML table here since I'm not a front-end designer and I have similar HTML for the non-GWT JSP pages (using a JSTL tag) so want to make sure the GWT and non-GWT pages render the same.
Should I be using something else than a table? Should I switch to divs for placement instead? Is using a g:DeckLayoutPanel in an HTML table not supported? How is one supposed to get identical HTML pages for GWT and non-GWT pages if one needs to use only GWT layout widgets?
BTW, I tried using RootPanel and that didn't work either with the HTML page.
I'm binding to it using:
interface Binder extends UiBinder<HTMLPanel, MyWebApp> { }
private static final Binder binder = GWT.create(Binder.class);
#UiField
DeckLayoutPanel deckLayoutPanel;
#UiField
VerticalPanel instancesPanel;
#Override
public void onModuleLoad() {
HTMLPanel outer = binder.createAndBindUi(this);
// Tweak a bunch of settings on the UI elements.
...
RootLayoutPanel.get().add(outer);
deckLayoutPanel.showWidget(instancesPanel);
}
The HTML hosting the page is this:
<!doctype html>
<%# page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
<link type="text/css" rel="stylesheet" href="MyWebApp.css">
<title>MyWebApp</title>
<script type="text/javascript" language="javascript" src="MyWebApp/MyWebApp.nocache.js"></script>
</head>
<body>
<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
<noscript>
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.
</div>
</noscript>
</body>
</html>
DeckLayoutPanel in a HTMLPanel
The problem is part of the title...
The short answer is: Do not nest **LayoutPanels in anything other than a **LayoutPanel unless you set a fixed size for it.
**LayoutPanels are meant for applications that that have a static layout that is defined from the outer to the inner. If you only user **LayoutPanels for the outer layout, it works. In your second code example you noticed exactly this behavior.
A html table works different, it needs it's content to define a size and grow with it. As **LayoutPanels do not grow with their contents, they have a size of 0x0px.
I answered a similar question lately (link). Possibly it answers different aspects of this problem.
I've wrote a HTML Newsletter and have a link (a href) around my image.
It's typical and valid HTML code.
But if I test my newsletter on iPhone and try to click on that image to follow my link.
iphone menu pops out and I can share the link, save the image .. etc. but I cannot open the Link!
I don't know why?! AAaargh.
It's a HTML Newsletter, I can't use JavaScript.
<td width="253" valign="middle">
<a href="http://mydomain.com/mydocument.pdf" target="_blank">
<img src="http://mydomain.com/button.png" width="253" height="39" alt="My Image" style="display:block;" border="0" />
</a>
</td>
The solution is ...
Make a Imagemap over the graphics-element It' works
<img src="button.png" width="253" height="39" alt="" style="display:block;" border="0" usemap="linkmap" />
an then .
<map name="linkmap">
<area shape="rect" coords="0,0,253,39" href="http://mydomain.com/mydocument.pdf" target="_blank" alt="" />
How do I stop a ModalPopupExtender from showing the popup when a user navigates to the page via the browser's back button?
I tried to implement the solution found here which essentially handles the ModalPopup using client side script but had trouble with its implementation. ($find("modPop") always returns null).
Are there other techniques for handling this?
EDIT: The plot thickens. This only occurs because I am using an UpdatePanel inside of the popup. The code below should duplicate the error. Also note, the use of the dummy button is required.
Click button to show modalConfirm modal
Navigate away from page
Navigate back to page w/ back button
Modal appears undesireably.
<%# Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Test" %>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true"> </asp:ScriptManager>
<span style="display:none;"><asp:Button ID="btnDummy" runat="server" Text="Dummy" /></span>
<asp:Button id="btnShow" runat="server" Text="Show Modal"/>
<ajax:ModalPopupExtender ID="mpTest" runat="server" TargetControlID="btnDummy" PopupControlID="pnlTest"></ajax:ModalPopupExtender>
<asp:Panel id="pnlTest" style="display:none;border:10px solid green" DefaultButton="btnTest" runat="server">
<asp:UpdatePanel ID="upTest" runat="server">
<ContentTemplate>
<asp:Button ID="btnTest" runat="server" Text="Test" />
</ContentTemplate>
<Triggers>
<ajax:AsyncPostBackTrigger ControlID="btnTest" />
</Triggers>
</asp:UpdatePanel>
</asp:Panel>
StackOverflow
</div>
</form>
Partial Class Test
Inherits System.Web.UI.Page
Protected Sub btnShow_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnShow.Click
mpTest.Show()
End Sub
Protected Sub btnTest_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnTest.Click
mpTest.Hide()
End Sub
End Class
I think this makes sense as when you confirm the modal a full postback doesn't happen but I need to do it this way. Are there any workarounds?
In the solution on the ASP.NET forum, the modPop in $find("modPop") is the behavior id of the modal popup which in your case will be mpTest. Try explicitly setting BehaviorId="mpTest" on your ModalPopupExtender as well and see if it works.
I have a user control that handles logging a user in to my site. This user control is placed in the upper right corner of all pages as a Quick Login Box. The problem I'm having is that on my production server, the LinkButton click events I have provided for logging in and reset are not firing the OnClick event after a postback. Its like it just forgets to do it.
Normally this wouldn't be such an issue to debug, except that it does not happen when running in debug on localhost (nor when running in release on localhost). It only seems to be occurring on my production server and only on my home page. If I try to login using the user control from any other page it works fine and the OnClick event runs as it normally should. I'm at my wits end here as I just don't know of anymore ways to debug this thing and every suggestion I've encountered on Google does not help. Below is the markup I'm using in my user control, any suggestions or help would be greatly appreciated. The LinkButton's "Login" and "Reset" do not work at all.
<asp:Panel ID="AnonPanel" runat="server" DefaultButton="Login">
<div id="welcome">
<span class="welcome">Welcome </span><span class="guest1">Guest!</span> <span>Login </span>|<span > Signup</span>
</div>
<div id="input_boxarea">
<div id="user_id">
<asp:TextBox ID="UserName" runat="server" CssClass="input_box1"></asp:TextBox>
</div>
<div id="password">
<asp:TextBox ID="Password" runat="server" TextMode="Password" CssClass="input_box1" size="16"></asp:TextBox>
</div>
</div>
<div id="remember">
<div id="reme">
<div id="reme1">
<asp:CheckBox ID="RememberMe" runat="server" />
</div>
<div id="reme2">Remember me</div>
</div>
<div id="loginbutton1"><span class="login"><asp:LinkButton ID="Login"
runat="server" CommandName="Login" onclick="Login_Click">Login</asp:LinkButton></span></div>
<div id="resetbutton1"><span class="login"><asp:LinkButton ID="Reset"
runat="server" onclick="Reset_Click">Reset</asp:LinkButton></span></div>
</div>
<asp:Panel ID="AdminPanel" runat="server" Visible="false">
<div id="welcome_loggedin">
<span class="welcome">Welcome </span><span class="guest1"><asp:LoginName ID="LoginName1" runat="server" />!</span><br />
<asp:HyperLink ID="MyAccountLink" CssClass="memberLink" runat="server" NavigateUrl="/my-account.html">My Account</asp:HyperLink><br />
<asp:HyperLink ID="MyLeaguesLink" CssClass="memberLink" runat="server" NavigateUrl="/my-leagues.html">My Leagues</asp:HyperLink><br />
<asp:HyperLink ID="AdminLink" CssClass="memberLink" runat="server" NavigateUrl="/admin/">Admin Area</asp:HyperLink><br />
<asp:HyperLink ID="IssueTrackerLink" CssClass="memberLink" runat="server" Target="_blank">Issue Tracker</asp:HyperLink><br />
<asp:HyperLink ID="Logout" CssClass="memberLink" runat="server" NavigateUrl="/logout.html">Logout</asp:HyperLink>
</div>
<asp:Panel ID="UserPanel" runat="server" Visible="false">
<div id="welcome_loggedin">
<span class="welcome">Welcome </span><span class="guest1"><asp:LoginName ID="LoginName2" runat="server" />!</span><br />
<asp:HyperLink ID="HyperLink1" CssClass="memberLink" runat="server" NavigateUrl="/my-account.html">My Account</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink2" CssClass="memberLink" runat="server" NavigateUrl="/my-leagues.html">My Leagues</asp:HyperLink><br />
<asp:HyperLink ID="HyperLink3" CssClass="memberLink" runat="server" NavigateUrl="/logout.html">Logout</asp:HyperLink>
</div></asp:Panel>
try changing "causes validation" property to false and see if that makes a difference.
Could you temporarily perform some logging from those event handlers?
You could write to a .txt file on the web server. Or to the event log.
As the first line in the click event, write to the log. Then, perform the desired action (login, reset) in a try-catch block. Both the try and the catch write to the log again. If there's some weird exception happening, you can capture the details in your catch logging.
If you want to leave this temporary code in place, but don't want to perform logging unnecessarily, you could add a toggle in <appSettings> in your web.config file, so that you can turn the logging on and off.