The Community forums are being phased out in favor of a new Slack group.
Add your email address below to get an invitation to join the community slack group
Table view issue
Hi - very new to Formidable!
I have created a form that feeds into a directory. I can get the permissions to view the view and the actual information in no issue but am having issues making the format of the table work. The image is higher!
Screen shot attached of the current result.
Code below:
Before Content:
<style>
table, th, td {
border: 1px solid #FBFBFB;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<table style="width:100%">
Content:
<a; href="http://familydealsweekly.com.au/wp-content/uploads/2017/07/Premium-Listing-01.png"><img class="aligncenter wp-image-119 size-full" src="http://familydealsweekly.com.au/wp-content/uploads/2017/07/Premium-Listing-01.png" alt="Premium Listing" width="1000" height="50" /></a>
<th height=415 width= 415 rowspan="5">[78 size=400x400 show_image=1]</th>
<td><h3><strong><span style="color: #000000;">[67]</span></strong></h3></td>
</tr>
<tr>
<td><span style="color: #000000;">[76]</span></td>
</tr>
<tr>
<td><span style="color: #000000;">[81]</span></td>
</tr>
<tr>
<td><span style="color: #000000;">[80]</span></td>
</tr>
<tr>
<td><span style="color: #000000;">[77]</span></td>
</tr>
</table>
</body>
</html>
[editlink location="front" label="Edit" page_id=63 id=2]
July 8, 2017 at 8:16 am
Please attach the screen shot. A link to the actual page would be helpful.
If that's the actual code you've written, you have an error in the image link. There shouldn't be a semi-colon after the first a in the link. That error could be throwing everything off and preventing the browser from rendering the code correctly.
July 9, 2017 at 3:49 am
Thanks Victor
Link here: http://familydealsweekly.com.au/family-business-directory/
I have completely removed the top image in case that was throwing things off, still no joy though.
Any other ideas?
Code:
<th height=415 width= 415 rowspan="5">[78 size=400x400 show_image=1]</th>
<td><h3><strong><span style="color: #000000;">[67]</span></strong></h3></td>
</tr>
<tr>
<td><span style="color: #000000;">[76]</span></td>
</tr>
<tr>
<td><span style="color: #000000;">[81]</span></td>
</tr>
<tr>
<td><span style="color: #000000;">[80]</span></td>
</tr>
<tr>
<td><span style="color: #000000;">[77]</span></td>
</tr>
</table>
</body>
</html>
July 9, 2017 at 4:15 am
The HTML for your table is not laid out correctly. You have a table header element in the same row as content. The table header element is holding your directory entry image. This is not correct. If you are using table headers, they have to be in their own row and they will always be above anything else. I am assuming you want the image on the left and the directory content on the right, is that correct? If that's the case, I probably wouldn't use HTML tables at all. Instead, I would use flex boxes. HTML tables are not mobile friendly and you will spend more time trying to make them work than it's worth.
Next, I suggest to always use the item key instead of the item id when referencing fields in a view. Why? Because if you migrate these forms to a different WordPress instance, the item ids will change, the keys will not. All the hard work you put into building views with item ids will break when you migrate to a new WordPress instance.
Last, inline CSS shouldn't be used unless absolutely necessary. Your style="color: #000000;" should be a CSS class instead. Why? Because if you or a client change their mind about a color, you have to edit many, many lines of code the way you have things right now. By using a class, you change 1 line of code and it changes everything using that class.
I hope this points you in the right direction. If you need additional help, and you're interested in working with a developer, please feel free to reach out: https://victorfont.com/project-inquiry/
Discussion closed.