Hello I have a page in that page the user can drag and drop elements into a container but I don't have any restriction so user can drag element outside the container. I'm thinking about adding borders to the container but I have to print this page but I don't want to print the borders. This is what I have:
.bordes {
border: solid;
border-color: #ff0000;
}
#media print {
.bordes {
display: none !important;
}
}
But this hide all the elements inside the div with this class and I only want to hide the borders, here is the code example:
Code here
If you see the example, all its fine but when you click on the print button all the div is hidden and I only want to hide the red borders. Thanks in advance
You need to remove the border only:
#media print {
.bordes {
border: 0;
}
}
Instead of using
display: none !important;
use,
border: none;
Related
I have an HTML page that contains a block that contains another block.
I need to show the scrollbar on block A while I want to hide it on block B, but it is still scrollable, just like removing the background of the scrollbar.
(Block B is located inside block A)
But in fact, I can't hide the scrollbar. At the top of my code, I need to declare this globally because it is used in some of another blocks (Which block A need)
::-webkit-scrollbar {
width: 10px;
border-radius: 0 10px 0 0;
background-color: #fff;
box-shadow: inset 0 0 5px rgba(0,0,0,.5);
}
Here's the things I've tried :
Rewrite scrollbar in the element
.myElement {
::-webkit-scrollbar {
width: 0;
background-color: transparent;
}
}
Using scrollbar-color
.myElement {
scrollbar-color : transparent;
}
Using scrollbar-width
.myElement {
scrollbar-width : none;
}
But not a single one of those things works. Has anyone had the same experience? Please let me know how you fix it guys
Your 1. solution is correct, but with small change.
Go from this
.myElement {
::-webkit-scrollbar {
/*anything you want to do*/
}
}
To this
.myElement::-webkit-scrollbar {
/*anything you want to do*/
}
I'm using angular material version 9.2.4 and created a data table with pagination. I want my users to be able to print this table, I already removed every unnecessary element from the page with #media print, but the table's behavior is weird. I want my table rows to break to a new page if it cannot fit the page because of the number of rows, but it just skips the remaining data.
What I've tried so far:
Adding this to my css:
table {
page-break-inside: auto;
}
tr {
page-break-inside: avoid;
page-break-after: auto;
display: inline-block;
}
thead {
display: table-header-group;
}
tfoot {
display: table-footer-group;
}
Wrapping all table elements inside div, because I've read that the above CSS properties can ignore non-block-displayed elements.
$(document).ready(function(){$("table tbody th, table tbody td").wrapInner("<div></div>");});
Any other ideas?
I had the same problem but this has nothing to do with mat-table. This solution is highly specific to the rest of your page but this worked for me. I have a sidenav component with perfect-scrollbar and this caused the height to be limited.
I added this to master-layout.component.scss
#media print {
.mat-drawer-content {
height: auto !important;
}
.mat-drawer-container {
overflow: inherit !important;
}
perfect-scrollbar {
height: auto;
max-height: none;
}
mat-sidenav-container {
overflow: inherit !important;
}
}
More usefull will probably be the way I came to this. Open the DevTools of your browser and enable "Emulate CSS media Type", set it to "print". You can now inspect your page and the #media print tags will be enabled.
Now go over the elements and look at the renedered height. It should be larger than your window. If it's not, it must be limited by overflow: hidden, height: 100% or max-height: 100%. Adjust CSS so these are set to auto or inherit. Go up the elements untill none of the heights are limited to the window size.
At the bottom of my page there are 3 buttons. "Send, Save and Cancel" buttons. The Save and Cancel buttons are the same height but the "Send" button is different from the other two. Why is this happening?
I read on another post that said elements render buttons different from normal buttons so I tried to fix it with the solution given but it didn't work. I also tried removing element but it still didn't work. Thanks for your help!
Buttons Styles
background-color: #8f81e8;
color: #fff;
border-radius: 5px;
text-transform: uppercase;
font-weight: 300;
font-size: 16px;
cursor: pointer;
padding: 1rem;
CodePen
It's because your send is input while other elements are button.
Add border: none; to your css
you can give static height to all three buttons.
You have two different divs: .user-messages (the left one) and .settings the right one.
The left one contains an input, while the right one contains two buttons. So you can either add border:none to the left one to make the border disappear and then re-arrange your layout to use a button instead of an input.
Update
Wrap the buttons into a seperate div below the div of the two pages and do the following:
div {
display:flex;
justify-content:space-around;
}
button {
width: 100%;
margin: 5px; /* or whatever you want to have */
}
<div style="width: 100%; background-color: green;">
<button type="button">A</button>
<button type="button">B</button>
<button type="button">C</button>
</div>
Is the result of my snippet the desired outcome?
Seems to be the display: flex on the settings-btn-box that is causing it. One solution could look something like this:
.settings-btn-box {
/* display: flex; */
}
.settings-btn-box button {
width: 49%;
}
.btn-save {
/* margin-right: 10px; */
}
.btn-cancel {
/* margin-left: 10px; */
float: right;
}
Personally, I'm not a big fan of float, but since it's the last element in the div it should be fine.
I am generating a PDF Report using phantomjs.
Below is my CSS that avoids splitting text across two pages. It moves the entire line to the new page as expected.
.columns {
page-break-inside:avoid;
}
I wish to insert a margin and border at the beginning of each page, but haven't found a way to apply styling after these page breaks occur. Adding something like below adds the styling I desire to every column class, but I only want it applied to the first occurrence on each page.
#media print {
.columns {
border-top: .1rem solid #f0f1f4;
border-radius: .2rem;
margin-top: 40px;
}
}
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}