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*/
}
Related
I have an angular project where I'm using Angular Material and material table.
It seems that all the text in my table has the 10px margin top and bottom applied due to a class named something like: .ng-tns-c5-1 or .ng-tns-c6-1 etc.
I can't find a way to change those margins without inspecting element, finding that class and then using CSS to change that margin.
But after some changes to other elements on the app, the .ng-tns-c6-1 (for example) is changed to something like: .ng-tns-c4-0 and then I have to change that. The problem is I've done this 5-6 times now and it's a complete pain.
Because of that the table has a lot of useless white space and just overall makes things look bad.
What is that class and what can I do to make sure the margin remains at the 2-3px I'm setting?
This is the type of thing I have in my CSS:
.ng-tns-c5-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c5-0 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c6-1 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
.ng-tns-c4-0 {
margin-top: 2px !important;
margin-bottom: 2px !important;
}
You can use the following to select all the current and future elements.
[id*='ng-tns-c'] {
}
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;
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;
}
}
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
It's a tricky problem I have and I don't find the best solution. Here is the page:
https://waaave.com/tutorial/android/android-ics-for-your-htc-desire/
As you can see, the green div element overflows the user profile. I don't want to use a margin-left to align it because it will change the position of other green elements and I want to keep a common structure between each of them (this means I don't want to add a new class to align this green element). I want to design a clean solution and make this green element automatically align when it is in the first part (next to the user profile) and in the second part (below the user profile) and only with css (I want this solution working with JavaScript deactivation).
here is the main class for this div (others are just margin top and bottom adjustments):
.block-info {
display: block;
margin: 10px 0 0;
padding-bottom: 3px;
border-left: 28px solid $green;
.icon-block, .text-block {
display: block;
}
.icon-block {
float: left;
margin-top: 5px;
margin-left: -23px;
}
.text-block {
padding-left: 18px;
}
+ br {
display: none;
}
}
If someone have an idea.
Set .block-info to display: table and its children to display:table-cell (this might not be needed, but I believe it should be done for correctness) and it should behave more like you expect.