I'm building a simple table in CKEditor. If I select Left or Right align, it aligns in the expected side of the view when saved. However, when saved this fails if I select Centre align. It's obviously not the whole page because Centre Align text above and below will display Centre aligned. This issue only becomes apparent when "saved" ... (ie a centre aligned table will centre align in edit).
Can you suggest what's going on?
Thanks
How is the centering actually performed? If you have configured using the XHTML configuration, this sounds like a class issue - if not, it could be a CSS !important override rule.
I have CKE configured based on the XHTML example, so my CKE produces centering on table cells like this: <td class="JustifyCenter">Twilight Sparkle</td>. So, if you place the HTML generated by CKEditor in an external page, make sure that the JustifyCenter class actually defined in the parent page. Also in Developer tools that not only it the class rule exists, that it is actually correct and applies.
Also in your developer tools and check to see if your CSS style is actually working or is it being overridden. If you have a parent page CSS rule like td {text-align:left !important;} and CKE produces content like <td style="text-align:center">Fluttershy</td>, the parent page is overriding your inline CSS definition.
I'm only guessing here - it would help if you can you show us the final code as it's used when saved and also your CKEditor configuration.
the table align to center CKeditor will generate something like this, <table align="center">
but it is not working.
finally i found a solution by using CSS, here my code
table[align="center"] {
margin: 0 auto;
}
Related
I need to change the card spacing (in CSS). I've managed to change the horizontal margin in my styles, while the vertical margin I'm not able to change. (Apex 19.2)
example: https://apex.oracle.com/pls/apex/f?p=93624:1
I'm not sure if the exact names are the same for you, but you should be able to find it anyway.
When you inspect the list it should be a <ul> element.
It's child <li class="t-Cards-item"> has <div class="t-Card">
You can change the style of the .t-Card class in order to achieve what you want.
Setting margin-left or margin-right to your desired values should do the trick.
EDIT: Just looked at your link and it does work.
I attached the element I mean in the screenshot. It already has margin: 8px, but if you add the margin left and right you can change the space between the cards.
".ngx-datatable datatable-header{
overflow: visible !important;
}
.ngx-datatable {
overflow: visible !important;
}"
I have two ngx datatables in two different pages,And I set customized filter in one datatable header by an filter icon, Problem is the dropdown of onclick of icon is cutting the dropdown,for that I googled and got to know that its an CSS issue and can be handled. So i written the following in my Angular SCSS file for one component related.
Using this working but impacting on other ngx datatables.
Help or suggest me any one on this.
Aren't they both having separate CSS files? If that is the case, it shouldn't be affecting one another. If they are both having the same CSS file as the style sheet, provide an ID to each table and provide the same id in the CSS as well, so that the specified style gets added only to that Id.
Once you specify the ngx-datatable styles under the respective Id's, it should work.
Let me know if it worked.
I am using DOMPDF library to generate invoices dynamically. My use-case scenario is to leave around 3 inches of space on top of each page. On the first page i created it using a blank div with appropriate height.
Now on second page, it doesn't take the required height from very beginning for obvious reasons. any suggestions?
Instead of spacer divs just set the page margins in css with:
#page { margin-top: 3in; }
If I open the following HTML e-mail in Gmail or Outlook it renders as it should:
<img src="img.png" />
However, if I open it in Outlook and then forward it to Gmail, it adds extra garbage HTML that makes the area taller than it should be (the 'p' tag is responsible for the added height - 3px specifically):
<p class="MsoNormal">
<span style="font-size:10.0pt">
<img src="img.png">
<u></u>
<u></u>
</span>
</p>
There are lots of solutions for fixing spacing issues in Gmail, like adding display:block to the image, setting the font-size and line-height to 0, etc. I've tried over a dozen methods and none have worked because of behind the scenes HTML modification that I have no control over - styles and attributes getting stripped, tags with their own properties getting added, etc.
Is there is a work around to allow the original formatting to always be preserved? I will gladly provide any additional details needed, just let me know.
There is no fix for this, but there are ways to limit and hide the size of the separation. I'll refer to it as separation, but it is really the top cell expanding due to Outlook applying the mso-normal p tag. Here is a related article.
Between tables creates a bigger gap (about 15px) than between table rows (2px). It is more complex, but try and put everything that you can't afford separating into one big table. Colspans and rowspans can be complex, but they work if set up correctly.
To hide the separation, wrap all the tables in a master-content table with the bgcolor set. For example, make one big content pane set to white. When sending from Outlook, all your child tables will then move, but the gaps will remain white, stopping unwanted lines appearing in your email body.
A trick for footers - As the last child table of your main white panel, when this separates, it will create a white line underneath it. Either remove the footer table from the main panel or set the cell bgcolor to the same as your email background to hide this separation.
I managed to change this situation by changing the MsoNormal class
<style>
td p.MsoNormal {margin: -4px !important}
/* ou */
.MsoNormal {
margin: -4px !important;
}
</style>
Does anyone know how to customize the form fields that Spring Roo generates so I can change the with of the associated label?
For example,
<field:input field="firstName" id="c_com_myclass_Person_firstname" label="What is your first name?" z=""/>
The field is rendered inside a div that is the full width of the screen, but the label is split onto two lines as if the tag has decided to give the label e.g. 50px width or something. e.g.
What is
your first name?:
There's no 'style' attribute on the tag and I can't find anything that looks like it would let me control the width.
Thanks
It's in the standard.css - class label has a 100px fixed width. Was so obsessed with finding in extracted dijit tundra css files I forgot to check the obvious.
Have to say, there are lots of things I like about Roo, but the tag libs and dijit stuff make working with the presentation side of things a real chore if you want to customise the appearence of your app...