Absolute icon in flexbox content with fixed navbar - css

Im having a fixed left navbar and using flexbox for 2 columns, navbar and content.
Have to add a toggle button in the middle of navbar and content to toggle the navbar.
Trying to add the button
<button
(click)="clickToggle(clicked)"
....
But its not aligned as it should.
Someone can help ?
Code production below:
https://stackblitz.com/edit/demo-jqnmjn?file=app%2Fapp.component.html,app%2Fapp.component.css

So you want the button to be positioned as presented in the picture above?
One option would be to place the button inside of your aside tag. The aside tag then needs:
position: relative;
Then your button needs to be positioned absolutely:
position: absolute;
right: 0;
Adjust top or bottom values to position the button vertically. To have the button sit right in between you 2 columns you could eather use a negative right value. Or you could you could make use of the transform: translateX() function.

Related

Fixed footer moves right when side-menu slides out

I have a side-menu on the left, which expands from the left to the right on hover and also on a button click. Also, I have a footer which is fixed (on the bottom), my issue is when the side-menu expands, whole page content resizes but since footer is fixed, it moves on the right and goes out of the screen, buttons are not visible anymore. When i remove class which makes footer fixed, footer also resizes without going outside the screen but then it is not fixed.
What is the solution to resize fixed footer when the side-menu expands. I am using Bootstrap 5 in react.js typescript
I tried using bootstrap 5 rows and columns but since it works on a screen size, it does not give me the result
footer css code:
.footer {
position: fixed;
bottom: 0;
width: 92.5%;
background-color: #fff;
}

React native: How can i hidden area outside modal

I have floating button with multiple layers background.
How can i disable area of floating button outside modal ( button use position: absolute )
On the modal container, you can use overflow: hidden to hide any overflowing content.
Like so:
.modal{
/*
other css properties
*/
overflow: hidden;
}
However in doing so, you will also be hiding all other content that overflows. If this is a problem for you, create a container around the object you want hidden, and position it on the bottom right of your modal, with a fixed width. Once you've done that, add the overflow: hidden property to that container's CSS.

Align button to bottom, but keep in flow

Is it possible to align a button to the bottom of it's parent element, but keep it in the flow so that space is made for it?
I know how to align a button to the bottom use position: absolute; bottom:0 but that makes text overwrite it (example).
I would prefer not to have to hard code the height of the button as bottom padding for the parent element.
You can set padding bottom for parent equal to button height, then text won't go over button.
here is fiddle example
http://jsfiddle.net/t0e9hhn9/

How to center a border-width shape properly, relative to its parent input button?

I have a newsletter subscription box which looks like this:
The form takes the whole width of the parent, and so the button fills up all of the available width.
Using the before CSS clause, I'm drawing a small 'arrow' shape on top of the Subscribe button.
The problem is that the arrow is not properly centered, relative to the button. This can be demonstrated by reducing the viewport width. For example, here the problem can be seen:
The arrow is not properly centered horizontally, relative to the button.
How can I solve this alignment issue ?
JSFiddle: http://jsfiddle.net/ahmadka/7965p/
CodePen (JSFiddle is down sometimes): http://codepen.io/anon/pen/qFvbc
To center something that is positioned absolute, and of which you know the exact width, I always do the following:
left: 50%;
margin-left: -[halve the width of the element]px;
So your problem should be solved by adding magin-left: -12px; to your .form-wrapper button:before selector.

Div in lower left corner of wrapper div

I have a page with a wrapper div which contains a background image and all the content divs.
In this wrapper div I also have a logo div which should be placed at the bottom left corner of the wrapper without interfering with the contents.
I have managed to place the logo in the bottom left corner of the whole page (position: absolute; bottom: 0; left: 0;) The problem is that if you resize the width of the window, the background stays centered while the logo div goes left and sticks to the browser edge (as it should).
How would I go about making it stay to the edge of the wrapper div?
The reason it is not a part of the background is that the client wanted to be able to change the background without editing in the logo.
I have thought about not centering the wrapper, this would solve the problem.
I'm thinking about position: relative, but it doesn't seem to work.
I hope I'm clear enough, here is a link to the layout in case it helps.
http://development.pulsemedia.se/current/kingromeo/layout/
Make your wrapper div's position to be relative.
At the moment, your bandname div is not inside the wrapper. Put it in the #wrapper div, and set the wrapper to a position: relative;
I found my mistake. I had forgot to make the background-div fixed width so when the browser windows expanded, the background-div expanded too. Everything was behaving exactly as it should.
Put the logo div inside the wrapper div, and then set use some combination of these:
position: relative;
bottom: 0px;
float: bottom;
I'm not sure about the float: bottom, but I think you'll need it to prevent interference with the rest of your content.

Resources