0

Hello,

I am having a problem aligning text to the top of the table.

Cek this out: http://gsa-constructionspecialist.com/experiences

All the text is not aligning to the top. It's aligning to the center vertically. I wonder how to align the text to the top with tiny mce.

I don't think I have enough button to do so. I download a free version of tiny mce and start adding plugin with it. I do not know which plugin to add to align the text vertically. And how to add such plugin in tiny mce free version.

Any idea?

3
Contributors
16
Replies
82
Views
9 Months
Discussion Span
Last Post by gentlemedia
Featured Replies
  • > Cek this out: http://gsa-constructionspecialist.com/experiences Wow! Those colours! ¯\_(ツ)_/¯ Read More

  • 1
    diafol 3,720   9 Months Ago

    tbody{ vertical-align: top; } This is not TinyMCE - it is the default for your browser. TinyMCE is not applying any formatting on this from what I can see. Read More

  • 1
    diafol 3,720   9 Months Ago

    This (`tbody{...}`) should not be in tinymce css file, but in your general site stylesheet. The editor view masy have nothing to do with the displayed html that the viewer sees. Read More

  • Davy, why aren't you listening to Diafol? HTML elements have default styling also named browser defaults (placed in user agent stylesheets) and they're according to the spec. https://www.w3.org/TR/CSS2/sample.html That said... the browser defaults of `tbody`are shown below. thead, tbody, tfoot { vertical-align: middle } td, th, tr { vertical-align: inherit … Read More

  • > The article alignment does not change yet. You mean the dates right? They are aligned at the top of the the `td` now on my screen. Read More

0

The link shows the site. It.s not obvious to which bit you.re referring. What table?

0

Hello, I create those text within table with border = 0.

The only problem is that the text align vertically center within the table.

For example:

2005 - Now See the text next to it is not align with 2005 - Now, there is a space in between the text next to it (see the right side of Now).

0

Looks like the useragent stylesheet is setting vertical-align to middle on tbody. Just supply your own tbody.

1
tbody{
    vertical-align: top; 
}

This is not TinyMCE - it is the default for your browser. TinyMCE is not applying any formatting on this from what I can see.

0

I see what you mean. lol. but the css of tinymce is confusing. I do not know which one to change in order to make all the vertical alignment aligning to top.

0

Hey, I try to edit the tinymce:

https://www.tinymce.com/docs/configure/content-appearance/#body_class

  <script>  
    tinymce.init({
    selector: 'textarea',
height: 200,
    width: 600,
    content_css : '/assets/tinymce/custom_add.css', 
    plugins: [
           'advlist table autolink lists link image charmap print preview anchor',
           'searchreplace visualblocks code fullscreen',
           'insertdatetime media table contextmenu paste code'
            ],
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | table',
    content_css: "<?php echo site_url('assets/tinymce/css/codepen.min.css'); ?>",
    file_browser_callback: RoxyFileBrowser
    });  
  </script>

assets/tinymce/custom_add.css

tbody { vertical-align: top; }

Even so, I have not seen the result in my actual website.

Edited by davy_yg

1

This (tbody{...}) should not be in tinymce css file, but in your general site stylesheet. The editor view masy have nothing to do with the displayed html that the viewer sees.

0

The problem is I would like each line that I input horizontally inline with each other not in between space as you see.

I don't think the general style sheet able to do that.

2

Davy, why aren't you listening to Diafol?

HTML elements have default styling also named browser defaults (placed in user agent stylesheets) and they're according to the spec.
https://www.w3.org/TR/CSS2/sample.html

That said... the browser defaults of tbodyare shown below.

thead, tbody,
tfoot           { vertical-align: middle }
td, th, tr      { vertical-align: inherit }

And this is what you see. Your dates are vertically aligned in the middle of the td The td is placed inside a tbody(even if you didn't do that, the browser does that for you) and as you see above, the td inherits the vertical-align: middle from tbody.
Do you want them at the top of the td, then you override the default styling of tbody in your own sylesheet (not the tinyMC stylesheet... this has nothing to do with it) to vertical-align: top;

So like this:

tbody { vertical-align: top }

Edited by gentlemedia

1

The article alignment does not change yet.

You mean the dates right? They are aligned at the top of the the td now on my screen.

Edited by gentlemedia

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.