I try to let a menu bar within a header stay sticky. The header is a flexbox with vertical align (flex-direction: column). But as you may guess, it does not work.
simplified arrangement
here
HTML
<header>
<div id="quality-logos">
[some images here]
</div>
<div id="logo_motte_top">
[a big logo here]
</div>
<div id="navigation-wrapper">
<div id="navigation">
[some navigation code here]
</div>
<div id="menu_promo_text">
<div>Mo – Sa: 09 – 18 Uhr, So nach Vereinbarung</div>
</div>
</div>
</header>
CSS (shortened)
header{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
}
div#navigation-wrapper{
position:sticky;
top:0;
}
You can see it live at motteduesseldorf.de
For your website's link, your <header> is a child of another div called #wrapper. position: sticky is probably being applied but it is not visible because the entire <header> div is not in view. Put another way, position: sticky works only "until" its immediate parent.
One way to fix your issue would be to move <div id="navigation-wrapper"> outside of <header> and make it an immediate child of the <div id="wrapper">.
Related
I am trying to learn CSS, and find myself stuck. I am hoping you can help.
I have created a section and I want this to be a flex container. I have nested divs in the section for each item I want to display in the container. I have added a class to both the section and the parent div, but I cannot get the display: flex property to apply to the div. When I inspect in Chrome as I have it now it reflects display: block. If I try to select the div.class it will not style. Thanks!
HTML:
<section class="headline">
<div class="Details">
<div>
<h4>headline 1</h4>
<p>some content included.</p>
</div>
<div>
<h4>headline 2</h4>
<p>some more content.</p>
</div>
<div>
<h4>headline 3</h4>
<p>more content</p>
</div>
<div>
<h4>headline 4</h4>
<p>end content</p>
</div>
</div>
</section>
.headline {
color: white;
background-color: black;
display: flex;
}
.details {
display: flex;
}
I figured it out - the class .Details was in the html with a capital d and in the stylesheet with a lower case d. :)
I can't get stuff to left and and right align on card headers via CSS. In my card header I want the the md-icon delete_forever to the right. I tried flex but did not work.
<div class="flex-container">
<div *ngFor="let item of items | async" class="flex-items-default">
<md-card (click)="test()" style="width:300px;height:250px">
<md-card-header>
<md-card-title>
<span>{{ item.name }}</span>
<span class="flex2"></span>
<span>
<button md-icon-button (click)="onDelete()">
<md-icon>delete_forever</md-icon>
</button>
</span>
</md-card-title>
<md-card-subtitle></md-card-subtitle>
</md-card-header>
<md-card-content>
{{ item.description }}
</md-card-content>
</md-card>
</div>
</div>
.flex-container {
display:flex;
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
justify-content: space-between;
align-content: flex-start;
align-items: flex-start;
}
.flex2 {
flex: 1 1 auto;
}
Using Flex can be a solution, but you need to understand how to use flex properties. According to this website (and to some empirical personal experience), attritutes align-items and self-align modify disposition on cross-axis which is, in your case, column as long as you defined flex-direction: row.
TL;DR : Change flex-direction: row to flex-direction: column and then css self-align / align-items will allow you to align on horizontal axis. In your case, self-align: flex-end on your button wrapper should do the job.
I have two flexboxes which shrink on height change and nested content gets overlapped.
How to prevent this?
just add flex-shrink:0 to your element and the flexbox will stop shrinking.
<div class="flx">
Some Content
</div>
<div class="flx">
Some Content
</div>
<style>
.flx{
display: flex;
flex-shrink: 0;
}
</style>
I have a problem with div positioning in my form. My page contains a sheet. With div layout as below.
In divs on the left side, there are description of the fields. (they share the same style class)
In divs on the right side, there are the fields. (they share the same style class)
After validation my page look like this:
But I want it to look like this:
Honestly, I thought how do deal with it, for quite a white, and I simlpy have no idea what to do it. My page is almost ready so I'd like to fix that with possible at low cost.
[edit1]:
My current css look simple, something like this:
div_on_left{
clear: both;
float: left;
width: 440px;
padding-top: 5px;
padding-bottom: 8px;
}
div_on_right{
float: left;
width: 500px;
padding-top: 3px;
padding-bottom: 6px;
}
[edit2]:
I have just found one solution (posted below), but I don't like it. It will crash if context of divs on the left is too big. That's due to
position:absolute;
So I'd like to avoid this property.
<html>
<head>
<style type="text/css">
.row
{
position:relative;
}
.left
{
font-size:100%;
position:absolute;
left:0px;
bottom:0px;
}
.right
{
font-size:200%;
position:relative;
left:150px;
bottom:0px;
}
</style>
</head>
<body>
<div class="row">
<div class="left">Left_1</div>
<div class="right">Right_1</div>
</div>
<div class="row">
<div class="left">Left_2</div>
<div class="right">Right_2</div>
</div>
<div class="row">
<div class="left">Left_3</div>
<div class="right">Right_3</div>
</div>
</html>
It have to be a common problem. How do you deal width forms with validation that apear over the field boxes?
There's a solution for your problem but it involves a table-cell layout. The layout must have a row and two inner cells aligned to the bottom.
Here is a JSFiddle Example: http://jsfiddle.net/cvbLC/
I'm not aware of which browser support you are needing, but here is more information about this matter: http://www.quirksmode.org/css/display.html
I'm trying to create a small html fragment (a div element) consisted of three parts: a label, textbox, and a button.
Within that div element the label would be on the left (autosized), the button would be on the right (again, autosized) and the textbox should take up all remaining space within the parent div element.
This is what I've tried (assuming I want my div to be 400 pixels wide):
<div style="width:400px">
<div style="float: left">Label</div>
<input style="width:100%"> <!-- doesn't work -->
<button type='button' style='float: right'>Click</button>
</div>
The trouble is, my textbox does not get resized automatically. Add 'width=100%' to the textbox doesn't work.
What would be the way to make it take up all remaining space between the label and the button? Ideally it should be done just by applying some styles, not by introducing new elements.
(I guess the issue isn't related only to div element, but that just happens to be my work scenario.)
Perhaps something like this will be what you want. Yeah I know it's cheating. And yeah, I agree with #Paul re: label, so i swiped his id. :)
EDIT: Obligatory Self-Referencing Demo
Warning: not tested in all browsers.
CSS:
div {
display: table;
width: 400px;
white-space: nowrap;
}
label {
display: table-cell;
padding-right: 3px;
width: 1em;
}
input {
display: table-cell;
width: 100%;
}
span {
display: table-cell;
padding-left: 6px;
width: 1em;
}
HTML:
<div>
<label for="my-very-special-input">Label</label>
<input id="my-very-special-input"/>
<span><button type="button">Click</button></span>
</div>
The only way I could think of making this work was with percents. I enclosed everything in seperate divs (probably uneccesary) and then assigned percentages to each div. Take a look:
<div style="width=400px">
<div style="float:left; width:10%">Label</div>
<div style="float: left; width:70%"><input style="width:100%"></div> <!-- doesn't work -->
<div style="float: right width:20%"><button type='button' style=''>Click</button></div>
It's by no means a perfect solution, but hopefully it will suit your needs to some extent.
Elliott
Does it help if you wrap the <input> in a <div> with overflow: hidden?
<div style="width: 400px;">
<div style="float: left;">Label</div>
<div style="overflow: hidden;">
<input style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>
See xHTML/CSS: How to make inner div get 100% width minus another div width.
And although it’s off-topic, please note that your label should be, well, a <label>.
<div style="width: 400px;">
<label for="my-very-special-input" style="float: left;">Label</label>
<div style="overflow: hidden;">
<input id="my-very-special-input" style="width: 100%;">
</div>
<button type="button" style="float: right;">Click</button>
</div>