Jump to content

Formatting a Table within a Site Document


Recommended Posts

Hi

 

We want a text table in a Document which is a) responsive so it displays properly on mobile phones as well as desktops and tablets, and b) that is capable of displaying all the text the same size. However the table generated by Cubecart does neither of these things: Help!

  •  

    Making the table responsive: In the advanced settings we have removed “fixed width =500”. This makes the table responsive in that it makes the table width the length of the sentences we type in, rather than producing even columns across the whole display. (Ie, if we type in short sentences the table is narrow; if we type in long sentences, the table is uneven).

  •  

    Text formatting: This is a much worse problem, there seems to be an inbuilt glitch which messes up the text formatting every time we make a change to the document: Imagine a two-column table (with multiple rows beneath). In the left hand cell of each row we want a single, short sentence. In the right hand cell of each row there may be a single sentence or multiple sentences on new lines. By default, Cubecart makes the text in cells with multiple sentences on new lines much smaller. We have been able to rectify this by removing the <p> at the beginning of each sentence (there is a <p> at the end of the sentence too). However… whenever we make a subsequent change to the document, even if it is not a change to the table, it adds in “<p>&nbsp;” which creates a double space. So we remove that … and every time we make a change to any part of the document it reinserts it!
  • A third issue is that once we have created a table and populated it we don't seem to be able to highlight that table and then edit the properties.

 

https://www.ropesdirect.co.uk/table-test.html This is a test page to show you our problem – is there some machine code or a fix we can use which stops Cubecart from undoing our tweaks / changing the font or line spacing every time we make a change?


Link to post
Share on other sites

Tables are just nasty 😆 when it comes to responsive design.

Foundation has some options to try make them work such as stacking or making the table scrollable https://get.foundation/sites/docs/table.html (although i believe cubecart doesn't use the current version of Foundation so not 100% on what is available by default) 

Your font-size issue with the <p></p>elements is caused by #homeSec p styling in cubecart.default.css which targets all p elements within the #homeSec container.

try using the following override table p elements styling

table tr td p {
	color: #222;
	font-size: .875rem;
	margin-bottom:0px;
}

to make the table full width

table {
	width:100%;
}

To make the left cell a certain width you could add the following 40% used as example

table tr td:first-child {
	width: 40%;
}

although the above would affect all tables so best to give you table an "id" when creating it and adjust the styling so it only hits the table you want it to

table#cctable tr td:first-child {
	width: 40%;
}

 

Probably a better away around than this but time is abit short to look too deep into it. 

Link to post
Share on other sites

Text Formatting: The essential issue with this is that the CKEditor (the WYSIWYG content editor for documents, product descriptions, etc) wants to follow a complicated set of rules as to what constitutes "acceptable" markup sequences for a "proper" document object model (DOM). For example, use <p> tags (assuming there are CSS rules) instead of <br><br>. Another example, anything (except comments) found between <table> and <tr> (such as Smarty foreach loop tags) be re-positioned outside the table structure. There are also rules for figuring out where missing closing tags should go, if one should forget a </div> or </td> tag.

There are configuration settings for CKEditor that should allow otherwise unacceptable markup, but learning what they are isn't on the front-burner at the moment.

The CubeCart programmers also have on the back burner finding a different javascript-powered WYSIWYG editor - one where some 'sloppiness' is tolerated.

CKEditor seems to be a complicated beast, as evidenced by their GitHub activity.

I find in the cubecart.default.css file, a rule that makes the font just a bit smaller for #homeSec p content. This is 0.813em where the default size for table cell content is 0.875rem.

All paragraphs that descend from #homeSec get this font-size rule, including inside the table. To thwart this, use #homeSec > p so that only the direct children get this font-size. Deeper paragraphs won't be affected.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...