I'm using facebox ( https://github.com/defunkt/facebox ) with same code downloaded from github without any modification except remote.html
I JUST added this code in remote.htmlTABLE in facebox window with this code:
Hello
World
I'm remote.html, a different file loaded with ajax.
I'm remote.html, a different file loaded with ajax.
PROBLEM: There is NO CELLPADDING on facebox window.
How can I solve this problem?
OR ANY OTHER SOLUTION TO REPLACE WITH FACEBOX?
Regards,
Nuri Akman
It's because the facebox.css file contains this:
#facebox table {
border-collapse: collapse;
}
Remove it or override it with other CSS.
On version Facebox 1.3 add this code in facebox.css:
#facebox .content table tr td { padding: 4px; }
#facebox .content table tr th { padding: 4px; }
#facebox .content table { border-collapse: separate; border-spacing: 1px; }
Related
I'm using CKEditor 5 in Angular 7, Classic build.
All working fine except that the p tags in the content edit area have this css applied:
p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
Which results in a big vertical margin between paragraphs in the content edit area.
I've been going through the documentation but haven't found a clear answer as to how I can remove or override this css. In previous versions of CKEditor the css file was easily accessible and overridden, but in version 5 not so - it seems I may have to do a custom build, which I'm hoping to avoid.
Before I go down that route - has anyone else come across this? Any other solutions or recommendations?
Thanks in advance :)
You should use :host ::ng-deep to override it with css.
Example:
:host ::ng-deep .text {
p {
margin-bottom: 20px;
}
h2 {
margin-top: 40px;
margin-bottom: 10px;
}
h3 {
margin-top: 25px;
margin-bottom: 5px;
}
h4 {
margin-top: 20px;
margin-bottom: 5px;
}
}
<ckeditor class="text" [editor]="textEditor" [config]="config"></ckeditor>
I'm using CKEditor 4 and I don't know if the source tab is still available in that version. If so, you have to edit ypur ck.config file and add CKEDITOR.config.allowedContent = true. After that, you can now paste a style in the source tab
After a lot of tinkering I finally have a decent setup for my material table. It's got pagination, it's got sort, it's got all the goodies I need. However, it looks off because several of my columns are single digit values, and they have the same width as columns I would prefer to be larger (like the description which is wrapped excessively).
Being inexperienced in scss (and css for that matter) I'm at a loss for how to fix this. I attempted tinkering with the flex property in just about every way I could figure out, and it doesn't appear to change a thing on the table.
This issue is further complicated in that I cannot easily use the 'hack' of the material table generating classes based on the column identifier, as the columns are generated dynamically. I could pass in width information as well, but that seems like an unmaintainable hack.
Is there a way to apply styling to the entire table and header that would get me the desired look?
I used this successfully with Angular10.
First, wrap your table with a div, like this:
<div class='table-responsive'>
<mat-table>
....
</mat-table>
</div>
then add this CSS
.table-responsive {
display: block;
width: 100%;
overflow-x: auto;
}
.mat-table {
width: 100%;
max-width: 100%;
margin-bottom: 1rem;
display: table;
border-collapse: collapse;
margin: 0px;
}
.mat-row,
.mat-header-row {
display: table-row;
}
.mat-cell,
.mat-header-cell {
word-wrap: initial;
display: table-cell;
padding: 0px 5px;
line-break: unset;
width: auto;
white-space: nowrap;
overflow: hidden;
vertical-align: middle;
}
This will size the cells according to the content, and make your table horizontally scrollable!
Assuming that you do mean the angular material table, this one might help:
md-table - How to update the column width
Use the below style for columns width and header
columns={[
{
title: 'Create Date',
field: 'create_date',
cellStyle: {
whiteSpace: 'nowrap'
},
...
]}
options={{
headerStyle: {
backgroundColor: '#DEF3FA',
color: 'Black',
whiteSpace: 'nowrap'
},
I am using this excellent package: https://github.com/barryvdh/laravel-dompdf
To download a view to a customers computer.
$pdf = PDF::loadView('doc_generation.mot', ['car' => $car]);
return $pdf->download($vrm .' MS.pdf');
Everything works fine, but no html entities are being shown on the pdf. Have tried the tick itself, and ✔ but both don't show.
I also have a div:
.number-plate {
background: #FFD307;
padding: 16px;
border: 1px solid #999;
font-size: 36px;
font-weight: 700;
border-radius: 5px;
}
Where the padding isn't shown on the output PDF. Although padding used elsewhere on other selectors is fine.
Anyone know how to fix these issues?
ive put in the standard mmenu but when i open the menu my page always goes to the top of the page, is there anyway to stop that when the menu is closed again you go back to the same place on the page.
any ideas
Thanks
I had this same issue, but was able to fix it by simply removing
height:100%;
on my body and html css wrapper.
I changed my css from this:
html, body {
height: 100%
width: 100%;
margin: 0px;
padding: 0px;
}
to this:
html, body {
margin: 0px;
padding: 0px;
}
and it solved the issue for me.
I use Twitter Bootstrap in one of my projects, but I have the problem that my content goes out of the browser view. Normally you see the scrollbar on the right side of the screen, but not in my case. I searched in bootstrap css file after overflow: hidden; or something like that and deleted it, but that didn't solve the problem.
Does someone know how to enable scrollbar in bootstrap css? (without bootstrap css the bars are showed)
edit:
I have find out that the problem the navbar-fixed in the black navbar which you can add. Without postition: fixed it works fine.
Make sure all the <div> from the navbar are closed. If not, the fixed property is inherited by the descending tags and the scroll bars disappears.
I found removing the "position: fixed" for the navbar resolved this problem for me:
.navbar-fixed-top, .navbar-fixed-bottom {
/*position: fixed;*/
right: 0;
left: 0;
z-index: 1030;
margin-bottom: 0;
}
This guy also has some more useful info: http://davidlains.com/strange-twitter-bootstrap-scrolling-issue
Override it with your last stylesheet.
( Probably your own theme stylesheet. )
html, body {
overflow: visible;
}
<style type="text/css">
body, html {
height: 100%;
overflow: hidden;
}
.navbar-inner {
height: 40px;
}
.scrollable {
height: 100%;
overflow: auto;
}
.max-height {
height: 100%;
}
.no-overflow {
overflow: hidden;
}
.pad40-top {
padding-top: 40px;
}
</style>
Hope this is what you are looking for
You are missing a closing </div> in your HTML code. For every <div class="foobar"> you must have a closing </div>. This (scrolling issue) can happen when using twitter bootstrap and not closing your divs.