I have a layout like this one. I need the green element to be always centered, whatever the screen size. It works, unless the scrollbar appears.
I've seen in chrome there is 'overflow-y: overlay' css attribute, but I can't find a way to reproduce the same behaviour on other browsers, unless with some javascript (which I would like to avoid for something like this)
IMPORTANT: always hiding or showing the scrollbar is not an option!
Is there a way to achieve the wanted result?
I've just created a fiddle for this. Just remove padding from .body and set width as 100% - padding, like I did.
If you don't want only green div to be scrollable, just move overflow-y: auto; to .container
.container .body {
overflow-y: auto;
max-height: 300px;
width: calc(100% - 200px);
margin-left: auto;
margin-right: auto;
}
Related
I have a problem with flexlayout and overflow. Here you can see my Problem:
The icons are not 100% scrollable. I have absolutely no clue how to fix this. In theory, I think everything should be correct. I use Angular, Angular FlexLayout, Custom CSS. The Icons are grouped using flexlayout="column" and flexlayoutalign="space-around center" and everything is encapsulated with a div flexlayout="row", flexlayoutalign="space-around center". This row is now not fully recognized by my overflow CSS variable using custom CSS. Here are my classes. First, I set a fixed boundary for the popup (one hierarchy-level over the mat-card), and the latter is added to the mat-content section of the mat-card.
CSS for the Popup:
.max-height:{
max-height: 500px;
}
CSS for mat-content:
:host{
overflow-y: auto;
display: flex;
flex-direction: column;
height: 100%;
}
mat-dialog-content{
max-height: unset !important;
}
.example-card{
height: inherit;
}
.mat-card-content{
max-height: 300px;
overflow-y: auto;
}
.min-width-icons{
min-width: 100%;
}
Any ideas on how to fix this error?
Edit:// here are inspection figures:
Edit:// if I set a fixed height on the icons, e.g., 50px, the icons move out the upper boundary even more:
Edit://
issue persists even if i use png/jpg:
Edit://
Maybe it has something to do that the description class is adding word-break: break-all; But, either I do not how to counter that.
Edit://
Ugh this is some nasty CSS sh... got it working! It has something to do with the overflow-wrap/word-break of the underlying description:
As far as I noticed is that everything got better after i added width/min-widt of 100%. After that, i tried to set the height value to 100% (not worked). But, as far as i add a height in px (every value from 1px to 2000px) everything works as expect, which makes absolutely no sense to me, maybe some CSS mastermind can me pin point the reason. Field height is marked in black and green is the overflow word-break.
But, for now the problem seems to be solved with this css:
.text-area{
word-break: break-all;
min-width: 100%;
width: 100%;
height: 100px;
}
My webpage looks like this
My aim is to make the Outer Pad's height to fit the viewport height and make the inner Checklist scrollable. I have tried
.html{
height: 100%;
}
.pad{
height: 100%;
overflow: hidden;
}
.list{
height: 100%;
overflow-y: auto;
}
Fiddle: https://jsfiddle.net/chandannadig/esmrLzuv/10/
The moment scrollbars are visible, the data is pushed towards left and the pseudo elements I have used to get the folded effect are screwed up. I want to achieve the following:
Make '.list' scrollable without showing scrollbars
The pseudo elements should not be affected by the scrollbars
The design should be responsive
Please help me achieve this
I have updated your fiddle(The html is not looking similar to the screenshot given above however i tried my best to provide you a solution).
I have added
.content {
overflow: scroll;
width: calc(100% + 20px);
height:100%;
}
It solve the purpose list is scrollable calc(100% + 20px) adds extra space for scrollbar and it is responsive as well.
I would like to make a layout with flexbox model layout. I want to
make full height of parent element, however I want some margin-bottom
of the browser window. It does not matter how big screen is margin
bottom remain same.
Many thanks and complete code.
https://jsfiddle.net/magtechpro/hu45ns64/2/
make the bottom border colour the same as the page background - or Transparent. In the fiddle it won't look right but on the page it should.
.flexbg {
display: flex;
max-width: 100rem;
width: 100%;
margin: 2rem auto;
height: 98vh;
}
Do your research for cross-browser support though.
I have a portfolio page with a image display with zoom.
I have this code: http://codepen.io/Mpleandro/pen/LvrqJ
The div that shows the image has a class of .display, on line 13 of the HTML and the css formating for this div isline 90.
The image width will be flexible, so I what I want is to make the containing div inherit the width of image.
I tried the css property auto, inherit and min-with, but nothing works!
Could someone help me?
P.S.: I need a responsive solution.
Thanks
since 1 year has passed you may not be interested in the solution, but hope that helps someone else.
I also had a situation like that where I needed a div to be of the same width as the image and this had to be responsive.
In my case, I set a fixed width for the div
.some-div{
width: 250px;
}
I also had responsive image:
img{
display: block;
max-width: 100%;
height; auto;
}
and then I added a media query with threshold when the fixed width of the div started to affect the responsive nature and simply addedd this:
#media screen and (max-width: 917px){
.some-div{
width: 100%;
}
}
For my project the threshold was 917px when the fixed width started to affect.
I guess it is a solution that will fit everyone since width: 100% after the certain threshold will always be the width of the image if the image is responsive.
I don't know how to give you a perfect answer, but I can hopefully send you in the right direction. First, you can forget about inherit or min-width because they are not what you want.
auto is the default value, and I think that the default behaviour is very close to what you want: the width of the div adapt to its content. If this is not the current behaviour, this is because of many other reasons including the positioning of that div. The thing is, you won't have a proper centering and sizing of the <div class="display"> with only CSS, because it would need a specific explicit width declaration.
Since you already use Javascript to display/hide the good images, you could use Javascript to set the width everytime you change the image that is in the box.
My best advice would be to use existing solutions which are tested, approved and look really good. A 2 seconds Google search pointed me to Fesco which you could try.
I'm not sure if this is what you mean, but if it is, I hope it will help!
If you want your image to fill the div, but to scale with the browser, try setting the width of your div. Next, apply max-width="100%"; height: auto; to your image.
The simplest solution would be to just set .display to display: inline-block;, which would adjust its size to the contained image. If you want to be responsive as well, you need to define an upper limit via max-height: 80%, for example.
Put together, it would look like this: http://codepen.io/anon/pen/IluBt
JS line 17:
$(".display").css("display","inline-block");
CSS for .display
.display {
position: relative;;
background: rgba(255,255,255,0.5);
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
max-height:80%; /* <-- limit the height */
top:10%;
left:0;
margin:auto;
}
And to align everything nicely:
.loader {
color: red;
position: fixed;
width: 100%; height: 100%;
background: rgba(0,0,0, 1) url(../http://www.mpleandro.com.br/images/new/loader.gif) no-repeat center center;
text-align: center;
}
Let's say I have a CSS DIV that holds formatted syntax code. The DIV is set to a min-width:100; and a max-width:100;
This same DIV has another CSS declaration for when the DIV is Hovered, max-width: 135% !important; and min-width: 135%;
So if the DIV holding the formated code is wider then the DIV's width, it shows a scroll bar and when you hover over the DIV it expands the DIV to the width of the code not to exceed 135%, if the DIV's code does not exceed the width of the DIV then the DIV stays the same width.
My problem, is that when a div exceeds the 100% width, it expands to the width of the code inside but stays LESS then 135%, is there a way to make it expand to 135% even if the code is not 135% but is over 100%?
Hopefully this makes sense
I almost need some kind of conditional statement that says...
If DIV contents are > 100% then make DIV 135% on Hover otherwise leave DIV at 100%
Is this even possible?
Here is my full CSS
.syntax {
min-width: 100%;
max-width: 100%;
margin: 1em 0 1em 0;
position: relative;
overflow-y: hidden;
overflow-x: auto;
font-size: .9em;
display:inline-block;
}
.syntax:hover {
max-width: 135% !important;
min-width: 135%;
}
I'm not sure I'm getting waht you mean, but if I'm not mistaken, all you're leaving aside is this:
min-width: 135% !important;
you may need to adjust overflow depending on what you need
A better option would be to use fixed sizes, but if you're working on adaptive layout environments guess that is a no go