How to set the position of the items in the testing page?The browser display is asymmetric.

179 views

Skip to first unread message

Kachii Ou

unread,

Sep 28, 2021, 4:40:03 AM9/28/21

to oTree help & discussion

During the proceed of testing he otreezip program, the chrome always displays the items from the center to right in the monitor, and the left side leaves a row of blank and there exists a slider at the bottom of this page. I'm wondering if there exist any way to help me set the items are displayed from the left (left margin=right margin) and delete the slider bar at the bottom. Thank you so much!

Chris @ oTree

unread,

Sep 28, 2021, 4:46:11 AM9/28/21

to oTree help & discussion

This is not happening when I test the sample games, so I guess it is something with your HTML/CSS code. I can't say any more without seeing your code...

Kachii Ou

unread,

Sep 28, 2021, 9:30:09 PM9/28/21

to oTree help & discussion

Dear Chris,

Hi! Thank you for your prompt and precious reply.

Here is the html and CSS code:

HTML:

<tbody>

<tr>

<td>

<p><b>SELECTED FINANCIAL STATEMENTS</b></p>

{% if player.treatment == 1 %}

{% else %}

{% if player.treatment == 2 %}

{% else %}

{% if player.treatment == 3 %}

{% else %}

{% endif %}

</td>

<td>

{% if player.treatment == 1 %}

<p><b>SELECTED NOTES TO FINANCIAL STATEMENTS</b></p>

<p><b>Information about Chief Executive Officer (CEO) Compensation</b></p>

<p>The table below reports for fiscal year 2020 the annual total compensation of our CEO, the median of the annual total compensation of all our employees (except our CEO), and the ratio of the annual total compensation of our CEO to the median of the annual total compensation of all our employees (except our CEO). Annual total compensation includes base salary, all stock-based compensation, all incentive awards, changes in pension value, and perquisites.</p>

<p>Our CEO’s fiscal year 2020 total compensation was at the 15<sup>th</sup> percentile of our comparison group.</p>

<p><b>ADDITIONAL INDUSTRY INFORMATION</b></p>

<p>In addition to the above information extracted from Gamma’s 2020 annual report, a junior colleague in your department has compiled the following mean data for Gamma’s comparison group companies for fiscal year 2020: return on equity, CEO annual total compensation, median of annual total compensation of all employees (except the CEO), and ratio of CEO annual total compensation to median of annual total compensation of all employees (except the CEO).</p>

{% else %}

{% if player.treatment == 2 %}

<p><b>SELECTED NOTES TO FINANCIAL STATEMENTS</b></p>

<p><b>Information about Chief Executive Officer (CEO) Compensation</b></p>

<p>Our CEO’s fiscal year 2020 total compensation was at the 85<sup>th</sup> percentile of our comparison group.</p>

<p><b>ADDITIONAL INDUSTRY INFORMATION</b></p>

{% else %}

{% if player.treatment == 3 %}

<p><b>SELECTED NOTES TO FINANCIAL STATEMENTS</b></p>

<p><b>Information about Chief Executive Officer (CEO) Compensation</b></p>

<p>Our CEO’s fiscal year 2020 total compensation was at the 15<sup>th</sup> percentile of our comparison group.</p>

<p><b>ADDITIONAL INDUSTRY INFORMATION</b></p>

{% else %}

<p><b>SELECTED NOTES TO FINANCIAL STATEMENTS</b></p>

<p><b>Information about Chief Executive Officer (CEO) Compensation</b></p>

<p>Our CEO’s fiscal year 2020 total compensation was at the 85<sup>th</sup> percentile of our comparison group.</p>

<p><b>ADDITIONAL INDUSTRY INFORMATION</b></p>

{% endif %}

</td>

</tr>

<tr>

<p><b>PLEASE ANSWER THE FOLLOWING QUESTIONS ABOUT GAMMA INC.</b></p>

1. In your opinion, how attractive is Gamma’s stock as a short-term investment? (Choose a number)

</label>

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<td style=" width:67px;text-align: left;">Neutral</td>

</tr>

<tr>

<td style="width:67px;text-align: center;">UNATTRACTIVE</td>

<td style=" width:67px;text-align: center;">ATTRACTIVE</td>

</tr>

</table>

2. In your opinion, how attractive is Gamma’s stock as a medium to long-term investment? (Choose a number)

</label>

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<td style=" width:67px;text-align: left;">Neutral</td>

</tr>

<tr>

<td style="width:67px;text-align: center;">UNATTRACTIVE</td>

<td style=" width:67px;text-align: center;">ATTRACTIVE</td>

</tr>

</table>

3. In your opinion, what is the potential that Gamma’s stock price will appreciate over the next three years? (Choose a number)

</label>

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<td style=" width:67px;text-align: left;">Neutral</td>

</tr>

<tr>

</tr>

<tr>

<td style="width:67px;text-align: center;">POTENTIAL</td>

<td style=" width:67px;text-align: center;">POTENTIAL</td>

</tr>

</table>

4. In your opinion, what is Gamma’s earnings potential over the next three years? (Choose a number)

</label>

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

<tr>

<td style=" width:67px;text-align: left;">Neutral</td>

</tr>

<tr>

</tr>

<tr>

<td style="width:67px;text-align: center;">POTENTIAL</td>

<td style=" width:67px;text-align: center;">POTENTIAL</td>

</tr>

</table>

5. Assume you have $10,000 to invest in the semiconductor industry. Any money you do not invest in Gamma Inc. would be invested in competitor companies. How much of the $10,000 would you invest in Gamma Inc.?

</label>

</div>

</td>

</tr>

</table>

<tr>

</tr>

</table>

</td>

</tr>

</tbody>

</table>

</td>

</tr>

</table>

{% next_button %}

<p>{% include Constants.progress_container_template %}</p>

CSS:

Name:

progress-container
Code:

{% load otree %}

</div>

<div class="progressbar-text">{{page_progress_display}}</div>

</div>

<style>

.progress-container {

display:table;

position:relative;

}

.progress-container .progress-box,.progress-container .progressbar-text {

display:table-cell;

vertical-align:middle;

}

.progress-container .progress-box {

width:100%;

height:5px;

position:relative;

}

.progress-container .progress-box .progress-bar {

height:inherit;

background-color:#0078ff;

}

.progress-container .progress-box .progress-bar:after {

content:" ";

z-index:-1;

width:100%;

height:inherit;

left:0;

position:absolute;

background-color:#E5E9F2;

}

.progress-container .progress-box .progress-bar,.progress-container .progress-box .progress-bar:after {

-webkit-border-radius:50%;

-moz-border-radius:999rem;

border-radius:999rem;

}

.progress-container .progressbar-text {

color:#475669;

padding-left:10px;

}

</style>

I'm looking forword to your precious replay again : )

Best Regards!

Kachii

09/29

Chris @ oTree

unread,

Sep 29, 2021, 2:49:31 AM9/29/21

to Kachii Ou, oTree help & discussion

There is a lot of code here. Best strategy would be to remove it all and see if the problem still happens. Then add the code in bit by bit and see when the problem occurs.

Sent from my phone

On Sep 28, 2021, at 9:30 PM, Kachii Ou <kachi...@gmail.com> wrote:

Dear Chris,

--
You received this message because you are subscribed to a topic in the Google Groups "oTree help & discussion" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/otree/vgap4J32NTk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to otree+un...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/otree/c2fb6e27-8ff8-41db-818e-d31459e8ebd1n%40googlegroups.com.

Kachii Ou

unread,

Sep 29, 2021, 10:42:51 AM9/29/21

to oTree help & discussion

Dear Chris,

Thank you for your precious reply again : )

I've checked my code and ran my former otreezips. I found that all the pages are displayed start from the left side of the Debug info frame, so I am wondering if there is any way to let the contains are displayed from the left side of the screen rather than the left side of Debug info. I think it's not the fault of the html code and CSS code.

Generally, in a html file, we could revise the display position by changing the code of .xml file, however I don't know how to find this in an otreezip file.

Looking forward to your kind replay again : )

Best Regards

Kachii

09/29

Olaf Ghanizadeh

unread,

Oct 1, 2021, 10:47:09 AM10/1/21

to oTree help & discussion

The spacing around, and the reason why it is centered comes from Boostrap's .container class. Whatever is inside the {{block content}} will be wrapped by the Bootstrap container and therefore centered.

To save yourself headache, you should also avoid writing inline CSS and instead write your CSS in a separate file that is loaded in <head> of the document.

Kachii Ou

unread,

Oct 4, 2021, 11:26:14 AM10/4/21

to oTree help & discussion

Dear laff,

Thank you for you advice. I delete all the CSS code and find all the problems still go that. So I am wondering if there is any possible way to change the whole code in the studio straightly?

Best regards!

Kachii

04/10

Reply all

Reply to author

Forward

0 new messages