First of all, I must admit that I am not fluent in PHP or JS, but so far I got everything working, except for the following..
I am constructing a page in which the user can submit new ideas for dissertations. Hence, per idea (also referred to as a topic), the user needs to submit a title, a description, a language in which the dissertation needs to be written, etc.
Given that there are several topics per user, I call a MySQL database and use PFP to display the currently submitted topics. However, I display the topics in a collapsible format: the user first gets a list of all topics and by clicking on a topic, that item expands to show the details of the topic (using a $content.slidetoggle() statement in JS).
This is the catch, under that "" that is shown after the user clicked on a topic is a TinyMCE editor. And that editor is showing in a very weird way. The buttons in the toolbar of the TinyMCE are for example very long, causing the buttons to go way beyond the borders of the editor itself. They also show up distributed across several rows, by which the height of the toolbar is suddenly four times that of the text editor itself. I have created a JSFiddle to try and demonstrate what's going on: https://jsfiddle.net/joren_mar/5dmzx8b2/ And I have taken a screenshot of the problem: https://drive.google.com/file/d/0B6JG0538ekaZc294RFBxdXJraU0/view
I have also tried to google similar problems (like: Why is my TinyMCE hidden textarea acting up?) but those do not describe the problem that I'm having. Additionally, I have also tried most of the proposed solutions there, none of which seem to work.
Thank you for helping me!
Code: HTML (generated by PHP) & JS:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="tinymce/tinymce.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".header").click(function () {
//getting the next element
$content = $(this).next();
//checking if its already visible
$content.slideToggle(500);
//redo the TineMCE
});
});
tinymce.init({
selector: "textarea", // change this value according to your HTML
plugins: "autoresize",
menubar: false,
toolbar: ' bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | subscript superscript'
})
;</script>
<h2 class="w3-text-grey w3-padding-16"><i class="fa fa-pencil fa-fw w3-margin-right w3-xxlarge w3-text-teal"></i>List of topics promoted by Prof. Dr. Promotor Promotor</h2><div class= "container"><div class="header"><h3 class="w3-text-grey w3-padding-16">Topics of Type 1: Topics that are in the list for the allocation procedure</h3></div><div class="content">
</br><div class="container"><div class="header">The optimization of traffic lights in a normal environment with multiple crossings.</div>
<div class="content"><div>
<form action="?ManageMyTopics&ChangeTopicType1&TopicID=0" method="post">
<div class="containerw3" style= "width:100%"><table style="width:100%">
<tr>
<th>Please provide a title: </th>
<td><textarea style = "width:100%" name = "TitleField" id = "TitleField">The optimization of traffic lights in a normal environment with multiple crossings.</textarea></td>
</tr>
<tr>
<th>Choose an assistant:</th>
<td><select style = "width:100%" name = "AssistantSelection" id = "AssistantSelection">
<option value="Assistant@test.be" selected="selected">Assistant@test.be</option>
<option value="Assistant@test.be">Assistant Assistant</option>
</select>
</td>
</tr>
<tr>
<th>Choose a student:</th>
<td><select style = "width:100%" name = "StudentSelection" id = "StudentSelection">
<option value="student2@test.be" selected="selected">student2@test.be</option>
<option value="Student@test.be">Student Student</option>
<option value="student2@test.be">Student2 Student</option>
<option value="Student3@test.be">Student3 Student</option>
<option value="student4@test.be">Student4 Student</option>
<option value="student5@test.be">Student5 Student</option>
</select>
</td>
</tr>
<tr>
<th>Choose a status*:</th>
<td><select style = "width:100%" name = "StatusSelection" id = "StatusSelection">
<option value="Writing a proposal" selected="selected">Writing a proposal</option>
<option value="Available">Available</option>
<option value = "Writing a proposal">Writing a proposal</option>
<option value = "Allocated">Allocated</option>
</select>
</td>
</tr>
<tr>
<th>Choose a language*:</th>
<td>
<select style = "width:100%" name = "LanguageSelection" id = "LanguageSelection">
<option value="Preferably English" selected="selected">Preferably English</option>
<option value="Dutch">Dutch</option>
<option value="Preferably Dutch">Preferably Dutch</option>
<option value="Preferably English">Preferably English</option>
<option value="English">English</option>
</select>
</td>
<tr><th colspan="2"> Please provide a description for this topic*: </th></tr>
<tr><td colspan ="2">
<textarea cols="40" rows="20" style="width: 40em; height: 20em" name = "DescriptionOfTopic" id = "DescriptionOfTopic">This topic uses simulation.<br></textarea>
</td>
</tr>
</table></div></br>
<hr>
<h5 class="w3-text-teal"><i class="fa fa-save fa-fw w3-margin-right"></i>
<input type = "submit" value = "Save changes to topic description" id ="SaveChanges"/>
</h5>
</form>
</div></div>
</div>
</br><div class="container"><div class="header">Please add a title for this topic</div>
<div class="content"><div>
<form action="?ManageMyTopics&ChangeTopicType1&TopicID=3" method="post">
<div class="containerw3" style= "width:100%"><table style="width:100%">
<tr>
<th>Please provide a title: </th>
<td><textarea style = "width:100%" name = "TitleField" id = "TitleField">Please add a title for this topic</textarea></td>
</tr>
<tr>
<th>Choose an assistant:</th>
<td><select style = "width:100%" name = "AssistantSelection" id = "AssistantSelection">
<option value="" selected="selected"></option>
<option value="Assistant@test.be">Assistant Assistant</option>
</select>
</td>
</tr>
<tr>
<th>Choose a student:</th>
<td><select style = "width:100%" name = "StudentSelection" id = "StudentSelection">
<option value="" selected="selected"></option>
<option value="Student@test.be">Student Student</option>
<option value="student2@test.be">Student2 Student</option>
<option value="Student3@test.be">Student3 Student</option>
<option value="student4@test.be">Student4 Student</option>
<option value="student5@test.be">Student5 Student</option>
</select>
</td>
</tr>
<tr>
<th>Choose a status*:</th>
<td><select style = "width:100%" name = "StatusSelection" id = "StatusSelection">
<option value="Available" selected="selected">Available</option>
<option value="Available">Available</option>
<option value = "Writing a proposal">Writing a proposal</option>
<option value = "Allocated">Allocated</option>
</select>
</td>
</tr>
<tr>
<th>Choose a language*:</th>
<td>
<select style = "width:100%" name = "LanguageSelection" id = "LanguageSelection">
<option value="Preferably English" selected="selected">Preferably English</option>
<option value="Dutch">Dutch</option>
<option value="Preferably Dutch">Preferably Dutch</option>
<option value="Preferably English">Preferably English</option>
<option value="English">English</option>
</select>
</td>
<tr><th colspan="2"> Please provide a description for this topic*: </th></tr>
<tr><td colspan ="2">
<textarea cols="40" rows="20" style="width: 40em; height: 20em" name = "DescriptionOfTopic" id = "DescriptionOfTopic">Please add a description for this topic</textarea>
</td>
</tr>
</table></div></br>
<hr>
<h5 class="w3-text-teal"><i class="fa fa-save fa-fw w3-margin-right"></i>
<input type = "submit" value = "Save changes to topic description" id ="SaveChanges"/>
</h5>
</form>
</div></div>
</div>
</br> <form action = '?ManageMyTopics&AddNewTopicType1' method = 'post'><input type = 'submit' value = 'Add new topic of Type 1'/></form></div></div></br></br><div class="container"><div class="header"><h3 class="w3-text-grey w3-padding-16">Topics of Type 2: Topics proposed by students</h3></div><div class="content"><div class="container"><div class="header">Please add a title for this topic</div><div class="content">
<form action="?ManageMyTopics&ChangeTopicType2&TopicID=1" method="post">
<div class="w3-container">
<h5 class="w3-opacity"><b><input style = "border:none;width:100%" type="text" name = "TitleField" id = "TitleField" value="Please add a title for this topic"/></b></h5>
<h6 class="w3-text-teal"><i class="fa fa-fa-assistive-listening-systems fa-fw w3-margin-right"></i>
Choose an assistant: <select style = "border:none" name = "AssistantSelection" id = "AssistantSelection">
<option value="" selected="selected"></option>
<option value="Assistant@test.be">Assistant@test.be</option>
</select>
</h6>
<h6 class="w3-text-teal"><i class="fa fa-fa-assistive-listening-systems fa-fw w3-margin-right"></i>
Choose a student: <select style = "border:none" name = "StudentSelection" id = "StudentSelection">
<option value="" selected="selected"></option>
<option value="Student@test.be">Student@test.be</option>
<option value="student2@test.be">student2@test.be</option>
<option value="Student3@test.be">Student3@test.be</option>
<option value="student4@test.be">student4@test.be</option>
<option value="student5@test.be">student5@test.be</option>
</select>
</h6>
<h6 class="w3-text-teal"><i class="fa fa-fa-assistive-listening-systems fa-fw w3-margin-right"></i>
Choose a status*: <select style = "border:none" name = "StatusSelection" id = "StatusSelection">
<option value="Available" selected="selected">Available</option>
<option value="Available">Available</option>
<option value = "Writing a proposal">Writing a proposal</option>
<option value = "Allocated">Allocated</option>
</select>
</h6>
<h6 class="w3-text-teal"></i>
<input type = "submit" value = "Save changes to topic status" id ="SaveChanges"/>
</h6>
<hr>
</div>
</form>
</div>
</div>
</br> <form action = 'Index.php?ManageMyTopics&AddNewTopicType2' method = 'post'><input type = 'submit' value = 'Add new topic of Type 2'/></form></div></div></br></br>
And finally the relevant CSS:
.container {
width: 100%;
border: 1px solid #d3d3d3;
}
.container div {
width: 100%;
}
.container .header {
background-color: #d3d3d3;
padding: 2px;
cursor: pointer;
/*font-weight: bold;*/
}
.container .header> span:first-child + span {
/*float:right;*/
font-style: italic;
}
.container .content {
display: none;
padding: 5px;
width: 100%;
}
input[type=submit] {
padding: 5px 15px;
background: #ccc;
border: 0 none;
cursor: pointer;
-webkit-border-radius: 5px;
border-radius: 5px;
}
input[type=submit]:hover {
background-color: #009688
}
tr:nth-child(even) {
background-color: #f2f2f2
}
th {
padding: 15px;
text-align: left;
background-color: #009688;
color: white;
}
hr {
border: 0;
border-top: 1px solid #eee;
margin: 20px 0
}
textarea {
resize: vertical;
}
