Controlling pop-up formatting

Hi Howard,

I’m very busy at the moment, I’ll try to find an answer for your first two questions as soon as possible. You can find the solution for your third question (column wrapping) here:
https://wpdataaccess.com/docs/documentation/shortcodes/styling-wpdataaccess-pages/

The first example describes how you can wrap column content. Maybe the second example can help you to turn off the bold text as well? Just give a try…

Best regards,
Peter

No problems Peter: the tip about CSS code for wrapping long columns was all I needed. With that, I can dispense with the modal form and just use the ‘collapsed’ form. No extraneous bolds there, and the ‘reveal’ only displays new information, rather than repeating the originally-visible stuff too. So, by fixing the wrap, all other issues are now resolved.

Brilliant support as always, Peter. Many, many thanks.
HJR

No brillance here Howard! Just a lucky guess… ??

Warm regards,
Peter

Hi Peter:

Well, I appreciate your help anyway! ??

I’m being really picky now, I realise, but if you look at that page and reveal the ‘hidden’ stuff for row 01002, is there any way to stop the long_notes text from wrapping right back to the left-hand edge? That is, I would like the text to wrap but always align to where the text starts on the first line.

(I’m not explaining this well! I mean I would like the word “portion” that starts the second line of long_text for that record to appear under the word “Copy”, and for everything to line up to that point thereafter).

I tried something like:

#MozartWorks.long_notes {
  display: inline-block;
  width: 200px;
  padding-left: 5px;
}

…which I got from that link you sent me last time, and then some CSS how-to’s via Google (the last resort of the desperate, I feel!). But that’s not making any difference to the display of that column at all.

If it can’t be done, I can live with it -and this isn’t meant to interrupt you doing more important things anyway.

All the best,
HJR

Just to say: I’ve been modifying the data, so the example I referenced in the last message is now no longer row 01002. Try looking at 01057 instead: I’d like the words all to line up left-aligned under the starting word “Originally”.

The original example I mentioned is now accessible at row 01056.

Sorry: I won’t be altering anything else in the table for a while!

Regards
HJR

Hi Howard,

Can you try this:

#mozartcat.dataTable.nowrap td {
    white-space: pre-wrap;
    max-width: 300px;
}

Hope this works…

Best regards,
Peter

Hi Howard,

While looking at your table I realize that the column name is no longer available as a class name. This is a bug! It was available in ealier releases. I must have accidentally removed it. It is fixed in the next version which I hope to release today or tomorrow. You can then define a style for a specific column. Please check the link I previously send you for more information on this topic.

BTW, you might need to change your styling for the new release as the id of the table will change to make it unique. This allows plugin users to show multiple HTML tables of the same database table on the same page.

Best regards,
Peter

Hello Peter: well, I’m glad I was able to sort-of help you find a bug! ??

I tried the CSS you mentioned. I already had this:

#MozartWorks.dataTable.nowrap td {
	white-space: normal;
	max-width: 200px;
}

I replaced that with:

#MozartWorks.dataTable.nowrap td {
    white-space: pre-wrap;
    max-width: 300px;
}

Note that I’m now using a different table than originally: MozartWorks, not mozartcat. I adjusted your sample code accordingly, hopefully correctly. The test page is “test-page-for-revised-mozart-catalogue”: hope you can find it OK. Let me know if not.

However, I’m afraid the new CSS made no difference in any event. I’ve left the new pre-wrap/300 version in-place, so you are welcome to re-visit and see what might be going wrong.

In its entirety, I have the following CSS defined:

.dataTables_wrapper {
  white-space: normal;	
  font-size: 10px;
  color: black;
}

#MozartWorks.dataTable.nowrap td {
    white-space: pre-wrap;
    max-width: 300px;
}

.dataTables_wrapper .dataTables_filter {
width: 300px;
}

.dataTables_filter label {
  width: 100%;
  display: inline-block;
}

input[type="search"] {
  display: inline-block;
  max-width: 250px;
  font-size: 10px;	
}

I’m not sure if something later on in the piece is conflicting with the bit we’re trying to change!

Looking forward to the new release. I think the idea of multiple tables on the one page is excellent!

Best wishes,
HJR

Hi Howard,

Looks like you managed to wrap the text in column short notes? And the music plays inline now… Looks great! ?? Do you still need help?

Best regards,
Peter

Hi Peter,

I’m afraid that I do still have issues -though I think they are all formatting ones and thus are more to do with CSS and my lack of knowledge of it than the functionality of your plugin. If you are able to advise on any of the following, I would be grateful though!

1) Repetitive CSS. Here is what I’ve got at the moment:

#MozartWorks12.dataTable.nowrap td {
	white-space: pre-wrap;
	max-width: 200px;
}

#MozartWorks13.dataTable.nowrap td {
	white-space: pre-wrap;
	max-width: 200px;
}

#MozartWorks14.dataTable.nowrap td {
	white-space: pre-wrap;
	max-width: 200px;
}

#MozartWorks15.dataTable.nowrap td {
	white-space: pre-wrap;
	max-width: 200px;
}

[and on and on…]. Is there a way to just say “pre-wrap 200px” for any and all MozartWorks-related (but not Vivaldicat-related) publications? That’s only a concision thing: if I have to repeat the same CSS the 8 or 9 times I’m going to need to do it, it’s not a major problem.

2) Size of the audio player. If you reveal the ‘hidden’ data for some of the Mozart symphonies, you’ll see the problem. For example, reveal the data for item 01007. The music player extends only as far as the right-edge of the music score above it. That’s about 600px wide. Now reveal the hidden data for item 01019. That record’s audio player is much wider, because the width is now being determined by the long notes text underneath it. I think that player is at least 900px wide. How can I fix the audio player’s width, either at 600px or at 900px (or whatever width, really), regardless of whether there is long, long-notes text present?

3) Wrapping edge of long note text is still not quite what I’d like. Still sticking with the long notes for 01019: the words “entire symphony” wraps onto a second line and is aligned under the field name “Long Notes”. I really would like it to wrap and be placed under the text “K1 and K6 numbers…” IE, have everything left-justified with the second and subsequent lines being indented by the same amount as the first one is away from the column label, or left-aligned with the start of the first line, if that’s a better way of explaining it.

4) A functional sorting issue. On the same page of symphonies. Click the K1 heading: the data is now sorted by its K1 number. Fine. Now go to page 2 of the symphonies. It’s still sorted by the K1 number, which is also fine. But now suppose you want to sort **just the second page of results** by its K6 number: so click K6. Bang… you are returned to page 1 of the entire set of results. Correctly sorted, for sure: but it’s seemingly impossible to change the sort orders on second and subsequent pages of data without causing the data to revert back to the beginning page and display in that new sort order there. Can sorting be made page-independent? I imagine that might be a lot of code to get working!

5) Another formatting niggle: on a long page of results, which you scroll down to the bottom of, you can certainly *see* the column titles (which is really nice!) but unlike the titles at the top of the page, they are not click-able to alter the sorting order. Can they be made to be as sort-functional as the column names at the top of the page?

As I say, most of those are not ‘functional’ issues, more ‘presentational’ ones, but any guidance you can give would be much appreciated.

With apologies for piling on the questions!
Best wishes,
HJR

Hi Howard,

I have to dive into some of your questions. I’ll come back to them later.

Regarding the repetition of code, you can write this:

#MozartWorks12.dataTable.nowrap td,
#MozartWorks13.dataTable.nowrap td,
#MozartWorks14.dataTable.nowrap td,
#MozartWorks15.dataTable.nowrap td {
	white-space: pre-wrap;
	max-width: 200px;
}

You are still repeating of course, but much less and it is easier to maintain.

Regarding your second question, can you try this:

table.dataTable>tbody>tr.child ul.dtr-details {
	width: 100%;
}

I’ll come back to your other question later.

Best regards,
Peter

Hello Peter:

1) Repetition: nice fix, works well.
2) Player width: your CSS certainly stops the audio player ever being displayed in short form, so that’s a fix, too.

However, just being really picky, I then tried:

table.dataTable>tbody>tr.child ul.dtr-details {
	width: 600px;
}

…because I’d quite like to keep the player in short-form, so it matches the size of the music score excerpts above it (which are always 600px wide). That worked to change the displayed width of the music player… but in the process, it also made the long-notes text beneath it start wrapping at 600px as well, which is not what was wanted (i.e., I wanted a small 600px-wide audio player, but the long notes text to wrap 100%, but by making the player 600px wide, that made the long notes 600px wide, too).

Is it not possible to format the one without implying a format for the other?

For now, I’ve reverted to the 100% wide setting, because the 600px-wide long notes text just looks silly. But if you need me to revert so you can check what’s happening, I’d be happy to do so: just let me know.

Best wishes
HJR

Hi Howard,

The width and height of your images are added to the img tag, so you cannot change it with css. Inline css has a higher priority. You need to write a javascript function I guess.

jQuery DataTables supports the fnRowCallback function which can be used in advanced table options. It might be possible to check the width of the image from that function and use it to define the width of your audio player.

I wonder however if this will improve the quality of your layout. Have you tried a modal window? Instead of a collapsed style? With a modal window only one row is visible at the time so the difference will be less visible to the user.

Best regards,
Peter