Develop Reference

How to design tabs like Google Chrome tabs? - c#

How can I design a user interface with tabs like the one Google Chrome has, I mean each tab has to be able to:
Maximize
Close
Dragged and be stand alone.
I'm using .net 2.0 (C#)
Thanks,

You may find it useful to look at an open source project such SharpDevelop I'm sure that have tabbed windows.

You could look in the chromium source code. The chromium project also seem to have a lot of resources for developers and many communication channels (http://www.chromium.org/developers)

I did it yesterday, but using sass and my own reset file as this screenshoot show.
You may notice in _widget_tab.scss that it support up to 24 tabs after the active one...
Feel free to customize it.
Also to replace &-active with .active or &:hover or &:focus to match your needs.
The _reset.css is optional but the result will look-like this JsFiddlle
Any how, these are my files :
_reset.scss
/*
Created on : Jun 12, 2015, 8:29:10 AM
Author : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese#gmail.com>
*/
$tag-inline:span,a,rt,rp,dfn,abbr,q,cite,em,var,time,samp,i,b,sub,sup,small,strong,mark,ruby,ins,del,bdi,bdo,s,kbd,wbr,code;
$tag-form :form,fieldset,meter,select,legend,optgroup,label,option,datalist,input,output,keygen,textarea,button,progress;
$tag-xture :body,aside,section,header,footer,nav,article,hgroup,address,h1,h2,h3,h4,h5,h6;
$tag-media :img,area,map,embeb,object,param,source,iframe,canvas,track,audio,video,device;
$tag-divide:div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,li,dd;
$tag-table :table,caption,colgroup,col,tbody,thead,tfoot,tr,th,td;
$tag-meta :head,title,meta,base,link,style,noscript,script;
$tag-menu :menu,command,summary,details;
html,#{$tag-inline},#{$tag-form},#{$tag-xture},#{$tag-media},#{$tag-divide},#{$tag-table},#{$tag-meta},#{$tag-menu}
{
margin: 0;
padding: 0;
display: none;
border-radius: 0;
outline-offset: 0;
border-spacing: 0;
border-collapse: collapse;
border: 0 transparent none;
outline: 0 transparent none;
text-indent: 0;
text-align: justify;
text-transform: none;
text-rendering: auto;
text-decoration: none;
text-shadow: 0 0 0 transparent none;
speak: none;
cursor: default;
vertical-align: top;
color: rgba(60,60,60,1);
background-image: none;
background-color: transparent;
font: normal normal normal 0/0 sans-serif;
-webkit-box-shadow: 0 0 0 transparent;
-moz-box-shadow: 0 0 0 transparent;
box-shadow: 0 0 0 transparent;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-margin-before: 0;
-webkit-padding-start: 0;
-webkit-margin-start: 0;
-webkit-margin-after: 0;
-webkit-margin-end: 0;
-webkit-appearance: none;
-moz-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
figure,legend,input,select,button,canvas,object,menu,img,area,map,embeb,audio,video
{
display: inline-block;
}
#{$tag-inline}
{
display: inline;
}
li
{
display: list-item;
}
html,form,fieldset,#{$tag-xture},iframe,div,pre,br,p,blocquote,hr,ol,dl,figcaption,ul,dt,figure,dd,command,summary,details,option
{
display: block;
}
table
{
display: table;
>colgroup
{
display: table-column-group;
>col
{
display: table-column;
}
}
>caption
{
display: table-caption;
}
>thead
{
display: table-header-group;
}
>tbody
{
display: table-row-group;
}
>tfoot
{
display: table-footer-group;
}
>thead,>tbody,>tfoot
{
>tr
{
display: table-row;
>th,td
{
display: table-cell;
}
}
}
}
#{$tag-inline},input,legend,label,button,li,dt,dd,command,summary
{
font: normal normal normal 12px/1 sans-serif;
}
header,h6,h5,h4,h3,h2,h1
{
font: normal normal normal 33px/1 serif;
}
#for $index from 1 through 6
{
h#{$index}
{
$index: 12 + 3 * $index;
font: normal normal normal #{$index}px/1 serif;
}
}
html>body
{
min-width: 100%;
min-height: 100%;
}
_widget_tab.scss
/*
Created on : Jun 12, 2015, 11:46:31 AM
Author : Upgrade <Salathiel Genese, Yimga Yimga at salathielgenese#gmail.com>
*/
#mixin widget-tab()
{
.tab-container
{
display: block;
>.tab-bar
{
display: block;
text-align: right;
}
#content;
}
}
#include widget-tab
{
.tab-bar-chrome-like
{
#extend .tab-bar;
position: relative;
padding: 5px 5px 0 5px;
border-bottom: 7.5px rgba(180,180,180,1) solid;
>.tab
{
margin: 0 5px;
min-width: 75px;
position: relative;
font-family: serif;
display: inline-block;
border-radius: 5px 5px 0px 0px;
padding: 7.5px 25px 7.5px 7.5px;
background-color: rgba(220,220,220,1);
&:before {
width: 0;
bottom: 0;
height: 0;
left: -24px;
content: "";
position: absolute;
border: 12px rgba(220,220,220,1) solid;
border-top-color: transparent;
border-left-color: transparent;
}
&:after {
width: 0;
bottom: 0;
height: 0;
content: "";
right: -23px;
position: absolute;
border: 12px rgba(220,220,220,1) solid;
border-top-color: transparent;
border-right-color: transparent;
}
&:nth-of-type(2n+1) {
background-color: rgba(210,210,210,1);
&:before {
border-right-color: rgba(210,210,210,1);
border-bottom-color: rgba(210,210,210,1);
}
&:after {
border-left-color: rgba(210,210,210,1);
border-bottom-color: rgba(210,210,210,1);
}
}
>[data-sr]
{
right: 5px;
opacity: 0;
z-index: 2;
padding: 2px 4px;
border-radius: 50%;
position: absolute;
top: calc(50% - 8px);
transition-duration: .7s;
background-color: rgba(0,0,0,.05);
&:before {
content: '×';
}
&:hover {
background-color: rgba(0,0,0,.1);
}
}
&:hover>[data-sr] {
opacity: 1;
}
&[data-sr]
{
min-width: 25px;
padding: 7.5px 0;
color: transparent;
}
&-active
{
#extend .tab;
&, &:nth-of-type(n)
{
background-color: rgba(180,180,180,1);
&:before {
border-right-color: rgba(180,180,180,1);
border-bottom-color: rgba(180,180,180,1);
}
&:after {
border-left-color: rgba(180,180,180,1);
border-bottom-color: rgba(180,180,180,1);
}
}
#for $index from 1 through 25
{
&:nth-last-of-type(#{$index}) {
z-index: $index - 1;
#for $sub-index from $index through 1
{
&~.tab:nth-last-of-type(#{$sub-index})
{
z-index: $sub-index - 1;
}
}
}
}
}
}
}
}
index.scss
#import "../libs/reset/scss/_reset.scss";
#import "_widget_tab.scss";
html>body
{
>section
{
margin: 0 15px;
overflow: hidden;
}
}
The main index.html
<!DOCTYPE html>
<html>
<head>
<title>
Choir...
</title>
<meta charset="UTF-8">
<link rel="icon" href="#">
<link rel="stylesheet" href="web/css/sillon.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<aside>
Text...
</aside>
<section class="tab-container">
<nav class="tab-bar-chrome-like">
<a class="tab">
HTML5
<i data-sr></i>
</a>
<a class="tab">
SASS
<i data-sr></i>
</a>
<a class="tab-active">
Angular
<i data-sr></i>
</a>
<a class="tab">
Symfony
<i data-sr></i>
</a>
<a class="tab">
Spring
<i data-sr></i>
</a>
<a href="#" class="tab" data-sr>
.
</a>
</nav>
</section>
</body>
</html>
But Since there is no way yet to self reference code snippet, this the result

Try implementing each tab as a HTMLGenericControl("div") and then apply the following jquery scripts on the client side.
jQuery draggable tabs
As far as the minimising of the tabs, you could simply add a small image to the right of the tab content which toggles the width of the tab based on the jquery click event handler.

Related

I have an MVC project, where I have two columns. On the left column, I have a buttons grid, and I want to have it maximum to be two buttons per row. Currently, it is 4 buttons per row and I tried flex: 0 1 50% but that didn't work. Currently, it looks like this:
Here is the code for the buttons view inside the left column and the styles:
Grid.cshtml
<div class="linkContainer">
<div class="linkContainer-grid">
#foreach (var link in Model.Links)
{
<div class="linkContainer-gridItem">
<a class="linkContainer-gridItem-link" href="#link.Url">
#if (!string.IsNullOrEmpty(link.Icon))
{
<div><i class="icon #link.Icon"></i></div>
}
#link.Label
</a>
</div>
}
</div>
Grid.scss
.linkContainer {
padding: 1rem;
margin-bottom: 2rem;
position: relative;
background: #fff;
border-radius: 8px;
border: 1px solid #dddfe2;
.linkContainer-title {
color: #fff;
background: $colorBrandDarkBlue;
padding: 1rem;
border-radius: 5px;
margin: -.5rem -.5rem 1rem -.5rem;
}
.linkContainer-list {
list-style: none;
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
.linkContainer-item {
position: relative;
.linkContainer-link {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: .75rem .5rem;
color: $colorBrandBlue;
font-weight: 400;
font-size: 18px;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
text-decoration: none;
background-color: transparent;
font-family: "Montserrat",sans-serif;
}
.icon:before {
font-size: 30px;
margin-right: 1rem;
}
}
.linkContainer-item:after {
content: '';
position: absolute;
top: 0;
right: 0;
left: 0;
border-top: 1px dotted;
opacity: .25;
}
}
.linkContainer-grid {
padding: 0;
margin-bottom: 0;
font-family: "Montserrat",sans-serif;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
text-align: center;
flex-wrap: wrap;
.linkContainer-gridItem {
flex: 0 1 50%;
padding: 20px 10px;
background-color: $colorBrandBlue;
border-radius: 25px;
align-items: center;
justify-content: center;
width: calc(50% - 20px);
margin: 10px 0;
min-width: 100px;
max-width: 130px;
.linkContainer-gridItem-link {
color: white;
text-decoration: none;
}
.icon {
font-size: 30px;
margin-bottom: 0.25rem;
}
}
}
#media (min-width: 1024px) {
.linkContainer-grid {
justify-content: center;
.linkContainer-gridItem {
margin: 10px;
}
}
}
}
How can I make it two items per row whilst keeping the buttons the same size and alignments?

First of all, if you set a max-width on your .linkContainer-gridItem, it will display all 4 items in a row, because flex box is trying to put as many items as possible in a row, before it has to wrap.
In order to put 2 items per row, the first step is to remove min-width and max-width. In fact, you can remove width as well because you can control it via flex:.
demo: https://jsfiddle.net/davidliang2008/zv5tsrd1/22/
Now in order to display 2 items per row, you need to set the total item width to be 50%. But the property flex-basis: as well as width: is just meant content width. This might be a good time to review the box model: https://www.w3schools.com/css/css_boxmodel.asp
We need to figure out the correct content width so that the total item width, including borders, paddings and margins, would be 50%:
content width = 50% - borders - paddings - margins
On break point less than 1024px, you have 10px padding left and right, so the content width of the item should be
.linkContainer-gridItem {
flex: 0 1 calc(50% - 2*10px);
}
At break point 1024px and up, you have extra 10px margin left and right, so the content width of the item should be
#media (min-width: 1024px) {
.linkContainer-grid {
justify-content: center;
.linkContainer-gridItem {
flex-basis: calc(50% - 2*10px - 2*10px);
margin: 10px;
}
}
}
demo: https://jsfiddle.net/davidliang2008/zv5tsrd1/27/

Am I missing something?
I am trying to make the dropdown menu to appear. when i make the page smaller i can see that the menu appear on the bar (i can see only the tip of the "home" option). but, when the page is wide open it seems like it doesn't open at all.
<ul>
<li><a style="color:#1a1a1a;" class="welcometitle">Welcome back! <asp:Label ID="lblusuario" runat="server" ForeColor="#99ccff" Font-Bold="true"></asp:Label></a></li>
<li style="float:right; background-color: #4CAF50;" class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" role="button" <%--onclick="myfunction()"--%> href="#">
<i class="fa fa-bars"></i>
</a>
<ul class="dropdown-menu" role="listbox">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li style="float:right; padding-right:10px; padding-top:5px; padding-left:5px;"><input type="text" class="form-control" placeholder="Search.." name="search"/></li>
<li style="float:right; padding-right:0px; padding-top:5px; background-color:#ffffff"><button class="btn" type="submit"><i class="fa fa-search" style=""></i></button></li>
</ul>
this is my css code, i really don't understand where am I wrong
.searchbar {
float: left;
margin: 0px 0;
}
ul#navigation {
float: left;
margin: 0 20px 0 0;
}
ul#navigation li {
display: inline;
margin-right: 10px;
}
* {box-sizing: border-box;}
ul {
list-style-type: none;
margin: 0;
padding-left: 160px;
overflow: hidden;
background-color: #1160a2;
top:0;
width:100%;
position:fixed;
}
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}
li {
float: left;
}
li a {
/*display: block;*/
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
color: white;
}
.active {
background-color: #4CAF50;
}
.search-container {
float: right;
}
.li input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 25px;
border: none;
}
.search-container button {
float: right;
padding: 6px 10px;
margin-top: 2px;
margin-right: 16px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.search-container button:hover {
background: #ccc;
}

in case someone has the same problem i found out that the answer was on the css class:
.show {display: block;}
just added "position: fixed" and that was it
.show {display: block;
position: fixed;
}

I'm using Rotativa resources to create PDF files from my HTML page on an MVC ASP.NET project. Here is my code
...........
[HttpGet]
public ActionResult DownloadCertificate()
{
return View();
}
public ActionResult DownloadViewPDF()
{
return new Rotativa.ViewAsPdf("DownloadCertificate") { FileName = "TestViewAsPdf.pdf" };
}
priblem is it not generating my desire view's pdf.instate of it its generating my home page pdf..
my view for ActionResult DownloadCertificate() action =>
#{
ViewBag.Title = "DownloadCertificate";
Layout = "";
}
<html>
<head id="Head1">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>
Krogarna.se Certificate
</title>
<style type="text/css" media="print">
{
left: 0px !important;
width: 11in !important;
height: 8.5in !important;
font-size: 107% !important;
}
</style>
<style type="text/css" media="all">
#top {
height: 100%;
}
#position_me {
left: 0;
}
.SlideBackGround {
height: 650px;
width: 880px;
position: fixed;
margin: 10px 10px 10px 10px;
background-color: white;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/frame.png);
background-size: 880px 650px;
background-repeat: no-repeat;
z-index: 2;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/frame.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='frame.png',sizingMethod='scale')";
}
.MiddlePart {
height: 170px;
width: 670px;
position: fixed;
left: 125px;
top: 80px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/middle_part.png);
background-size: 670px 170px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/middle_part.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='middle_part.png',sizingMethod='scale')";
}
.Seal {
height: 90px;
width: 90px;
position: fixed;
left: 415px;
top: 420px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/sigill.png);
background-size: 90px 90px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/sigill.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='sigill.png',sizingMethod='scale')";
}
.Ribbon {
width: 60px;
height: 90px;
position: fixed;
left: 435px;
top: 520px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/band.png);
background-size: 60px 90px;
background-repeat: no-repeat;
z-index: 5;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/band.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='band.png',sizingMethod='scale')";
}
.Signature {
width: 180px;
height: 90px;
position: fixed;
left: 582px;
top: 517px;
background-image: url(http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/signature.png);
background-size: 180px 90px;
background-repeat: no-repeat;
z-index: 11;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://dotnet.ondev.com/ft63/content/sections/certificates/upload/krogarnase/signature.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='signature.png',sizingMethod='scale')";
}
.DateLine {
width: 300px;
position: fixed;
left: 112px;
top: 570px;
z-index: 11;
}
.ExaminerLine {
width: 300px;
position: fixed;
left: 500px;
top: 570px;
z-index: 11;
}
.ExaminerText {
width: 270px;
position: fixed;
left: 632px;
top: 585px;
color: #8B7B67;
z-index: 11;
}
.DateText {
width: 270px;
position: fixed;
left: 232px;
top: 585px;
z-index: 11;
color: #8B7B67;
}
.ParagraphSmall {
height: 200px;
width: 500px;
position: fixed;
left: 200px;
top: 350px;
font-size: 13px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.ParagraphMedium {
height: 200px;
width: 420px;
position: fixed;
left: 240px;
top: 260px;
font-size: 14px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.HeadingLarge {
height: 200px;
width: 600px;
position: fixed;
left: 330px;
top: 130px;
font-size: 66px;
z-index: 11;
color: #8B7B67;
}
.MiddleLine {
width: 720px;
position: fixed;
left: 100px;
top: 330px;
z-index: 11;
color: #8B7B67;
}
.StudentName {
font-weight: bold;
height: 200px;
width: 720px;
position: fixed;
left: 100px;
top: 310px;
font-size: 18px;
text-align: center;
z-index: 11;
color: #8B7B67;
}
.CompletionDate {
position: fixed;
left: 225px;
top: 555px;
z-index: 11;
color: #8B7B67;
text-align: center;
}
</style>
</head>
<body>
<div class="SlideBackGround">
</div>
<div class="MiddlePart">
</div>
<div class="HeadingLarge">Kursintyg</div>
<div class="ParagraphMedium">
HÄRMED INTYGAS
ATT NEDANSTÅENDE PERSON KLARAT UTBILDNINGEN
SERVERINGSTILLSTÅND
</div>
<div class="ParagraphSmall">
Ni har visat prov på förståelse och kunnighet inom området alkoholservering. De 4 delar
som avhandlats är: alkoholpolitik, tillsyn, servering samt mat, lokal och utrustning. Ni har
efter denna utbildning de teoretiska kunskaper som krävs för att servera alkoholhaltiga
drycker.
</div>
<div class="Seal"></div>
<div class="Ribbon"></div>
<hr class="DateLine" />
<hr class="ExaminerLine" />
<hr class="MiddleLine" />
<div class="DateText">Datum</div>
<div class="ExaminerText">Examiner</div>
<div class="Signature"></div>
<div id="CompletionDatePanel" class="CompletionDate">
<span id="CompletionDateLabel">1/1/2014</span>
</div>
<div id="StudentNamePanel" class="StudentName">
<span id="StudentNameLabel">John Doe</span>
</div>
</body>
</html>
now instate of creating above views pdf it is generating my home(login) view ..cant make any sense why ...
if there anyone who can help me about this.or can give me any tip how to get rid of this . or why i have done wrong. this will be greatfull.thanks in advance.....

Maybe Rotativa is running as a different as the one logged into the app, thus, when Rotativa tries to display the page to generate the pdf, asp.mvc tells that that use users is not authenticated and redirects to the home page.
To avoid that issue, you have to autorize all users to excecute the action:
[Authorize]
[HttpGet]
public ActionResult DownloadCertificate()
{
return View();
}

so right now, I have many buttons on a webpage. Most of these buttons contain one url which when clicked directly sends you to the webpage with the url. Some buttons, however, consist of multiple urls. For these buttons, I would like a white text box with the list of urls to appear after the user clicks the button. Separating these multiple urls buttons into single url buttons is not an option.
I've looked into System.Windows.Forms.MessageBox. but that does not produce desirable results.
I appreciate any help I can get. Thanks in advance.

hidden checkbox css:
html {
width: 100%;
height: 100%;
background: indigo;
text-align: center;
font-family: arial, sans-serif;
}
a, a:active, a:visited, a:focus {
text-decoration: none;
font-weight: bold;
color: indigo;
}
input {
display: none;
}
#target {
display: none;
}
#click:checked ~ label > #target {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
display: inline-block;
height: 80%;
width: 80%;
background-color: white;
outline: 6px double white;
}
.item {
color: white;
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
right: 0;
margin: auto;
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
.warning {
position: fixed;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left:0;
right:0;
margin: auto;
}
<input type="checkbox" id="click" name="click" value="click" />
<label for="click">
<p class="item"><b>google.com</b></p>
<div id=target class="item"><div class=warning>
images.google.com<br>
maps.google.com<br>
drive.google.com</div></div>
</label>

I am using Selenium in IE 11 with C# to automate some task. I am able to open URL in IE and click on some button but i stuck in one problem like other xpath i click on one image link but it always show xpath not found.
Here is the HTML code of the link
I tried it with both ID name src etc but no success.
<li>
<INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close
due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
-
You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: ; BORDER-TOP- WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose>
<li>
Selenium Code
driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).Click();
Please help how could I write xpath for this as this application only open in IE.
here is the extended code with style
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
LI {
margin: 0;
padding: 0;
}
LI {
list-style: none;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
LI {
float: left;
line-height: 15px;
margin: 0px 0px 0px 5px;
}
UL {
margin: 0;
padding: 0;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
UL {
list-style-image: none;
list-style-position: outside;
list-style-type: none;
}
DIV {
margin: 0;
padding: 0;
}
.TicketDetailHeaderRight {
float: right;
}
.TicketDetailHeader {
margin: 0px;
padding: 0 5px 5px;
min-height: 15px;
}
.SectionBody {
margin: 5px;
}
.Section {
border: 1px solid #000;
}
FORM {
margin: 0;
padding: 0;
}
BODY {
color: #000;
}
BODY {
margin: 0;
padding: 0;
}
BODY {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
font-size: ;
font: x-small;
}
BODY {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
HTML {
margin: 0px;
padding: 0px;
color: #000000;
font-family: Verdana;
font-size: 83%;
line-height: normal;
}
INPUT {
margin: 0;
padding: 0;
}
INPUT {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
</style>
</head>
<BODY><FORM id=formTicketDetail method=post name=formTicketDetail action=wfTicketDetail.aspx?TicketId=C110041540 _events="[object Object]">
<DIV class=Section>
<DIV class=SectionBody>
<DIV class=TicketDetailHeader>
<DIV id=ucTicketDetail1_divBtnBar class=TicketDetailHeaderRight>
<DIV id=ucTicketDetail1_updatePanelPostSaveActions>
<DIV id=ucTicketDetail1_divPostSaveActions class=PostSaveActions>
<UL>
<LI><INPUT disabled id=ucTicketDetail1_btnClose title="- Cannot close due to CM stage. Ticket must be in CM Approved or Preproduction Approved stage.
- You don't have permission to close.
- No longer editable." style="BORDER-LEFT-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-TOP-WIDTH: 0px" src="../images/tasks_disabled.gif" type=image name=ucTicketDetail1$btnClose> </LI></UL></DIV></DIV></DIV></DIV></DIV></DIV></FORM></BODY>
</html>

i solve this question , actually image button is located under 2 iframe. I switch to Iframe then it start working.
Here is the code
driver.SwitchTo().Frame("wfMainIFrame");
driver.SwitchTo().Frame("wfCaseIFrame");
string atb = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("disabled");
string title = driver.FindElement(By.XPath("//input[#id='ucTicketDetail1_btnClose']")).GetAttribute("title");
Thanks for the help.