Displaying Description in Knockout on clicking Title - css

I have a asp.net mvc2 page where I display data with titles and descriptions using knockout. I want to hide descriptions and show description based on clicked title. any help would be appreciated. Also I would like to apply h1 tag to title.
<div id="dataDiv">
<table style="text-align: left" border="0">
<tbody>
<!-- ko foreach: list -->
<tr>
<td colspan="2" data-bind="text: title">
</td>
</tr>
<tr>
<td colspan="2" data-bind="text: description">
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px;
width: 100%;" />
</td>
</tr>
<!-- /ko -->
</tbody>
</table>

Is this is what You are looking for?
Working demo http://jsfiddle.net/Rgxy9/
HTML:
<table style="text-align: left" border="0">
<tbody data-bind="foreach: list">
<tr>
<td colspan="2" data-bind="click: $root.select">
<h1 data-bind="text: title" />
</td>
</tr>
<tr data-bind="visible: $root.selected() == $data">
<td colspan="2" data-bind="text: description">
</td>
</tr>
<tr>
<td colspan="2">
<hr style="border-top: 1px dotted #f00; color: #fff; background-color: #fff; height: 1px;
width: 100%;" />
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
var item = function(title, desc) {
this.title = ko.observable(title);
this.description = ko.observable(desc);
};
var vm = function() {
var self = this;
this.list = ko.observableArray([new item('some', 'desc'),
new item('som2', 'desc2')]);
this.selected = ko.observable();
this.select = function(item) {
self.selected(item);
};
};
ko.applyBindings(new vm());
</script>

Related

Trying to use table to achieve CSS responsiveness but not working

I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->

HTML table alignment not working

I am trying to create a table with one column and 3 rows. I want to take the heading of the table ie. Role in the center and along with that the line below Role, I want to make it small lengthwise. My row values are not aligned properly well. PLease find my attached screenshot
My code
<div style="text-align: center" class="form-group" ng-if="isNew">
<table class="table table-inverse">
<thead>
<tr class="bg-primary">
<th width="14%">
<span>Role</span>
</th>
</tr>
</thead>
</table>
<table class="table table-inverse">
<tr>
<td style="border: none">
<input type="checkbox" name = "role" value = "Super" />Super</td>
</tr>
<tr>
<td style="border: none">
<input type="checkbox" name = "role" value = "Power" />Power</td>
</tr>
<tr>
<td style="border: none">
<input type="checkbox" name = "role" value = "Regular" />Regular</td>
</tr>
</table>
</div>
I applied some CSS and wrapped your checkbox elements in a DIV. Please see the snippet.
th {
width: 100vw;
}
th > span {
width: 14%;
display: inline-block;
border-bottom: 1px #ccc solid;
}
td {
width: 100vw;
text-align: center;
}
.checkbox {
width: 80px;
margin: auto;
text-align: left;
}
.checkbox input {
margin-right: 7px;
}
<div class="form-group" ng-if="isNew">
<table class="table table-inverse">
<thead>
<tr class="bg-primary">
<th>
<span>Role</span>
</th>
</tr>
</thead>
</table>
<table class="table table-inverse">
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name = "role" value = "Super" />Super
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name = "role" value = "Power" />Power
</div>
</td>
</tr>
<tr>
<td>
<div class="checkbox">
<input type="checkbox" name = "role" value = "Regular" />Regular
</div>
</td>
</tr>
</table>
</div>

Double scrollbar when displaying PDF in Telerik RadWindow

I have a page that displays a pdf report in a RadWindow via javascript, but for some reason it has two sets of vertical scrollbars: one created by Internet Explorer and one in the PDF itself.
I am displaying other PDF reports in the exact same fashion, the only difference between this one that I can see is that the report is loaded from a different domain(just different port in the development environment, still the same physical server either way).
This does not happen on Chrome, only on IE. And I can't even seem to get either of the scrollbars removed even using the DOM editor in IE's development tools.
I've tried giving the radwindow a CSS class which set overflow to hidden and display inline, the report page itself also has html and body with those settings.
Here is the javascript code I use to open the radwindow:
function showRadWindowSupply(url, title) {
var oWnd = $find("<%=_rwInvoice.ClientID%>");
oWnd.setUrl(url);
oWnd.set_title(title);
oWnd.show();
sizeRadWindowSupply(oWnd, 70, 80);
return false;
}
function sizeRadWindowSupply(oWnd, width, height) {
var browserWidth = $telerik.$(window).width();
var browserHeight = $telerik.$(window).height();
oWnd.setSize(Math.ceil(browserWidth * width / 100), Math.ceil(browserHeight * height / 100));
oWnd.center();
}
Here is the RadWindow markup used on the aspx page:
<telerik:RadWindowManager id="_rwm1" runat="server">
<Windows>
<telerik:RadWindow ID="_rwInvoice" runat="server" Behaviors="Close,Maximize" CssClass="holdsSplitter" AutoSize="false" VisibleStatusbar="false" Modal="true" ></telerik:RadWindow>
</Windows>
</telerik:RadWindowManager>
And here is the HTML that is generated for the RadWindow:
<div class="RadWindow RadWindow_Telerik rwNormalWindow rwTransparentWindow holdsSplitter" id="RadWindowWrapper_ctl00_ContentPlaceHolder1__rwInvoice" style="left: 204px; top: 58px; width: 957px; height: 472px; visibility: visible; position: absolute; z-index: 3001; -ms-touch-action: none; transform: none; backface-visibility: visible;" unselectable="on">
<table class="rwTable" style="height: 433px;" cellspacing="0" cellpadding="0">
<tbody>
<tr class="rwTitleRow">
<td class="rwCorner rwTopLeft"> </td>
<td class="rwTitlebar">
<div class="rwTopResize">
<!-- / -->
</div>
<table align="left" class="rwTitlebarControls" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 16px;"><a class="rwIcon"></a></td>
<td><em style="width: 847px;" unselectable="on">Supply Orders Invoice</em></td>
<td nowrap="" style="white-space: nowrap;">
<ul class="rwControlButtons" style="width: 62px;">
<li><a title="Maximize" class="rwMaximizeButton" href="javascript:void(0);"><span>Maximize</span></a></li>
<li><a title="Close" class="rwCloseButton" href="javascript:void(0);"><span>Close</span></a></li>
</ul>
</td>
</tr>
</tbody>
</table>
</td>
<td class="rwCorner rwTopRight"> </td>
</tr>
<tr class="rwContentRow">
<td class="rwCorner rwBodyLeft"> </td>
<td class="rwWindowContent rwExternalContent" valign="top">
<iframe name="_rwInvoice" src="http://devsvr:87/Reports/StaticReports/OrderHistoryDetail.aspx?ID=1748" frameborder="0" style="border: 0px currentColor; width: 100%; height: 100%;"></iframe>
</td>
<td class="rwCorner rwBodyRight"> </td>
</tr>
<tr class="rwStatusbarRow" style="display: none;">
<td class="rwCorner rwBodyLeft"> </td>
<td class="rwStatusbar">
<table align="left" style="width: 100%;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td style="width: 100%;">
<input tabindex="-1" class="rwLoading" id="ctl00_ContentPlaceHolder1__rwInvoice_status" readonly="" unselectable="on"><label style="display: none;" for="ctl00_ContentPlaceHolder1__rwInvoice_status">status label</label></td>
</tr>
</tbody>
</table>
</td>
<td class="rwCorner rwBodyRight"> </td>
</tr>
<tr class="rwFooterRow">
<td class="rwCorner rwFooterLeft"> </td>
<td class="rwFooterCenter"> </td>
<td class="rwCorner rwFooterRight"> </td>
</tr>
</tbody>
</table>
</div>
Any suggestions are greatly appreciated.

how to make div overflow when there're some tables in the div content

My html code with inline css:
<div id="ggicci_syntax_highlighter" style="border: solid 3px black; cursor: text; overflow-x: auto; width: 100%;">
<table id="ggicci_outer_table" cellspacing="0" style="font-family:Consolas;">
<colgroup>
<col style="background-color: #44F;"><!-- You can set font here -->
<col style="background-color: #f4f4f4; width: 100%;">
</colgroup>
<tr>
<td></td><!-- corner -->
<td id="ggicci_language_text" style="font-size:25px; color: #777; font-family: Arial Black;"> <!-- header -->
C++
</td>
</tr>
<tr>
<td>
<table id="ggicci_line_number" style="font-size: 14px; color: #DDD;"><!-- You can set style here -->
<tr>
<td>1:</td>
</tr>
<tr>
<td>2:</td>
</tr>
<tr>
<td>3:</td>
</tr>
<tr>
<td>4:</td>
</tr>
<tr>
<td>5:</td>
</tr>
<tr>
<td>6:</td>
</tr>
<tr>
<td>7:</td>
</tr>
<tr>
<td>8:</td>
</tr>
</table>
</td>
<td>
<table id="ggicci_code_body" style="font-size: 14px; width: 100%;"><!-- You can set style here -->
<tr>
<td style="background: #FFF">
<span style="color:#FF7700; font-weight:bold;">#include</span> <iostream>
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">using</span> namespace std;
</td>
</tr>
<tr>
<td style="background: #FFF">
</td>
</tr>
<tr>
<td>
<span style="color:blue; font-weight:bold;">int</span> main()
</td>
</tr>
<tr>
<td style="background:#FFF;">
{
</td>
</tr>
<tr>
<td>
std::cout << <span style="color:#EB2244;">"Hello World!"</span> << std::endl;<span style="color:green;">//write "Hello World!" to console............................................................</span>
</td>
</tr>
<tr>
<td style="background: #FFF"> <span style="color:blue; font-weight:bold;">return</span> 0;</td>
</tr>
<tr>
<td>
}
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
and I can't make the content in div scroll when the text in a line in the table where the id is "ggicci_code_body" overflows. I'm new to css and now I'm designing a syntax highlighter for programming practice. So any solution? and why this can't work?
Add '<!doctype html>' at the start of html file.

Ways to stick footer to the bottom a page

I followed the How do you get the footer to stay at the bottom of a Web page? post on stackoverflow...
But i couldn't make it too work in an asp.net web application.... I am using a master page for all pages...
How can i make footer stick to the bottom of the page?
For ref:
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0" class="bgpatt">
<tr style="height:25px;">
<td style="width:40%">
</td>
<td style="width:30%">
</td>
<td style="width:30%;" valign="top">
<div id="headermenu" style="width:300px;"><ul style="width:300px;">
<li><a title="Home" href="#" class="headerhome">Home</a></li>
<li><a title="About Us" href="#" class="aboutus">About Us</a></li>
<li><a title="Contact Us" href="#" class="contactus">Contact Us</a></li>
<li><a title="Feedback" href="#" class="feedback">Feedback</a></li>
<li><a title="Logout" href="#" class="logout">Logout</a></li>
</ul></div>
</td>
</tr>
<tr style="height:25px;">
<td colspan="3">
</td>
</tr>
<tr style="height:25px;">
<td colspan="3">
</td>
</tr>
</table>
</td>
</tr>
<tr valign="top">
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr style="height:5px; background-color:#404040;">
<td colspan="3" valign="top" style="width:100%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td style="width:45%;">
</td>
<td style="width:45%;">
<div id="header" style="width:300px;"><ul id="mainMenu" runat="server">
<li id="mainHome" runat="server"><span></span>Home</li>
<li id="mainManage" runat="server"><span></span>Manage</li>
<li id="mainEnquiry" runat="server"><span></span>Enquiry</li>
<li id="mainReport" runat="server"><span></span>Report</li>
</ul>
</div>
</td>
<td style="width:10%;">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%">
<tr valign="top">
<td style="width:1px;"><div style="width:1px; height:450px;"></div></td>
<td style="width:95%">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</td>
<td style="width:5%">
<asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<div class="wrapper"></div>
</td>
</tr>
<tr>
<td>
<table cellpadding="0" cellspacing="0" width="100%" style="height:25px;">
<tr>
<td></td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="100%" style="height:35px; top:10px;" class="footer">
<tr>
<td style="width:100%;" align="center">
Home |
About us |
Contact us |
Feedback
</td>
</tr>
<tr>
<td style="width:100%;" align="center" class="footer_text">
Copy Rights Xavytechnologies
</td>
</tr>
</table>
</td>
</tr>
</table>
I suggest to use a div like
<div id="Footer"> content </div>
then in your css put this
#Footer
{
position: absolute;
bottom: 0px;
height: 3px;
background-color: #666;
color: #eee;
}
or you can use AjaxControlToolkit library
I Also strongly recommand you change your layout from Table to div
I'm would also recommend a div structure using floating.
Markup:
<div class="bodyWrap">
<div class="header">
<!-- Insert content here -->
</div>
<div class="content">
<!-- Insert content here -->
</div>
<div class="footer">
<!-- Insert content here -->
</div>
<div style="clear:both"></div>
</div>
Css:
.bodyWrap
{
width: 500px;
}
.header, .content, .footer
{
width: 100%;
float:left;
}
I liked below better. It only works with an id and not with a class.
<div id="Footer"> content </div>
#Footer {
position: fixed;
bottom: 0px;
}

Resources