Comments (14)
artlowel
commented on June 8, 2024
1
How about something like this?
from dspace-angular.
atarix83
commented on June 8, 2024
It's possible to fix footer to the bottom with applying a simple CSS styles. Whether to use flexbox is not preferred I think we should avoid the use of it.
Let me know what do you think.
from dspace-angular.
artlowel
commented on June 8, 2024
I don't think we should avoid flexbox any longer.
caniuse.com says display:flex is supported down to IE10 which should be more than enough backwards-compatibility
But if you have a CSS2 solution that works as well the flexbox solution and isn't based on a hack (such as adding 10000px of padding-bottom and -10000px of margin-bottom) that's fine as well.
from dspace-angular.
commented on June 8, 2024
I suggest using display: table
such as
body,
html {
height: 100%;
margin: 0;
padding: 0;
}
app {
display: table;
width: 100%;
height: 100%;
overflow-x: hidden;
}
main {
display: table-row;
table-layout: fixed;
height: 100%;
padding-top: 15px;
}
footer {
display: table-row;
width: 100%;
text-align: center;
}
index.html
<!doctype html>
<html>
<head>
...
</head>
<body>
<app>
Loading Universal ...
</app>
<script async src="/main.bundle.js"></script>
</body>
</html>
app.component.html
<header></header>
<main>
<div class="container-fluid">
<router-outlet></router-outlet>
</div>
</main>
<footer></footer>
This will give us a sticky footer with dynamic height and will have all browser support we need.
from dspace-angular.
commented on June 8, 2024
IE10 is only partial support of flexbox. As it turns out this partial support does not support display flex for sticky footer. Also, Safari has shown some issues with display flex sticky footers. The main content ends up overlapping the footer and not pushing the footer down.
from dspace-angular.
atarix83
commented on June 8, 2024
well, I've applied this solution and It seems to work properly also on microsoft edge emulating IE10
from dspace-angular.
artlowel
commented on June 8, 2024
IIRC we've used a flexbox based sticky footer that worked on IE10 in a project recently. I'll see if I can find the details.
I'd also rather avoid display: table. It affects how other css rules inside of it work.
It no longer becomes possible to use text-overflow without setting an explicit width to a container for example. That's problematic in a responsive UI.
from dspace-angular.
artlowel
commented on June 8, 2024
@atarix83 The problem with that solution is that you need to provide a fixed height for the footer in pixels. But if we can't use flexbox it may still be the best solution.
from dspace-angular.
commented on June 8, 2024
Wrapping the router-outlet in a bootstrap container-fluid restores all the responsiveness and should avoid the affects on other css you described @artlowel
from dspace-angular.
atarix83
commented on June 8, 2024
of course I can use flexbox, I thought that was a simple solution, but I didn't think the problem of having a fixed height
from dspace-angular.
artlowel
commented on June 8, 2024
IIRC we've used a flexbox based sticky footer that worked on IE10 in a project recently. I'll see if I can find the details.
I found the project, and indeed, the footer isn't sticky on IE10. It is on IE11, edge, and other browsers. But it doesn't break anything in IE10 either, it's just a regular footer. So honestly that's fine by me, especially at this stage, and for something that only impacts the look, not the usability.
In my opinion we should use the optimal way of solving a problem in CSS without worrying too much about workarounds for older browsers. If a CSS property is supported by the last two versions of all major browsers (you can verify that on caniuse.com. Note that for Microsoft that means Edge 13 and 14, and not IE) we should be able to use it.
If it turns out something is too much of a problem, we can always add a workaround later.
from dspace-angular.
atarix83
commented on June 8, 2024
I've applied flexbox solution but there is a drawback.
flexbox use to add a CSS class to body and to do this I had to change the app.component's selector to body.
This generate a warning on build, because the selector of a component should be named kebab-case.
Do you know another way to add a class to body without changing selector?
from dspace-angular.
artlowel
commented on June 8, 2024
Renaming the component should never be the solution to a CSS problem.
But are you sure it has to be <body>?
I'd bet that they actually mean "the wrapper around header, main content and footer" and that it'll work with any old DOM element.
from dspace-angular.
atarix83
commented on June 8, 2024
Unfortunately i tried only with a wrapper, but it seems to work only with that class applied on body
from dspace-angular.
Related Issues (20)
- Breadcrumbs collapse in mobile mode
- Facet Links are a different color on desktop vs mobile HOT 3
- Reorder _global-styles.scss HOT 2
- radio buttons don't respect type-bind during submission HOT 2
- Restricted Community/Collection logo not visible by Administrator
- Login box has large Whitespace when only a singular login option is enabled
- Make EPerson "Contact Telephone" field available for Administrators via GUI HOT 4
- Numbered results in search results list view
- [Accessibility] Empty (invisible) buttons appear on `/community-list`
- Sorting and displaying item search results in collection with Person entity type
- [Accessibility] "All of DSpace" menu in header does not expose the presence of the submenu & its state via ARIA attributes HOT 3
- [Accessibility] Browse By Tabs on Community/Collection Homepages are missing ARIA labels. HOT 3
- Login dropdown is blank when only LDAP authentication is enabled HOT 3
- Allow retrieval from languageHashes using environment in order to side-load i18n assets without rebuilding the application HOT 1
- Upgrade the mirador-share-plugin to v0.16.0
- Avoid excess load of bots going into search facet links on entity pages HOT 6
- Consider replacing Klaro cookie consent tool, as it seems unmaintained & less accessible
- Create new version button disabled when no new version in progress HOT 2
- Search configuration should be unset when performing a global search from MyDSpace HOT 2
- Vocabulary `displayed-value`s aren't retrieved using the encoded `stored-value` in submission form
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from dspace-angular.