I am using mat-select to display a list of options so when you click on the mat-select input filed, it shows a list of options using cdk-overlay-pane. The overlay container width gets set the same as mat-select input field. However, it adds extra width of 32px to display animation. This forces the container to appear outside the screen width Is there any way of the adjust the width of the the cdk-overlay-pane container width.
Try this code, it works but it is not dynamic.
::ng-deep .mat-form-field {
width: 50px !important;
}
::ng-deep .mat-label {
width: 50px !important;
}
::ng-deep .mat-select {
width: 50px !important;
}
::ng-deep .mat-option {
width: 50px !important;
}
Related
I have a mobile menu with position:fixed and min-height of calc(100vh - 48px). Top is set to 48px. In the mobile menu I have a wrapper set to height:100% and overflow:auto. I tried setting it to min-height: 100% but it doesn't work. When the content gets taller, the content inside is hidden and there is no scroll. I have set overflow to auto and then tried scroll on the mobile menu but nothing works. What may cause the problem?
.mobile-nav__menu {
width: 100vw;
min-height: calc(100vh - 48px);
position: fixed;
top: 48px;
bottom: 0;
right: 0;
visibility: hidden;
opacity: 0;
-webkit-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
z-index: 21;
overflow: auto;
}
.mobile-nav__menu-wrapper {
min-height: 100%;
width: 100%;
background-color: #fff;
overflow-y: auto;
}
Try to set the height property on window resize javascript event something like that;
var onresize = function() {
height = document.body.clientHeight;
}
window.addEventListener("resize", onresize);
Try using percentage instead of absolute px values.
For example,if u want a header of height 10px on a screen that is 1000px tall, type in "1%" instead of "10px".
This will help the header to adapt to different screen sizes.
Also try adding background-size:cover OR background-size:100% in the css class.
Can anyone tell me how to make ng-input-tag(Angular) scrollable in X-direction.
Currently if I insert the tags then the height of the div increases.
What I want is that If I go on inserting the tags then it should scroll in X-direction
I have tried:
width: auto;height: 34px;overflow-x: auto;overflow-y: hidden;white-space: nowrap;
But it didn't work as expected
So let me know where I am wrong.
I know this is late, but I have seen similar questions go unanswered recently and this one is at the top of a google search for this problem. This can be done using only CSS. If you would like an added visual effect, try customizing the scrollbar.
For the X direction:
This can get a bit ugly if you decide to set a min-width or width on your tags.
The only way I've found to do it in the X direction is using flexbox:
tags-input .tags .tag-list {
display: flex;
flex-direction: row;
overflow-x: auto;
}
tags-input .tags .tag-item {
/* Applying this display class */
display: inline-table;
/* OR set the tag width to ensure that the text is visible */
min-width: 150px; /* Could also use width: 123px */
}
This Github issue is also directly related to the problem.
For the Y direction:
Applying a fixed height to the .tags class and setting the overflow-y to scroll will give you the desired result:
.tags {
height: 34px;
overflow-y: scroll;
}
Try This
simple css to add on tags-input class for scroll on x and y axis
.tags-input {
max-width: 100%;
line-height: 22px;
overflow-y: scroll;
overflow-x: scroll;
height: 65px;
cursor: text;
}
I'm creating a theme for Highcharts and need to be able to configure the shadow angle on the tooltips. In some configuration areas, shadow allows for an object (ex: plotOptions.pie.dataLabels.shadows) but it seems that the shadow setting on tooltip does not allow this. Is there a workaround or a global setting I'm missing?
You can put css-style on your tooltip, in that way you can setup your shadow like that :
First deactivate the default shadow :
tooltip: {
valueSuffix: '°C',
shadow:false,
useHTML:true,
formatter: function() {
return '<div class="tooltip">Test</div>';
}
// Replace "Test" with the formatter you want, there are good examples
// on their website.
}
And set the style of your tooltip :
div.tooltip {
-moz-box-shadow: 20px 20px 20px #888;
-webkit-box-shadow: 20px 20px 20px #888;
box-shadow: 20px 20px 20px #888;
}
Here is an live example : http://jsfiddle.net/PKFSs/
With that you can do whatever you want on your tooltip.
EDIT :
If you can't use css :
formatter: function() {
return '<div class="tooltip" style="-webkit-box-shadow: 20px 20px 20px #888;box-shadow: 20px 20px 20px #888;">Test</div>';
}
I know it is not the best way, I'm trying to find a better solution, but this one works.
When using #media print highcharts seems to ignore with width and height in the screen section and instead use the values from the display section.
This is preventing me from printing my entire web page with the highcharts on it since the charts are not the right size when printed.
See jsfiddle example
#media screen
{
.cont
{
width: 50%;
height: 100%;
}
}
#media print
{
.no-Print{
display: none;
}
.cont
{
width: 5%;
height: 5%;
}
}
It doesn't ignore the styles. It just defines width in pixels for elements inside container. To see this, you can add set container's overflow to hidden:
.cont {
width: 5%;
height: 5%;
overflow: hidden;
border: 1px solid red;
}
(see: http://jsfiddle.net/6WxgG/15/embedded/result/)
AFAIK it's not possible to reasonably resize the chart using only CSS.
See the following link: http://www.howru.nl/preken/new/test3.html
For some reason I keep getting space at the right of the three main buttons.
To better identity this on this forum, I've enabled the border of the relevant table temporary.
The issue is inside the following class I reckon:
.button
{
display: block;
width: 350px;
height: 135px;
margin-left: 7px;
margin-right: 7px;
margin-top: 10px;
margin-bottom: 20px;
text-decoration: none;
background-position: top;
color: #FFFFFF;
}
The specified width is the actual width of the background image.
The full CSS sheet can be found at http://www.howru.nl/preken/new/styles.css
Right column (text) should float at the right, as is the case currently. Left column (buttons) should float at the left (as is currently the case), and the center picture should float in the center. Strange thing is the left column takes more space in the table, while none have a fixed width.
Ideally I don't want to specify a width of a column twice (for the TD and for the content, in case of a BG image on the display-block'd content); in the proposed solutions below the display-block'd has a width specified (width of the background image) and the parent TD element as well... That is what I don't like and for which I started this post. Because I still don't understand why the TD's aren't equally sharing the available table space:
Now column 1 (left) seems to take the most, while it doesn't need so much, the second takes a little less, and the right column takes only what was specified for the inner width, whilst the left (1st) column has the same (width specified for the content instead of the TD) and does not stick to that width apparantly, while the right TD does...)
Both in IE as Opera I get this; any idea what I am missing??!
Goal is to understand what is happening, and why. So I'm not looking for a cheap fix - as one can thing of 100 'ugly' ways to do this.
here are the changes i have made. Try this. Btw you should use % instead of px
.top {
vertical-align: top;
width: 350px;
}
removed float from .blkright
.blkright {
}
.title {
font-size: 14px;
font-weight: bold;
letter-spacing: -1px;
padding-bottom: 5px;
text-align: center;
}
.column {
margin-left: 12px;
overflow: hidden;
width: 325px;
}
Change right table .top .column width in the to change this space to right of buttons
.column {
overflow: hidden;
padding: 5px 5px 25px;
width: 290px;
(originally width was 250px) because it is trying to fit the width: 100% you have set
you can also remove the 250px , since the right column is the only column you've set a width on
I am not ultimately sure how you want the rest (e.g. the text paragraph) aligned then, but here is my approach.
First, give each body-column a class or an id. You assign these classes to the three <td>s respectively.
.content-left {
float: left;
}
.content-mid {
float: left;
}
.content-right {
display: table-row;
}
Although this solution takes a bit more effort than IanO.S.'s, this solution is also more dynamic. If your button or image sizes change someday you don't have to hack into your code, find and edit your pixel-widths.
Add declaration of width on the first table cell
.top:first{
width: 364px;
}
and you wont see any spaces anymore