I am somewhat between new and intermediate at web designing / coding...
Here goes!
if you look at this :
http://jsfiddle.net/ZPufX/
the css indicates an auto scrollbar on the y axis.
the thing is that i am having problems making it to show up only when the text (multiple "some text" in the code) shows up, and morover, it is not even scrolling as it is...
any clue?
found the answer!!
in the propreties on the css file, go something like this :
div.example
{width: 960px;
height: 430px;
position: relative;
top: 90px;
left: 296px;
overflow: hidden;}
and then :
div.example
{width: 960px;
height: 430px;
position: relative;
top: 90px;
left: 296px;
overflow: scroll;}
this will cause the scrollbar to appear only when hovering over the box !
thanks to vimalnath for his help on the subject!
I just tried to change the position of the textbox to relative from absolute
Demo here:
fiddle
Related
In my popup window, all info and inputs are usually fully displayed when first triggering it, however, I have a textArea box that I can expand to whatever height. Upon expansion, I want the entire popup to scroll on the page, not just that particular div which holds the expanded textArea.
I'm using this bit of CSS to make my popup window full height and scrollable when I expand the textArea.
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
Everything worked as intended with that bit of CSS, however, I noticed that the popup no longer closes when clicking the overlay, and it's due to the pointer-events: auto, but removing this bit of CSS brings me back to square one where the popup doesn't scroll with the page when I expand the textArea.
Any ideas on the quickest, cleanest way to have both behaviors?
Please use the below style.
.cdk-global-overlay-wrapper {
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
position: absolute;
z-index: 1000;
overflow: auto;
pointer-events: auto;
padding-top: 100px;
margin-bottom: 100px;
}
For some reason, I can't seem to get the mat drawer to occupy the remaining available height on the screen. I've tried:
.drawer-container {
position: fixed;
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
But I still get an overflow for some reason even though there's only one element on screen as indicated by the scroll bar:
And when I remove the CSS rules, I end up with this:
Basically about 10% of the screen height only. I've considered using a fixed height, but I'm guessing it would look cut off if viewed on a larger or smaller monitor. I'd appreciate any help as I'm really not familiar with the full properties of angular material and how to properly manipulate them. Thanks in advance.
in case any dropped by this and had a similar problem.
i fixed this long ago by applying
.drawer-container {
position: absolute;
top:0;
width: 100%;
bottom: 0;
}
just make sure the parent has a position: relative
Percentage based width/height is not yet supported by mat-sidenav i suppose.
try height: 100vh; instead.
that should work, but will add a scrollbar if there is any toolbar in your page.
UPDATE:
HTML:
<mat-drawer-container class="parent" autosize>
<mat-drawer mode="side">
Your sidenav content
</mat-drawer>
<div class="content">
Your main content.
</div>
</mat-drawer-container>
CSS:
.parent {
width: 100%;
height: 100vh; // calc(100vh - 64px) can be used if there is navbar at the top
}
.content {
height: 100%;
}
I am trying to achieve this "stupid" thing, but I can't find a solution.
I have a certain number of images one above the other, I would try to put background-color which is aligned vertically in the middle of the first and last image.
more difficult to explain than to understand, I made an image explanatory so I think it is more easy to understand
I tried to make a codepen, but without success http://codepen.io/mp1985/pen/BoEMPN
.bg {
background: red;
top: 25%;
position: absolute;
width: 100%;
height: 100%;
bottom:0;
left: 0;
right: 0;
z-index: 100;
backgrund-position: center center;
z-index: 1;
}
do you have any advice or suggestion?
You can't set the parent's height according to an absolutely positioned element. So you have to use fixed lengths rather than percentages.
.container {
height: 900px; // img-height * 4
}
Then, for the background color to align to the center of the first image, add this:
.bg {
top: 150px; // img-height / 2
}
As for horizontally centering the imgs, use
.box-images {
left: 50%;
margin-left: -300px; // img-width / 2
}
Well, I'm not sure I've understood but how you started isn't correct: you want your images at the center of the page, right? Well, to do that they must be positionated with
position: relative;
left:50%;
Then, you created a div as a background. There you can choose: you can create a dinamic background with JS, or add only a certain number of images with a certain known height. I guess you are creating a static page, so set the div with
position: relative;
min-height: 900px; //(imgNum-1)*imgHeight
top: 150px; //imgHeight/2
and with what you have already set.
If you have width problems, min-width and max-width are useful attributes.
In my mind it works. Please comment for issues and rate positive if useful
I have a search website that needs to have the search bar and logo centered vertically and horizontally in the index page as its the only items on the page.
What is the best and most effective way to implementing this
here's an easy way to do it, though it won't work in IE6, which doesn't support position:fixed. If you want IE6 support, use position:absolute, but ensure the page content isn't longer than the height of the viewport.
#box {
position: fixed;
left: 0;
top: 0;
width:100%;
height: 100%;
}
#box table {
height: 100%;
}
#box td {
vertical-align: middle;
text-align: center;
}
and the HTML:
<div id="box"><table><tr><td>
YOUR HTML CODE HERE
</td></tr></table></div>
THAT SAID...
You probably shouldn't do this though. You'd be better off simply adding 50-100 pixels of padding at the top if you're simply going for a look that avoids having your content hard up against the top of the page.
for css-only approach check out this fiddle. http://jsfiddle.net/jeffrod/nFthS/
it requires that the width and height of the center box be known. it positions the top left of the box in the middle and then, using margins, shifts it back so that the center of the box is at the center of the page.
<style>
div.center {
position: fixed;
width: 320px;
height: 240px;
top: 50%;
left: 50%;
margin-top: -120px;
margin-left: -160px;
}
</style>
<div class="center"><!-- search bar --></div>
but I don't know if this is the best way
I've been working on a wordpress theme and just now noticed that the width of the page is more than 100%.
I know that posting the code here would be helpful, but I don't know what portion of the code is the culprit. Whether it's a wierd HTML issue or CSS or otherwise.
I've tried removing the javascript links in the header as a hatchet approach but that didn't do anything for me.
I'm stumped.
Please take a look here:
http://naac-hf.org/dev/
Any help would be sincerely appreciated.
Thanks.
It looks like it is your #secondaryNav. I changed the with to 800px and the horizontal scrollbar went away.
I would invest in Firebug. It helps a lot with finding problems like this.
In your CSS Change this:
#secondaryNav {
float: right;
position: absolute;
text-align: center;
background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
width: 100%;
height: 50px;
top: 100px;
}
To this:
#secondaryNav {
float: right;
position: absolute;
text-align: center;
background: url(assets/img/bg_subHeaderBar.png) no-repeat bottom left;
width: 750px;
height: 50px;
top: 100px;
}
The 100% width is causing it to overflow the page currently.