Andrei Deinichenko Andrei Deinichenko - 3 months ago 12
CSS Question

Positioning java script element with embedded external value in the text

I am working on simple looking one-page-site hosted on Google Drive using "Editey" tools. What I need is to embed a number statistic values from a list of single cells of the correspondent Google Spreadsheet into various lines of my site text. It's almost done, but the final value can not be fixed in exact place. The cell value "3" must be displayed in one line of my text, just after the word "Alex", but paragraph tags that follow with id element "Alex" did not let fix it all together in a single row. How can I set my text "Alex" and embedded result "3" in one row, to let it looking as Alex3 ("3" styled as red superscript)?



// https://google,developers.appspot.com/chart/interactive/docs/spreadsheets#gid
google.load('visualization', '1', {packages: ['corechart', 'line']});
google.setOnLoadCallback(drawChart);

function drawChart() {
var spreadsheetUrl = "https://docs.google.com/spreadsheets/d/1iVtRu6vQHmyNyXQdqGmoODhz3Vi9LJQSbEyAiw4t1Ww/edit?usp=sharing";
var query = new google.visualization.Query(spreadsheetUrl);
query.send(handleQueryResponse);
}

function handleQueryResponse(response) {
var dataTable = response.getDataTable();
// https://developers.google.com/chart/interactive/docs/reference?hl=en#methods
// getValue(rowIndex, columnIndex)

document.getElementById("Alex").innerHTML = dataTable.getValue(2, 1);
}

#Alex {
vertical-align: super;
font-size: 10px;
color: red;
}

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script src="code.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<p>Alex
<p id="Alex"> </p>

</body>
</html>





Thank in advance for your attention : )

Answer

Assuming the incorrect HTML with missing </head> & </p> tags are typos, If you want to bring the two values on the same line, you can use 1 of the following 2 methods:

Reason: - In HTML <p> tags are by default block elements(display: block;), each block elements extend to 100% of the width and hence they stack one below the other instead of one within/next to the other(this is what you want). If you want to place them next to another you have to explicitly change the display property from block to inline-block.

Method 1 : Make both the <p> tags you want display: inline-block.

p {
  display: inline-block;
}

Method 2(I prefer this) : Instead of using <p> tag for #Alex, use <span> inside the outer <p> element instead, Like so -

<body>
    <p>Alex
      <span id="Alex"> </span>
    </p>        
</body>

Because <span> by default has display: inline-block; property.

Hope this helped.