Using a basic <ul> and <li> within asp.net project with input controls, can't figure out why <ul> will not expand to full browser width? The <ul> will expand with wider <li> content.
<ul data-role="listview" id="ul-edit-picks" data-divider-theme="a" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">
<asp:Label ID="Label1" runat="server" Text='<%# Eval("FDID")%>' Font-Bold="True" Font-Size="Medium"></asp:Label>
: Selections</h2>
</li>
<li>1st Week:
<asp:TextBox ID="CHOICE1TextBox" runat="server" Text='1st Week' ReadOnly="True"></asp:TextBox><br />
<asp:HiddenField ID="CHOICE1HiddenField" runat="server" Value='<%# Bind("CHOICE1")%>' />
</li>
<li>2nd Week:
<asp:TextBox ID="CHOICE2TextBox" runat="server" Text='' ReadOnly="True"></asp:TextBox><br />
<asp:HiddenField ID="CHOICE2HiddenField" runat="server" Value='<%# Bind("CHOICE2")%>' />
</li>
...
<li>
<asp:Button ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"
Text="Update Selections" ToolTip="Click to change your selections..."></asp:Button>
<asp:Button ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"
Text="Cancel"></asp:Button>
</li>
</ul>
Screen Shots:
Try with data-inset="false" on < ul >
ok the problem was in the <FormView> of the .net section of my page, see: asp.net formview generates table at fixed width 259px
it's seems the default width of 259px is auto generated in the form based on content size.
Related
I'm building a Bootstrap based website in ASP.net. I've come across something that I'm stuck on.
An input in a navbar isn't working (on IOS only). I've narrowed it down to being how the caret is positioned outside of the input field. Please see here where a solution is given for the exact same thing but in a modal.
Any idea on how to make that solution work in a navbar? The solution for modal is to make the modal body position fixed which won't work in the full webpage.
Here is what I see:
This is my navbar:
<nav class="navbar navbar-expand-md navbar-dark position-fixed bg-dark bottomnavbar" style="z-index: 1;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExampleDefault">
<ul class="navbar-nav mr-auto">
<asp:Repeater ID="rpt_categories" runat="server">
<ItemTemplate>
<li class="nav-item" id="catNav_<%# Eval("id")%>">
<asp:LinkButton ID="lb_newsCat" runat="server" ToolTip='<%# Eval("category") %>' OnCommand="lb_newsCat_Command1" CommandName="naviTo" CommandArgument='<%# Eval("category") + ";" + Eval("id")%>' CssClass="nav-link" Text='<%# Eval("category") %>'></asp:LinkButton>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
<asp:TextBox ID="tb_Search" runat="server" type="search" CssClass="form-control" placeholder="Search"></asp:TextBox>
<asp:Button ID="btn_Search" runat="server" OnClick="btn_Search_Click" CssClass="btn btn-outline-success my-2 my-sm-0" Text="Submit" />
</div>
</nav>
The solution was in the source posted by #Rustyj
html, body {
-webkit-overflow-scrolling: touch !important;
overflow: auto !important;
height: 100% !important;
}
github.com/uswds/uswds/issues/277
I'm sorry for what I think is a bad question. Would anyone have an example of how to create something like on the picture, so some sort of tiles, within MVC? This used to be available on https://www.exceptionnotfound.net/asp-net-mvc-demystified-display-and-editortemplates/ but it isn't anymore, and I need to know how to create something like that but haven't been able to find it.
Any help would be appreciated even if it's just the correct name of the above!
It really doesn't matter too much if its in ASP, Java Spring or plain old HTML, this is more related to CSS and Bootstrap rather than ASP.NET MVC.
This is what I would do.
Open up your Views\Home\index.html and you can delete everything and paste something like below (which makes a good starting template) - grabbed from here.
#{
ViewBag.Title = "Home Page";
}
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
You will get thumbnail style grid which you then need to refine (with CSS) to give it the look and feel that you're after (make you to read bootstrap's documentation).
You don't need to use MVC to create tiles. You can use CSS or Javascript. There are a number of JS/CSS libraries that will allow you to tile your HTML.
I'd post some here, but honestly you should probably just use google to find some js/css tile layout libraries so that you can find one that best fits your needs.
I have developed a Web App that displays a live view of an HMI process.
Essentially it consists of master-detail solution. Within one of the detail pages is an image that refreshes every second on a timer tick. The image is displayed within a panel, itself inside an UpdatePanel. The updatepanel is explicitly refreshed on a timer tick (btw I've tried all variations/combinations of updatepanel properties without success).
On desktop Chrome, IE, Firefox, this solution works well. Sometimes, for some unknown reason, the page insists on doing a full refresh but overall the animation is smooth. Below is a screenshot of what the page looks like
When this app is viewed in Safari/Opera/Dolphin (build 5) (iOS 5 and 7), the results are very different. In between refreshes, the page is rendered minus the image and then finally with the image. The result is horrible shuddering of the page. The page in fact appears to be doing a full refresh (even the nav bar at the top resizes). The below image is what appears in between the update of the main image:
And when it's sorted itself out, the full page:
Occasionally this behaviour occurs on Chrome/Firefox on the desktop versions - this was minimised by disabling hardware acceleration within the browsers. But for Safari, it happens every refresh and has become a serious, app-killer problem since the majority of intended users will be iPad/iPhone users.
I've searched for days for a solution, adding various things to web.config, Page PreInit etc, but with no luck.
This is some of what I've tried :
Web.Config
<browserCaps userAgentCacheKeyLength="256" />
Source Code:
protected void Page_PreInit(object sender, EventArgs e)
{
if (Request.UserAgent != null && Request.UserAgent.IndexOf("AppleWebKit", StringComparison.CurrentCultureIgnoreCase) > -1)
{
this.ClientTarget = "uplevel";
}
I've done some playing around with how the image is inserted into the page ( it's a Base64 jpg string). I thought there was a problem with the image, but cutting a long story short, I inserted instead a tiny standard project image (.jpg) with the url suffixed with a random number to prevent caching - and the problem still happened (i.e. a full refresh still occurred in between timer ticks). So it's not an issue with the base64 encoded string. I've also removed all other controls apart from the image and still I get the full page refresh and violent screen shudder.
This is driving me nuts. I've tried it on iOS5 and 7 and both have the same refresh problem. It's really quite serious, since this makes the app unusable on iPads/iPhones.
I hope someone can please help.
Thanks
Here's the aspx code of the Master Page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="PracticonWebMimic.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<%-- <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
<META HTTP-EQUIV="Expires" CONTENT="-1">--%>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - Practicon Factory Viewer</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta http-equiv=”Page-Exit” content=”progid:DXImageTransform.Microsoft.Fade(duration=.5)” />
</head>
<body>
<form runat="server">
<asp:ScriptManager runat="server" EnablePartialRendering="true">
<Scripts>
<%--To learn more about bundling scripts in ScriptManager see http://go.microsoft.com/fwlink/?LinkID=301884 --%>
<%--Framework Scripts--%>
<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />
<asp:ScriptReference Name="respond" />
<asp:ScriptReference Name="WebForms.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebForms.js" />
<asp:ScriptReference Name="WebUIValidation.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebUIValidation.js" />
<asp:ScriptReference Name="MenuStandards.js" Assembly="System.Web" Path="~/Scripts/WebForms/MenuStandards.js" />
<asp:ScriptReference Name="GridView.js" Assembly="System.Web" Path="~/Scripts/WebForms/GridView.js" />
<asp:ScriptReference Name="DetailsView.js" Assembly="System.Web" Path="~/Scripts/WebForms/DetailsView.js" />
<asp:ScriptReference Name="TreeView.js" Assembly="System.Web" Path="~/Scripts/WebForms/TreeView.js" />
<asp:ScriptReference Name="WebParts.js" Assembly="System.Web" Path="~/Scripts/WebForms/WebParts.js" />
<asp:ScriptReference Name="Focus.js" Assembly="System.Web" Path="~/Scripts/WebForms/Focus.js" />
<asp:ScriptReference Path="~/Scripts/webkit.js" />
<%--Site Scripts--%>
</Scripts>
</asp:ScriptManager>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" runat="server" href="~/">Practicon Factory View</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" id="mimicList" visible="false"
href="~/RestrictedAccess/MimicList.aspx">Views</a></li>
<li><a runat="server" id="mimicListArchive" visible="false"
href="~/RestrictedAccess/MimicList.aspx?archive=<%= DateTime.Now.Ticks %>">Archive Views</a></li>
<!-- <li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li> -->
</ul>
<asp:LoginView runat="server" ViewStateMode="Disabled">
<AnonymousTemplate>
<ul class="nav navbar-nav navbar-right">
<!-- <li><a runat="server" href="~/Account/Register">Register</a></li> -->
<li><a runat="server" href="~/Account/Login">Log in</a></li>
</ul>
</AnonymousTemplate>
<LoggedInTemplate>
<ul class="nav navbar-nav navbar-right">
<li>
<asp:LoginStatus runat="server" LogoutAction="Redirect" LogoutText="Log off" LogoutPageUrl="~/" OnLoggingOut="Unnamed_LoggingOut" />
</li>
</ul>
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
</div>
<div class="container body-content">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
<hr />
<p >Tip: For optimal viewing experience, please ensure you have <b>disabled</b> <i>Hardware Acceleration</i> in your browser's settings. Google Chrome is the recommended browser.</p>
<hr />
<footer>
<p>© <%: DateTime.Now.Year %> - Practicon Factory <i>View</i></p>
<asp:Label id="lbError" runat="server" Text=""></asp:Label>
</footer>
</div>
</form>
</body>
</html>
and the code for the detail page
<%# Page Title="Factory View" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="MimicDetails.aspx.cs" Inherits="PracticonWebMimic.MimicDetails" %>
<%# Register Assembly="TimePicker" Namespace="MKB.TimePicker" TagPrefix="MKB" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<link href="/Content/PrBlueTable.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-sliderAccess.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.css">
<script src="//cdn.jsdelivr.net/jquery.ui.timepicker.addon/1.4.5/jquery-ui-timepicker-addon.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
});
function InitializeRequest(sender, args) { }
function EndRequest(sender, args) {
// after update occur on UpdatePanel re-init the DatePicker
$('.ui-datepicker').datetimepicker({
inline: true,
showOtherMonths: true,
showOn: 'focus',
showButtonPanel : true,
dateFormat: "dd/mm/yy",
nextText: ">>",
prevText : "<<",
timeFormat: "HH:mm:ss",
dayNamesMin: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
});
}
</script>
<script type="text/javascript" >
if (typeof (Sys.Browser.WebKit) == "undefined") {
Sys.Browser.WebKit = {};
}
if (navigator.userAgent.indexOf("WebKit/") > -1) {
Sys.Browser.agent = Sys.Browser.WebKit;
Sys.Browser.version = parseFloat(navigator.userAgent.match(/WebKit\/(\d+(\.\d+)?)/)[1]);
Sys.Browser.name = "WebKit";
}
</script>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(beginRequest);
function beginRequest() {
prm._scrollPosition = null;
}
</script>
<asp:FormView ID="mimicDetail" runat="server"
ItemType="PracticonWebMimic.Models.Mimic" SelectMethod ="GetMimic"
RenderOuterTable="false">
<ItemTemplate>
<div>
<h2>
<asp:Label ID="lblActive_MimicDetails" runat="server" Visible="true"/>
<%#:Item.MimicName %>
</h2>
</div>
<br />
<table>
<tr>
<td>
<asp:UpdatePanel ID="upMimic_MimicDetails" runat="server" UpdateMode="Conditional" ChildrenAsTrigger="false">
<Triggers>
<%-- <asp:AsyncPostBackTrigger ControlID="tmrMimic_MimicDetails" EventName="Tick"/> --%>
</Triggers>
<ContentTemplate>
<asp:Label ID="lbConditionName_MimicDetails" runat="server" CssClass="btn-primary" Visible="False"/>
<asp:Panel ID="pnMimic" runat="server" style="margin-bottom: 2px">
<asp:image id="imMimic_MimicDetails" runat="server" />
<h4><asp:Label id="lbDirection_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label> </h4>
<%-- Action Buttons starts here ------------------------------------------------------------------------------------------------------------------------------- --%>
<asp:Table class="tbActionButtonBar" runat="server" CssClass="prTable">
<asp:TableRow >
<asp:TableCell>
<asp:Table class="tbActionButtonBar" runat="server">
<asp:TableRow >
<asp:TableCell >
<asp:ImageButton id="btnRestart_MimicDetails" runat="server" onclick="imgRestart_Click" Width="50" ToolTip="Restart playback from beginning." />
<asp:ImageButton id="btnStop_MimicDetails" runat="server" onclick="imgStop_Click" Width="50" ToolTip="Stop playback and show the LIVE Factory View." />
<asp:ImageButton id="btnRewind_MimicDetails" runat="server" onclick="imgRewind_Click" Width="50" ToolTip="Rewind the animation" />
<asp:ImageButton id="btnPlay_MimicDetails" runat="server" onclick="imgPlay_Click" Width="50" ToolTip="Start playback of animation from current time." />
<asp:ImageButton id="btnFForward_MimicDetails" runat="server" onclick="imgFForward_Click" Width="50" ToolTip="Fast-forward through animation." />
<asp:ImageButton id="btnPause_MimicDetails" runat="server" onclick="imgPause_Click" Width="50" ToolTip="Pause playback of animation." />
</asp:TableCell>
<asp:TableCell>
<asp:ImageButton id="btnTrends_MimicDetails" runat="server" Width="50" ToolTip="Show the Trends for the current Factory View" />
</asp:TableCell>
<asp:TableCell>
<asp:ImageButton id="btnConditionMonitoring_MimicDetails" runat="server" Width="50" ToolTip="View Condition Monitoring for this Factory View." />
</asp:TableCell>
<asp:TableCell>
<h5><asp:Label ID="lbStatus_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label></h5>
</asp:TableCell>
<asp:TableCell>
<h5><asp:Label ID="lbSession_MimicDetails" runat="server" CssClass="btn-default" Text=""></asp:Label></h5>
</asp:TableCell>
<asp:TableCell>
<asp:Button ID="btnSession_MimicDetails" runat="server" Text="RESET" CssClass="btn btn-default" onclick="btnSession_MimicDetails_Click"> </asp:button>
</asp:TableCell >
</asp:TableRow>
</asp:Table>
</asp:TableCell >
</asp:TableRow>
</asp:Table>
<%-- DateTime control starts here ------------------------------------------------------------------------------------------------------------------------------- --%>
<asp:Table id="tbActionDateBar_MimicDetails" runat="server" CssClass="prBlueTable">
<asp:TableRow>
<asp:TableCell >
<asp:Label Text="FROM : " runat="server" id="lbFrom_MimicDetails"></asp:Label>
<asp:TextBox type="text" id="txtStartDate_MimicDetails" runat="server" OnTextChanged="txtStartDate_MimicDetails_TextChanged" />
<asp:Label id="lbFromDate_MimicDetails" runat="server"/>
</asp:TableCell><asp:TableCell>
<asp:CheckBox Text=" End date? " runat="server" id="chkEndDate_MimicDetails" AutoPostBack="true" OnCheckedChanged="chkEnableEndDate_CheckedChanged"></asp:CheckBox>
</asp:TableCell><asp:TableCell >
<asp:Label Text="TO : " runat="server" ID ="lbTo_MimicDetails"></asp:Label>
</asp:TableCell><asp:TableCell>
<asp:TextBox type="text" id="txtEndDate_MimicDetails" runat="server" OnTextChanged="txtEndDate_MimicDetails_TextChanged"/>
<asp:Label id="lbEndDate_MimicDetails" runat="server"/>
</asp:TableCell><asp:TableCell>
<asp:CheckBox Text="Auto-restart?" runat="server" id="chkAutoRewind_MimicDetails" OnCheckedChanged="chkAutorewind_MimicDetails_CheckedChanged"></asp:CheckBox>
</asp:TableCell></asp:TableRow></asp:Table><asp:Timer ID="tmrMimic_MimicDetails" runat="server" Interval="1000" OnTick="MimicTimer_Tick" ClientIDMode="AutoID"> </asp:Timer>
<asp:Label ID="lbServiceResponse_MimicDetails" runat="server" CssClass="btn-default" Text="" ></asp:Label><br /><asp:Label id="lbRefreshRequested_MimicDetails" runat="server" Text=""></asp:Label>
<asp:Label id="lbRefreshed_MimicDetails" runat="server" Text=""></asp:Label>
<br /><asp:Label ID="lbServiceAddress_MimicDetails" runat="server" Text=""></asp:Label><br/>
<asp:Label ID="lbError_MimicDetails" runat="server" Text=""></asp:Label>
<asp:Label ID="lbSessionID_MimicDetails" runat="server" Text=""></asp:Label>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
</table>
</ItemTemplate>
</asp:FormView>
</asp:Content>
I am using flexslider.
It is very easy to implement and customizing.
Now my every slide is a link.
is there any way to put to links for a single slide?
that needs to redirect to PAGE1 when click the left side of the image and must redirect to PAGE2 when click the right side.
Thanks in advance dear seniors...
I've found the answer.
The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
I've found the answer. The following method is working
<div class="flexslider">
<ul class="slides">
<!-- slide1 -->
<li>
<img src="images/slider/2.jpg" alt="" usemap="#map2" />
<map name="map2">
<area shape="rect" coords="494,2,961,745" href="http://www.john-anthony.com/mens/jeans/" alt=""/>
<area shape="rect" coords="0,4,482,749" href="http://www.john-anthony.com/vivienne-westwood/blazer-jackets/burgundy/jacket-waistcoat-check/vw024-a13-bur/" alt=""/>
</map>
</li>
</ul>
</div>
I am looking for a tabbed navigation menu which caters for images as the tabitems.
So I have something like this:
<div class="menu">
<a href="#">
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</a>
<a href="#">
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</a>
<a href="#">
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</a>
<a href="#">
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</a>
<a href="#">
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</a>
</div>
I have tried a few jquery/css ones but I cannot find one that gives me a nice style for a tab that contains images?
Try jQuery UI tabs.
Checkout the code on http://jqueryui.com/demos/tabs/#default
Replace Navigation Items in the demo ie.,
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
with your contents, like...
<ul>
<li>
<img src="images/Chrysanthemum.jpg" style="width:10%; height:10%" title="Chrysanthemum" />
</li>
<li>
<img src="images/Desert.jpg" style="width:10%; height:10%" title="Desert" />
</li>
<li>
<img src="images/Hydrangeas.jpg" style="width:10%; height:10%" title="Hydrangeas"/>
</li>
<li>
<img src="images/Jellyfish.jpg" style="width:10%; height:10%" title="Jellyfish" />
</li>
<li>
<img src="images/Penguins.jpg" style="width:10%; height:10%" title="Penguins" />
</li>
</ul>
Size of the images should be suitable for your tab.
Hope you can understand... :)