Trouble creating webpage layout with css - javascript

I am creating an angular app and i have created a layout but i am having some trouble with its functionality.
currently the header stays fixed in position as does the activator but the menu appearing on rollover does not and when scrolling the content in the body appears over the top of the header. i am not fantastic at css but know some. any help fixing this would be greatly appreciated :)
again any help at all would be fantastic.

If you add the z-index property to the header class it puts the header over the activator.
.ts-header {
height: 74px;
width: 100%;
background-color: #fff;
border-bottom: 1px solid #000;
position: fixed;
z-index: 999; /* NEW */
}
https://jsfiddle.net/kyu0x9ym/1/

Related

Can't change content and sidebar width

I am trying to change content and sidebar width of my site http://www.howto-connect.com/. Unfortunately, I can't get a positive result. You can laugh at this simple question. But after making changes in CSS is not giving output. Thanks in advance for a help.
Have you tried to delete cache?
If you have a cache plugin on your site, try to delete cache and you can reload your browser without cache as well.
I had a look and it is #sidebar-container { width: 38%; position: relative; }
Answering "I want more space between sidebar and content and decrease the sidebar width"
Your #content is 70%, and #sidebar-container is 30%. Change these to how wide you need the sidebar, then add this css to your #content:
padding-right: 40px;
box-sizing: border-box;
Changing the 40px to how much "more space between sidebar and content" you need.
You can paste this css in your stylesheet
#content {
width: 69%;
}
#sidebar-container {
margin-left: 22px;
width: 28%;
}
If still does not work for you then use ! important like that.
#sidebar-container {
margin-left: 22px !important;
width: 28% !important;
}
It will prioritise your css.

Ui-grid: Opening a modal in filterHeaderTemplate

I would like to have a filter that would be a very basic kind of a modal window opened on a click event.
However, I am unable to display that window on top of a grid, when it is located in filterHeaderTemplate.
I created a very simple Plunker to reproduce that issue - the div is created correctly but it's hidden below the ui-grid and it happens for any z-index.
http://plnkr.co/edit/15oUIui2kWfPgE5CQXwk?p=preview
The templates is as simple as that:
<button ng-click="showModal = !showModal">Open \'Modal\'</button>
<div class="myModalClass" ng-if="showModal">My \'Modal\' Content</div>
and styles for the modal:
width: 200px;
height: 200px;
background-color: white;
border: 3px solid black;
position: absolute;
z-index: 999999999;
Any ideas would be really appreciated!
Solved :)
The problem was connected with top-panel and header-viewport overflow that is set to hidden by default.
The possible solution is to set it to visible:
.ui-grid-top-panel,
.ui-grid-header-viewport {
overflow: visible !important;
}

Scroll an element only within some bounds [duplicate]

This question already has answers here:
Stopping fixed position scrolling at a certain point?
(13 answers)
Closed 7 years ago.
I am building the following layout which can be viewed here:
http://www.freemicsnyc.com/Other%20Versions%20&%20Backup/FreemicsNJ/new_template.html
You will notice the one div with the days of the week (mon, tues, wed, ..) does not scroll with the rest of the page since it is styled with the following css:
.column_headings{
...not important stuff
position: absolute;
margin: 416px auto 0 auto;
left:0;
right:0;
}
This behavior is not what Im looking for.
What I would like, is for that div to scroll along with the rest of the page like normal until it gets to the very top of the viewport, at which point it would stay there like a sticky header as the remainder of the content scrolls beneath it.
Would I need parallax scrolling for this? JQuery? Is there a way to do it with just CSS?
Any help would be much appreciated!
You can use a jQuery plugin such as: http://stickyjs.com/ for now as the full css implementation of this, position: sticky has very low browser support as of the moment.
Replace your CSS code with below and see if it helps:
CSS
width: 970px;
height: 60px;
background: lime;
text-align: center;
white-space: nowrap;
position: relative;
margin: 0 auto 0 auto;
left: 0;
right: 0;
border-top: 1px solid black;
border-bottom: 1px solid black;
display: block;

How to make a fixed div/nav resize with the div it's inside of?

I'm pretty fresh to web development and cannot figure this one out. Appreciate any help!
On re-size the fixed div moves out of the container instead of re-sizing. The site I'm working on has the nav as the fixed section and is inside of the main container.
Any help is appreciated. Thanks!
<div class="container">
<div class="fixed"></div>
</div>
.container {
border: 1px solid;
max-width: 600px;
width: 100%;
min-height: 1600px;
}
.fixed {
max-width: 600px;
width: 100%;
height: 50px;
border: 1px solid green;
position: fixed;
}
http://jsfiddle.net/KqvQr/
When you specify position as fixed the Element, even thought it is inside a parent container, It won't behave as a child of a parent container. It won't adjust his width according to the parent width. But I can give you a solution where when user resize the page the fixed element also get resize yet it is a position fixed
.fixed {
height: 50px;
border: 1px solid green;
position: fixed;
right:0;
left:0;
}
Don't specify widths for the container. instead of that specify left and right values. so then when page is resizing css only check for the left and right margin values. by keeping those values it will adjust its inner width always.
Here is the working fiddle http://jsfiddle.net/KqvQr/5/
I don't think you can achieve what you want if you stick with that constraints. Your width and max-width will work as expected if you change your position to relative instead of fixed..
Check out this Fiddle

Fixed positioned elements disappears

I just ran across an issue with a element (the header), fixed positioned to the top of the page, disappearing. This was found in a mobile site I was creating.
What was causing this was a click to a menu button, which would open the sidebar navigation. When I clicked this button, the sidebar would open as expected, but then the header would disappear. What would be left of it was the remnants of an image replacement technique I was using the Phark Method; the text "menu" was left behind. (I'm fairly sure that this is not important to the issue at hand, but I could be wrong.)
The header element had styling like so:
header{
position: fixed;
top: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
This would only happen in Android 4.0 stock browsers (Galaxy Tabs/Galaxy Nexus were some I tested).
What would cause this to happen in just Android 4.0 browsers?
What seemed to be the issue was the fact that the header element did not have a left property value. To fix this, I just added a left:0; property to the header element, giving me the following CSS:
header{
position: fixed;
top: 0;
left: 0;
z-index: 10000;
width: 100%;
background: url('../images/header-bg.png') #111 repeat-x top left;
border-bottom: 1px solid #090909;
text-align: center;
}
After figuring this out, I recall having a similar issue on a desktop site that used fixed positioning. The fact that I didn't have a left property set caused the fixed element to not even appear when the page loaded.
Hope this fixes/sparks ideas to a fix for users in the future! I know I'll be setting both a x and y axis position property to all my fixed elements from now on ;)

Categories

Resources