WordPress.org

Ready to get started?Download WordPress

Forums

Inline Google Spreadsheet Viewer
[resolved] Cannot freeze columns (9 posts)

  1. jonaskp
    Member
    Posted 6 months ago #

    Just found this and started using it with my wordpress page.

    Showing the spreadsheet in a table works great, but I have one issue.

    I would like to freeze the first 2 rows of my spreadsheet, but it doesn’t work. I have entered the following:

    [gdoc key="xxx" class="FixedColumns-left-3"]

    It doesn’t seem that I have the DataTable controls either, which might be why this isn’t working?

    Do you have any idea why this could be?

    https://wordpress.org/plugins/inline-google-spreadsheet-viewer/

  2. Meitar
    Member
    Plugin Author

    Posted 6 months ago #

    Maybe the JavaScript for the DataTables aren't loading? Double check that you aren't using something like NoScript to block JavaScript on the page? View source on your page and make sure you see a few <script> lines that are including the scripts from cdn.datatables.net?

    Also, note that FixedColumns-left-3 will freeze columns, not rows. Only the header rows can be frozen. Use the shortcode's header_rows for determining how many rows you'd like to put inside your table's <thead> output HTML.

  3. jonaskp
    Member
    Posted 6 months ago #

    I have done absolutely nothing to my wordpress site, than make a page containing the spreadsheet table. So if I'm using some sort of no script, I am not aware of it :-).

    This is my code and I can see some lines that match what you are saying:

    <!DOCTYPE html>
    <!--[if IE 7]>
    <html class="ie ie7" lang="en-US">
    <![endif]-->
    <!--[if IE 8]>
    <html class="ie ie8" lang="en-US">
    <![endif]-->
    <!--[if !(IE 7) | !(IE 8)  ]><!-->
    <html lang="en-US">
    <!--<![endif]-->
    <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Herretur 2014 | We are gone crank it up to eleven!</title>
    <link rel="profile" href="http://gmpg.org/xfn/11" />
    <link rel="pingback" href="http://herretur2014.servplads.in/xmlrpc.php" />
    <!--[if lt IE 9]>
    <script src="http://herretur2014.servplads.in/wp-content/themes/twentytwelve/js/html5.js" type="text/javascript"></script>
    <![endif]-->
    <meta name='robots' content='noindex,follow' />
    <link rel="alternate" type="application/rss+xml" title="Herretur 2014 &raquo; Feed" href="http://herretur2014.servplads.in/?feed=rss2" />
    <link rel="alternate" type="application/rss+xml" title="Herretur 2014 &raquo; Comments Feed" href="http://herretur2014.servplads.in/?feed=comments-rss2" />
    <link rel='stylesheet' id='open-sans-css'  href='//fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C600&subset=latin%2Clatin-ext&ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='dashicons-css'  href='http://herretur2014.servplads.in/wp-includes/css/dashicons.min.css?ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='admin-bar-css'  href='http://herretur2014.servplads.in/wp-includes/css/admin-bar.min.css?ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='twentytwelve-fonts-css'  href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700&subset=latin,latin-ext' type='text/css' media='all' />
    <link rel='stylesheet' id='twentytwelve-style-css'  href='http://herretur2014.servplads.in/wp-content/themes/twentytwelve-child/style.css?ver=3.9.2' type='text/css' media='all' />
    <!--[if lt IE 9]>
    <link rel='stylesheet' id='twentytwelve-ie-css'  href='http://herretur2014.servplads.in/wp-content/themes/twentytwelve/css/ie.css?ver=20121010' type='text/css' media='all' />
    <![endif]-->
    <script type='text/javascript' src='http://herretur2014.servplads.in/wp-includes/js/jquery/jquery.js?ver=1.11.0'></script>
    <script type='text/javascript' src='http://herretur2014.servplads.in/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://herretur2014.servplads.in/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://herretur2014.servplads.in/wp-includes/wlwmanifest.xml" />
    <meta name="generator" content="WordPress 3.9.2" />
    	<style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style>
    <style type="text/css" id="custom-background-css">
    body.custom-background { background-color: #bbd886; }
    </style>
    <style type="text/css" media="print">#wpadminbar { display:none; }</style>
    <style type="text/css" media="screen">
    	html { margin-top: 32px !important; }
    	* html body { margin-top: 32px !important; }
    	@media screen and ( max-width: 782px ) {
    		html { margin-top: 46px !important; }
    		* html body { margin-top: 46px !important; }
    	}
    </style>
    </head>
    
    <body class="home page page-id-15 page-template-default logged-in admin-bar no-customize-support custom-background custom-font-enabled single-author">
    <div id="page" class="hfeed site">
    	<header id="masthead" class="site-header" role="banner">
    		<hgroup>
    			<h1 class="site-title"><a href="http://herretur2014.servplads.in/" title="Herretur 2014" rel="home">Herretur 2014</a></h1>
    			<h2 class="site-description">We are gone crank it up to eleven!</h2>
    		</hgroup>
    
    		<nav id="site-navigation" class="main-navigation" role="navigation">
    			<h3 class="menu-toggle">Menu</h3>
    			<a class="assistive-text" href="#content" title="Skip to content">Skip to content</a>
    			<div class="nav-menu"><ul><li class="current_page_item"><a href="http://herretur2014.servplads.in/">Home</a></li></ul></div>
    		</nav><!-- #site-navigation -->
    
    				<a href="http://herretur2014.servplads.in/"><img src="http://herretur2014.servplads.in/wp-content/uploads/2014/08/856214_10152005669529854_1493239022_o2.jpg" class="header-image" width="1260" height="240" alt="" /></a>
    			</header><!-- #masthead -->
    
    	<div id="main" class="wrapper">
    	<div id="primary" class="site-content">
    		<div id="content" role="main">
    
    	<article id="post-15" class="post-15 page type-page status-publish hentry">
    		<header class="entry-header">
    												<h1 class="entry-title">Samlet Stilling</h1>
    		</header>
    
    		<div class="entry-content">
    			<pre><table id="igsv-1B5ZGdmGdai-QmFnkVNpf4C8a8cBeMiOv-NgKNHypr-g" class="igsv-table" summary="Google Spreadsheet"><thead>
    <tr class="row-1 odd"><th class="col-1 odd"><div> </div></td><th class="col-2 even"><div>Hold</div></td><th class="col-3 odd"><div>   Placering   </div></td><th class="col-4 even"><div>   Samlede point   </div></td><th class="col-5 odd"><div>   Der König   </div></td><th class="col-6 even"><div>   Netcafe   </div></td><th class="col-7 odd"><div>   Fodtennis   </div></td><th class="col-8 even"><div>   Kiwi Vin Stafet   </div></td></tr></thead><tbody><tr class="row-2 even"><td class="col-1 odd"></td><td class="col-2 even">Forsvarstalenterne</td><td class="col-3 odd">2</td><td class="col-4 even">10</td><td class="col-5 odd">1</td><td class="col-6 even">5</td><td class="col-7 odd">4</td><td class="col-8 even">0</td></tr><tr class="row-3 odd"><td class="col-1 odd"></td><td class="col-2 even">Hold 2</td><td class="col-3 odd">1</td><td class="col-4 even">13</td><td class="col-5 odd">2</td><td class="col-6 even">1</td><td class="col-7 odd">6</td><td class="col-8 even">4</td></tr><tr class="row-4 even"><td class="col-1 odd"></td><td class="col-2 even">Hold 3</td><td class="col-3 odd">3</td><td class="col-4 even">7</td><td class="col-5 odd">0</td><td class="col-6 even">3</td><td class="col-7 odd">2</td><td class="col-8 even">2</td></tr></tbody></table></pre>
    					</div><!-- .entry-content -->
    		<footer class="entry-meta">
    			<span class="edit-link"><a class="post-edit-link" href="http://herretur2014.servplads.in/wp-admin/post.php?post=15&action=edit">Edit</a></span>		</footer><!-- .entry-meta -->
    	</article><!-- #post -->
    
    <div id="comments" class="comments-area">
    
    </div><!-- #comments .comments-area -->
    		</div><!-- #content -->
    	</div><!-- #primary -->
    
    			<div id="secondary" class="widget-area" role="complementary">
    					<aside id="recent-posts-2" class="widget widget_recent_entries">		<h3 class="widget-title">Recent Posts</h3>		<ul>
    					<li>
    				<a href="http://herretur2014.servplads.in/?p=23">Dette er en kladde test</a>
    						</li>
    				</ul>
    		</aside><aside id="recent-comments-2" class="widget widget_recent_comments"><h3 class="widget-title">Recent Comments</h3><ul id="recentcomments"></ul></aside><aside id="categories-2" class="widget widget_categories"><h3 class="widget-title">Categories</h3>		<ul>
    	<li class="cat-item cat-item-1"><a href="http://herretur2014.servplads.in/?cat=1" title="View all posts filed under Uncategorized">Uncategorized</a>
    </li>
    		</ul>
    </aside><aside id="meta-2" class="widget widget_meta"><h3 class="widget-title">Meta</h3>			<ul>
    			<li><a href="http://herretur2014.servplads.in/wp-admin/">Site Admin</a></li>			<li><a href="http://herretur2014.servplads.in/wp-login.php?action=logout&_wpnonce=a9a48a7060">Log out</a></li>
    			<li><a href="http://herretur2014.servplads.in/?feed=rss2" title="Syndicate this site using RSS 2.0">Entries <abbr title="Really Simple Syndication">RSS</abbr></a></li>
    			<li><a href="http://herretur2014.servplads.in/?feed=comments-rss2" title="The latest comments to all posts in RSS">Comments <abbr title="Really Simple Syndication">RSS</abbr></a></li>
    <li><a href="https://wordpress.org/" title="Powered by WordPress, state-of-the-art semantic personal publishing platform.">WordPress.org</a></li>			</ul>
    </aside>		</div><!-- #secondary -->
    		</div><!-- #main .wrapper -->
    	<footer id="colophon" role="contentinfo">
    		<div class="site-info">
    						<a href="http://wordpress.org/" title="Semantic Personal Publishing Platform">Proudly powered by WordPress</a>
    		</div><!-- .site-info -->
    	</footer><!-- #colophon -->
    </div><!-- #page -->
    
    <link rel='stylesheet' id='jquery-datatables-css'  href='//cdn.datatables.net/1.10.0/css/jquery.dataTables.css?ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='datatables-colvis-css'  href='//cdn.datatables.net/colvis/1.1.0/css/dataTables.colVis.css?ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='datatables-tabletools-css'  href='//cdn.datatables.net/tabletools/2.2.1/css/dataTables.tableTools.css?ver=3.9.2' type='text/css' media='all' />
    <link rel='stylesheet' id='datatables-fixedcolumns-css'  href='//datatables.net/release-datatables/extensions/FixedColumns/css/dataTables.fixedColumns.css?ver=3.9.2' type='text/css' media='all' />
    <script type='text/javascript' src='http://herretur2014.servplads.in/wp-includes/js/admin-bar.min.js?ver=3.9.2'></script>
    <script type='text/javascript' src='http://herretur2014.servplads.in/wp-content/themes/twentytwelve/js/navigation.js?ver=20140318'></script>
    <script type='text/javascript' src='//cdn.datatables.net/1.10.0/js/jquery.dataTables.js?ver=3.9.2'></script>
    <script type='text/javascript' src='//cdn.datatables.net/colvis/1.1.0/js/dataTables.colVis.min.js?ver=3.9.2'></script>
    <script type='text/javascript' src='//cdn.datatables.net/tabletools/2.2.1/js/dataTables.tableTools.min.js?ver=3.9.2'></script>
    <script type='text/javascript' src='//datatables.net/release-datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js?ver=3.9.2'></script>
    <script type='text/javascript' src='http://herretur2014.servplads.in/wp-content/plugins/inline-gdocs-viewer.js?ver=3.9.2'></script>
    	<script type="text/javascript">
    		(function() {
    			var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
    
    			request = true;
    
    			b[c] = b[c].replace( rcs, ' ' );
    			b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
    		}());
    	</script>
    			<div id="wpadminbar" class="nojq nojs" role="navigation">
    			<a class="screen-reader-shortcut" href="#wp-toolbar" tabindex="1">Skip to toolbar</a>
    			<div class="quicklinks" id="wp-toolbar" role="navigation" aria-label="Top navigation toolbar." tabindex="0">
    				<ul id="wp-admin-bar-root-default" class="ab-top-menu">
    		<li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://herretur2014.servplads.in/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu">
    		<li id="wp-admin-bar-about"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/about.php">About WordPress</a>		</li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu">
    		<li id="wp-admin-bar-wporg"><a class="ab-item"  href="https://wordpress.org/">WordPress.org</a>		</li>
    		<li id="wp-admin-bar-documentation"><a class="ab-item"  href="http://codex.wordpress.org/">Documentation</a>		</li>
    		<li id="wp-admin-bar-support-forums"><a class="ab-item"  href="https://wordpress.org/support/">Support Forums</a>		</li>
    		<li id="wp-admin-bar-feedback"><a class="ab-item"  href="https://wordpress.org/support/forum/requests-and-feedback">Feedback</a>		</li></ul></div>		</li>
    		<li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://herretur2014.servplads.in/wp-admin/">Herretur 2014</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu">
    		<li id="wp-admin-bar-dashboard"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/">Dashboard</a>		</li></ul><ul id="wp-admin-bar-appearance" class="ab-submenu">
    		<li id="wp-admin-bar-themes"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/themes.php">Themes</a>		</li>
    		<li id="wp-admin-bar-customize" class="hide-if-no-customize"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/customize.php?url=http%3A%2F%2Fherretur2014.servplads.in%2F">Customize</a>		</li>
    		<li id="wp-admin-bar-widgets"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/widgets.php">Widgets</a>		</li>
    		<li id="wp-admin-bar-menus"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/nav-menus.php">Menus</a>		</li>
    		<li id="wp-admin-bar-background"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/themes.php?page=custom-background">Background</a>		</li>
    		<li id="wp-admin-bar-header"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/themes.php?page=custom-header">Header</a>		</li></ul></div>		</li>
    		<li id="wp-admin-bar-comments"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>		</li>
    		<li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item"  aria-haspopup="true" href="http://herretur2014.servplads.in/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu">
    		<li id="wp-admin-bar-new-post"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/post-new.php">Post</a>		</li>
    		<li id="wp-admin-bar-new-media"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/media-new.php">Media</a>		</li>
    		<li id="wp-admin-bar-new-page"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/post-new.php?post_type=page">Page</a>		</li>
    		<li id="wp-admin-bar-new-user"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/user-new.php">User</a>		</li></ul></div>		</li>
    		<li id="wp-admin-bar-edit"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/post.php?post=15&action=edit">Edit Page</a>		</li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu">
    		<li id="wp-admin-bar-search" class="admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://herretur2014.servplads.in/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Search"/></form></div>		</li>
    		<li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item"  aria-haspopup="true" href="http://herretur2014.servplads.in/wp-admin/profile.php" title="My Account">Howdy, jonaskp<img alt='' src='http://1.gravatar.com/avatar/514f283c3a357b4c286c94e036359c78?s=26&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D26&r=G' class='avatar avatar-26 photo' height='26' width='26' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class="ab-submenu">
    		<li id="wp-admin-bar-user-info"><a class="ab-item" tabindex="-1" href="http://herretur2014.servplads.in/wp-admin/profile.php"><img alt='' src='http://1.gravatar.com/avatar/514f283c3a357b4c286c94e036359c78?s=64&d=http%3A%2F%2F1.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&r=G' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>jonaskp</span></a>		</li>
    		<li id="wp-admin-bar-edit-profile"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-admin/profile.php">Edit My Profile</a>		</li>
    		<li id="wp-admin-bar-logout"><a class="ab-item"  href="http://herretur2014.servplads.in/wp-login.php?action=logout&_wpnonce=a9a48a7060">Log Out</a>		</li></ul></div>		</li></ul>			</div>
    						<a class="screen-reader-shortcut" href="http://herretur2014.servplads.in/wp-login.php?action=logout&_wpnonce=a9a48a7060">Log Out</a>
    					</div>
    
    		</body>
    </html>

    Regardring the freeze:
    The table I have is a table with 3 teams and their respective points from a lot of competitions and games.

    in my first column I have "Teamname" in my header and then the 3 teams in the rows below. I would like to freeze this entire column, including the rows with the names, so that when I scroll horizontally, the names will stay visible.
    Is this not possible? Because that is the way I am used to freezing columns work, but maybe I misunderstood.

  4. Meitar
    Member
    Plugin Author

    Posted 6 months ago #

    Don't put the shortcode inside a <pre> tag, and you are not actually using the FixedColumns class. Your page source looks pike this:

    <pre><table id="igsv-1B5ZGdmGdai-QmFnkVNpf4C8a8cBeMiOv-NgKNHypr-g" class="igsv-table" summary="Google Spreadsheet">

  5. jonaskp
    Member
    Posted 6 months ago #

    Okay, removed the

    <pre >-tag. Don't know how that got in there.

    But when I edit my page in wordpress, this is the only thing that is written:

    [gdoc key="https://docs.google.com/spreadsheets/d/1B5ZGdmGdai-QmFnkVNpf4C8a8cBeMiOv-NgKNHypr-g/edit" class="FixedColumns-left-4"]

    So I have no idea how that gets transformed into what I can see in the source code.

    It is just a clean install of wordpress with your plugin and nothing else is changed.

    And thanks for having a look at it.

    [edit]
    Now that I removed the <pre >-tag, the table no longer gets a scroll bar anymore, and the columns are just squeezed together, making the longer text wrap to multiple lines.

  6. Meitar
    Member
    Plugin Author

    Posted 6 months ago #

    Works for me. Note that the left-most column in your worksheet is empty. But the plugin dutifully renders that empty column as an empty column nonetheless.

  7. jonaskp
    Member
    Posted 6 months ago #

    I deleted the first column in my spreadsheet, since that was a mistake. So now the first column does contain the first column of data - which I would like to freeze.

    I can't see the link that you posted. It just times out.
    I have uploaded a screenshot of what it looks like for me.

    As you can see there is no scrolling in the table. It just gets mashed together, and still don't fit on the page, so it overlaps the right menu.

    Also, I can't see any controls to sort the data (which I think I have seen on your page that the plugin should be able to do).

    As I said earlier, I have not done anything other than setting up the wordpress blog and creating that one page with the spreadsheet table on it.
    So if something is preventing the plugin from functioning, I am not aware of it.

  8. jonaskp
    Member
    Posted 6 months ago #

    This is a link to the blog page where the tabel is.
    http://herretur2014.servplads.in/

    I can't figure out why this won't work for me, since I have done nothing special to the blog, besides installing your plugin :-(

  9. jonaskp
    Member
    Posted 6 months ago #

    Now I managed to click your link and can see your screenshot where it is working beautifully.

    But in as shown in my screenshot, I don't get any of the controls in the header row (the sorting arrows), and I don't know why.

    Right now, putting the table in the <pre >-tag makes it show up the way I want it to, with the <pre >-"box" being scrollable, but then the first column doesn't freeze.
    I can live with it this way, since the site is going to be used for a limited time, but I am still very puzzled by this.

Reply

You must log in to post.

About this Plugin

About this Topic

Tags