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.
Related
when I tried using col-4 for three divs, I had padding in those divs and all were connected together as shown in the images.
code https://i.stack.imgur.com/1MDiI.jpg
gutters https://i.stack.imgur.com/bcgOg.jpg
no-gutters https://i.stack.imgur.com/WP844.jpg
I would go along with your question which isn't asked properly.
Add p-0 class to all your col-* divs which will basically reset the padding in between columns, and afterwards you can add m-* ; where * = 1,2,3,4,5 (i.e. m-3) which will add margin specified in rem measurement in between the columns.
In UBlcok Origin I'm trying to hide the search/header bar at the top of Youtube when on a video page, but not when on the home page. It's been far trickier then I imagined because youtube not only reuses ids on the same page, but also reuses the same ids and classes on the home page as the video pages - so I thought I would try and use a procedural cosmetic filter.
So far I have:
! stop search bar from floating when scrolling
youtube.com###masthead-container.ytd-app:style(position: static !important)
! remove resulting whitespace (search bar still remains for some reason)
youtube.com###masthead-container:style(height: 0 !important)
! move video up to cover search bar but only if #content's ytd-page-manager element contains a ytd-watch-flexy element
youtube.com###content.style-scope.ytd-app:has(ytd-page-manager:has(ytd-watch-flexy)):style(position: relative; top: -56px !important)
but the last line doesn't work. So I changed it to call the custom youtube elements by id and class:
youtube.com###content.style-scope.ytd-app:has(#page-manager:has(.hide-skeleton)):style(position: relative; top: -56px !important)
and it will successfully select the correct #content element if I remove the :style(...) conditional - but, as shown, it doesn't appear to apply hide or apply the style if I chain a :style() to the :has() conditional.
Can you chain :has() and :style()?
The feature of chaining conditionals to :style() has not been added as of the end of 2019
https://github.com/uBlockOrigin/uBlock-issues/issues/382
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;
}
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>