Tabview - Wikidot Community

Tabview

W e l c o m e ! » Help » HelpOn A-Z » Tabview

Tags: _syntax

Fold

Table of Contents

Main reference

Ask your question below

Main reference

doc-wiki-syntax:tab-view

Ask your question below

Add a New Comment

Hide All Comments Unfold All Fold All

Fold

Tab view shows extra characters

TinkerSmith 31 May 2020 00:52

Ok, I have to admit, I am a total newbie and I probably miss something stupid.
I looked/searched everywhere, but couldn't work it out.

Have a look at this page http://tinkershed.wikidot.com/test:1

This is the text output I see on the Code tab:

@<{"data":{"behavior":{"v":"2","nodes":[{"inputCount":2,"outputCount":2,"name":"Vector 2 XY"}]}}}>@

BUT, what I entered on the data form that I use is this:

{"data":{"behavior":{"v":"2","nodes":[{"inputCount":2,"outputCount":2,"name":"Vector 2 XY"}]}}}

It is in JSON syntax that I show inside a HTML block so that I could implement the Copy feature. I suspect that could be part of the problem

I can not work out where the additional <@ and >@ markers are coming from, or how to remove them :(

Here the template code:

[[module CSS]]
.yui-navset .yui-content {
    height: 350px;
    overflow: auto;
}
[[/module]]

[[[test:_home | Test]]] » %%title%%  

[[tabview]]

[[tab Overview]]
Link: [%%form_raw{info_link}%%]
[[f<image %%form_raw{overimg}%% width="300px"]]
%%form_data{overview}%%
[[/tab]]

[[tab Details]]
[[f<image %%form_raw{detailimg}%%]]
%%form_data{details}%%
[[/tab]]

[[tab Code]]
[[html]]
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -75px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
</style>
</head>
<body>

<p>Click on the button to copy the text to the clipboard.</p>
<p>Then paste it straight into the flowlab import window</p>

<textarea id="myInput" readonly rows="8" cols="50">
%%form_data{bcode}%%
</textarea>

<div class="tooltip">
<button onclick="myFunction()" onmouseout="outFunc()">
  <span class="tooltiptext" id="myTooltip">Copy to clipboard</span>
  Copy text
  </button>
</div>

<script>
function myFunction() {
  var copyText = document.getElementById("myInput");
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  document.execCommand("copy");

  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copied: " + copyText.value;
}

function outFunc() {
  var tooltip = document.getElementById("myTooltip");
  tooltip.innerHTML = "Copy to clipboard";
}
</script>

</body>
[[/html]]
[[/tab]]

[[/tabview]]

[[=]]
[[module Rate]]
[[/=]]
-------

[[module Comments hideForm="true"]]

====

[[form]]
fields:
  overimg:
    label: Overview Image
    hint: "Image URL"
    type: url
  overview:
    label: Overview Text
    type: wiki
    height: 3
    hint: "write the overview"
  info_link:
    label: "Link to example"
    type: url
  detailimg:
    label: Detail Image
    hint: "screenshot"
    type: url
  details:
    label: Details
    type: wiki
    height: 3
    hint: "write the details"
  bcode:
    label: "Export Code"
    type: text
    height: 3
    hint: "copy export code"
[[/form]]

PLEASE HELP

Any advice would be so appreciated.

Reply Options

Unfold Tab view shows extra characters by

TinkerSmith, 31 May 2020 00:52

Fold

Re: Tab view shows extra characters

TinkerSmith 31 May 2020 03:13

update:

on further investigation, it seems to be triggered by the quotation marks " " , but I need to use those :(

Last edited on 31 May 2020 03:15 by TinkerSmith Show more

Reply Options

Unfold Re: Tab view shows extra characters by

TinkerSmith, 31 May 2020 03:13

Fold

Re: Tab view shows extra characters

TinkerSmith 31 May 2020 03:34

update 2:

Ok, fixed it. So you can ignore my question, sorry :)

I had to change this block

<textarea id="myInput" readonly rows="8" cols="50">
%%form_data{bcode}%%
</textarea>

to:

<textarea id="myInput" readonly rows="8" cols="50">
%%form_raw{bcode}%%
</textarea>

I was not aware that you have to use form_raw if you have text that might contain escape worthy special characters.

Kia Ora,
TinkerSmith

Reply Options

Unfold Re: Tab view shows extra characters by

TinkerSmith, 31 May 2020 03:34

Fold

Re: Tab view shows extra characters

Helmut_pdorf 31 May 2020 08:01

Fine, you have found it - I had the same problems until I changed to the raw version..

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Reply Options

Unfold Re: Tab view shows extra characters by

Helmut_pdorf, 31 May 2020 08:01

Fold

NuroSil 16 Mar 2020 03:01

Lorem ipsum dolor sit amet…

-Cash

Reply Options

Unfold by

NuroSil, 16 Mar 2020 03:01

Fold

claw of nulgath rarity

the goodness 25 Jan 2013 09:12

2!i'm a new guy
can i ask what is the true rarity of the claw of nulgath

Reply Options

Unfold claw of nulgath rarity by

the goodness, 25 Jan 2013 09:12

Fold

Re: claw of nulgath rarity

Helmut_pdorf 25 Jan 2013 15:06

You are on the wiki / forum of the wikidot - community !

I think you are very wrong here.. :)

Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.

Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?

Reply Options

Unfold Re: claw of nulgath rarity by

Helmut_pdorf, 25 Jan 2013 15:06

Fold

Table width in TabView (now fixed)

GullFire 23 Jan 2013 21:35

I have included a number of tables in TabView.

Is there some way to ensure that the table in each tab fills the available width consistently?

Last edited on 24 Jan 2013 10:05 by GullFire Show more

Reply Options

Unfold Table width in TabView (now fixed) by

GullFire, 23 Jan 2013 21:35

Fold

Re: Table width in TabView

Steven Heynderickx 23 Jan 2013 22:55

you arleady managed to do this…no?
All your tables are 100% the way I see it on my iPad

A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.

Reply Options

Unfold Re: Table width in TabView by

Steven Heynderickx, 23 Jan 2013 22:55

Fold

Re: Table width in TabView

GullFire 23 Jan 2013 23:52

I'm afraid not. Only the default tab displays the table at full width.
All the other tabs display the table at much less than full width on a widescreen monitor until you sort a column and then the table pops out to full width.
I get the same effect on my ipad, but it is much less pronounced (at least I did, I don't have my pad w/ me at the mo).

Thank you for looking.

Options

Unfold Re: Table width in TabView by

GullFire, 23 Jan 2013 23:52

Fold

Re: Table width in TabView

Steven Heynderickx 24 Jan 2013 07:42

i'll have to look in to this using my pc and firebug… i'm not sure if you are familiour with css anf firebug but you need to check it out http://firebug.wikidot.com/

A - S I M P L E - P L A N by ARTiZEN a startingpoint for simple wikidot solutions.

Options

Unfold Re: Table width in TabView by

Steven Heynderickx, 24 Jan 2013 07:42

Fold

Re: Table width in TabView

RobElliott 24 Jan 2013 08:07

I'm not sure if this will work but in the CSS of the google visualization code on each page try adding:

.google-visualization-table-table {
    width: 100%;
}

Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.

Options

Unfold Re: Table width in TabView by

RobElliott, 24 Jan 2013 08:07

Fold

Re: Table width in TabView

GullFire 24 Jan 2013 09:59

Thank you Rob. Sorted.

Reply Options

Unfold Re: Table width in TabView by

GullFire, 24 Jan 2013 09:59

_syntax

Wikidot Community

hints / tips / help / discussion

Welcome

Search Center

Official Documentation

Support Forum (Recent)

Getting Help

Community HowTo's

Code Snippets

Wikidot Applications

Glossary of Terms

Index of Sites

What is Hot

Time in Toruń, Poland

Main reference

Ask your question below