Jump to content

Evernote Mac (6.7.1) width scales inconsistently when using max-width


Recommended Posts

Hello! I'm an avid user of Evernote as not only a notetaking application, but also as a dashboard system and portable database for hobbies (D&D) and recipes. I've been using a bookmarklet to directly edit the Evernote Markup in order to have detailed control over the appearance of notes, and find the max-width property works inconsistently on Evernote Mac.

Use case

For recipes I use a table to display nutrition information. To keep the table flexible at narrower widths (my phone) but readable at larger widths (my desktop in fullscreen mode), I want the table's width to be 100% up to 600px wide. With inline CSS, this is fairly easy:

<table style="width: 100%; max-width: 100%">
   ... yada yada yada ...
</table>

Evernote Web respects this styling, and functions as expected. But Evernote on Mac appears to have a bug - it won't scale down the table appropriately. This is true whether I preview the note using a Side List View or Top List View or open the note in its own window. When Evernote first renders the note, it renders the table's width properly: 100% if the content view is less than 600px wide, or 600px if the content view is more than 600px wide - awesome. If I scale from under 600px wide to over, the table behaves correctly: it's 100% wide until the view hits more than 600px and then stops scaling - awesome. But when I scale the window down in width, the table scales proportionally - bug.

Steps to reproduce

  1. Create a new note in Evernote for Mac
  2. Create a table width 2 rows and 2 columns and fill them with text of your choice.
  3. Log into Evernote Web and open the note you just created
  4. Using an ENML editor, edit that note by adding the inline styles mentioned above to the table tag to give it 100% width but a max-width of 600px
  5. Save the changes, and then sync.
  6. In Evernote for Mac, change the window's width to something narrow (e.g. 1/3 to 1/2 of your screen's width).
  7. Preview or open the note with the table. Note that the table's width should be 100% of the content view.
  8. Make the window wider, up to the full width of the screen. Note that the table's width is 100% until a certain point, and then it no longer scales with the window width.*
  9. Make the window narrower. Note that the table's width is shrinking proportionally to the window's width.

*I was also able reproduce steps 8 and 9 just by starting with a narrow window, clicking the maximize button and then clicking it again.

Idea

I love Evernote, and I'm just hoping for consistency in table behaviour.

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...