Right now I am trying to make my modal responsive but the "SAVE" button is not positioning as i want it to.
I want to have the button at the same position all the time, but right now it is disappearing.
My HTML and css looks as the following
.delete{
font-size: 16px;
max-width: 100%;
max-height: 60vh;
display: flex;
flex-direction: column;
overflow: hidden;
}
.delete .text-div{
padding: 3px;
}
.delete .button-div{
display: inline-block;
position: relative;
padding: 3px;
/* right: 50%;*/
left: 80%;
}
<div class="delete">
<div class="dialog-content-wrapper">
<mat-toolbar matDialogTitle class="mat-accent m-0">
<mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between center">
<span class="title dialog-title">Delete Entry</span>
<button mat-icon-button (click)="onClose()" aria-label="Close dialog">
<mat-icon>close</mat-icon>
</button>
</mat-toolbar-row>
</mat-toolbar>
</div>
<div class="text-div">
<span>Are you sure you want to delete this vacation entry?</span>
</div>
<div class="button-div">
<button mat-raised-button color="accent" class="button" (click)="buttonClick();onClose()">SAVE</button>
</div>
</div>
First off, you don't need to wrap single elements into divs, it's not a very good practice regarding accessibility.
Regarding your question, where exactly do you want your button to be? If its position is set to relative, it will be positioned relative to the nearest positioned ancestor. That means that you need to put a position property to the .delete div (usually, relative will suffice).
Another way to achieve what you want (if I understand it correctly) would be adding align-self: end to the button element, since it's wrapped inside a flex container.
Related
Say I wanted an element to be positioned vertically absolutely, but horizontally relative. Is this possible with css/html/javascript?
Not sure which case could be fine to use this mix, but it is possible,
if you only define top/bottom properties in a position:absolute element.
The left/right position of the element will be "relative" if you leave it untouched.
In the following example, the second container has a mixed positioning.
.example{
margin: 30px;
position: relative;
border: 1px solid red;
}
.item1, .item2{
display: inline-block;
margin: 0;
}
#example2 .item2{
position: absolute;
top: 80px;
}
<div id="example1" class="example">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
</div>
<div id="example2" class="example">
<div class="item1">Item1</div>
<div class="item2">Item2</div>
</div>
I'm learning web design and I'm struggling to position a button. I'm a beginner and trying to recreate league of legends client which is pretty simple in browser just for exercise, but I don't know how to use javascript and I can not find the solution online.
So this is how I want it to look: https://prnt.sc/pos3gf
I've tried to add logo and button in list and then display: inline but that doesn't really work or I just don't know to make it work.
This is my code
https://codepen.io/simic21/pen/poowQXK
I removed all of the CSS before /*====== REGION ======*//* Dropdown Button */ and replaced it with this:
.logo {
display: inline-block;
}
.region {
display: inline-block;
}
That will display the logo and region divs side by side. Now the only thing left is to add the rest of your desired styling such as padding or margin.
Add to your .region class display:inline-block and the same to your .logo class:
.region {
padding: 20px;
display:inline-block;
}
.logo {
padding: 40px 0px 0px 50px;
display:inline-block;
}
<div class="centered">
<div class="logo">
<img src="assets/img/logo.png" alt="logo">
</div>
<div class="region">
<button onclick="myFunction()" class="dropbtn">
<strong>EUNE(EN)</strong></button>
</div>
</div>
I have 3 questions about my jQuery study today.
Why my jQuery code not have the animation effect as it should be? for example, .slideUp() and .slideDown(), my code shows something strange instead of slideUp animation.
I understand, the .hide() or .slideUp() function is only to HIDE the div box, not DELETE them, however, in my code, why the position of other div boxes changed after a DIV .hide()? Shouldn't it stay at their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position, when one DIV box has been hided?
$(document).ready(function() {
$('#panel1').slideUp(1000).delay(1500).slideDown(1000);
});
.panel {
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid green;
position: relative;
top: 20px;
margin-left: 45px;
border-radius: 5px;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
For your first question
Why my jQuery code not have the animation effect as it should be? for
example, .slideUp() and .slideDown(), my code shows something strange
instead of slideUp animation.
The .slideUp() method animates the height of the matched elements. Means it animates height so it reaches 0 (or, if set, to whatever the CSS min-height property is). See here for reference. That is exactly what is happening to your first box it is decreasing in height.
Afterwards the display style property is set to none to ensure that the element no longer affects the layout of the page.
What display none does ?
display:none means that the tag in question will not appear on the
page at all
Now for second and third question
I understand, the .hide() or .slideUp() function is only to HIDE the
div box, not DELETE them, however, in my code, why the position of
other div boxes changed after a DIV .hide()? Shouldn't it stay at
their original position as the DIV box is still there, just HIDED?
How can I achieve to let other DIVs stay at the original position,
when one DIV box has been hided?
The .hide() and .slideUp()function they both add display:none to your tag element. Means they are gone now
Now what can you do to let them stay there, But hidden from view ?
You can use visibility or opacity property instead rather than using display
property.
For example: visibility: hidden; will just hide it from the view.
Will update your fiddle in order to demonstrate it in a while. Hope this will help you. Please feel free to ask if not clear. Thank you.
$(document).ready(function() {
setInterval(function(){
$('#panel1').slideUp(1000).delay(500).slideDown(1000);
}, 3000);
});
.outer-div
{
position: relative;
display: inline-block;
min-height: 1px;
margin-right: 15px;
margin-left: 15px;
width: 130px;
height: 90px;
}
.panel {
border: 1px solid green;
margin-left: 45px;
border-radius: 5px;
position:absolute;
top:0;
width: 100%;
}
.panelTop {
height: 30px;
background-color: blue;
color: white;
text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="panels">
<div class="outer-div">
<div id="panel1" class="panel">
<div class="panelTop">#panel1</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel2" class="panel">
<div class="panelTop">#panel2</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel3" class="panel">
<div class="panelTop">#panel3</div>
<div class="panelBottom">content</div>
</div>
</div>
<div class="outer-div">
<div id="panel4" class="panel">
<div class="panelTop">#panel4</div>
<div class="panelBottom">content</div>
</div>
</div>
</div>
You should use display:flex on .panels, that solves your first question.
For second question you should use visibility or opacity.
With current code you are removing it, although it is called hide() it is equivalent to CSS display:none; which doesn't keep space of element.
Although you actually don't need to set visibility in your case because sliding it up will hide element and down show.
Something like this:
$('#panel1').animate({
top: -62 // 60 is height of element plus 2px of borders
}, 1000).delay(1500).animate({
top: 0
}, 1000);
Also you have to change CSS a bit.
Add this to your CSS:
.panels {
display: flex;
overflow: hidden;
margin-top: 20px;
}
And from .panel remove top: 20px;
Full example is here https://jsfiddle.net/_jakob/cphptby3/1/
I'm trying to have a bootstrap 3 input field have a little close icon appended on the top right of the input.
Here's my attempt: https://jsfiddle.net/8konLjur/
There's 2 problems with this though:
The × symbol isn't correctly placed in the circle.
I'm trying to move the <a></a> circle so it's halfway on the input border underneath and above (does that make sense?). This might have to be done with absolute positioning or javascript, I don't know.
A quick and dirty way would be to wrap the input in a div and set its position to relative and set the icon absolute relative to that:
DEMO
<div style="position: relative"> <!-- absolute relative to parent --> </div>
BUT, when working with bootstrap try to look at the patterns rather than hacking your way through.
You can just use the btn class for style and position it with additional class.
<button type="button" class="btn btn-default btn-sm">
×
</button>
or
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</button>
See the example here below the icon section: http://getbootstrap.com/components/#glyphicons
In your btn-close make the following:
.btn-close {
position: relative;
top:10px;
padding: 0;
display: block;
background: teal;
border-radius: 100%;
width: 12px;
height: 12px;
float: right;
color: #FFF;
font-size: 12px;
font-weight: bold;
}
And it is better to enclose the input field and the close button in a div. Checkout this DEMO.
I created a notecard image where i overlayed multiple images on top of it. These are elements of the notecard. I want it so that when I hover over the notecard, I can completely change the contents on the notecard image (overlaying new things onto the notecard).
So right now, I have this right now:
<div style="position:relative;">
<a href="#games">
<img id "image_a" a" src="images/card_normal.png" onmouseover "this.src rc 'images/hover/card_hover.png';" ;" onmouseout "this.src rc 'images/card_normal.png';" ;" style="position: absolute; top: 0; left: 0;"/>
<img id "image_b" b" src="images/category_icons/icon_games.png" style="position: absolute; top: 10px; left: 40px;"/>
<img id "image_c" c" src="images/category_titles/title_games.png" style="position: absolute; top: 160px; left: 40px;"/>
</a>
</div>
Where the notecard changes into a "hovered" version, but I am unable to change anything else. I want it so that whenever the mouse pointer is in the notecard (including if its on other elements inside the notecard), the contents change. I want to completely scrap the contents of it (so the title and icon) and change it so I can add text and overlay new images.
How can I do this in JS/HTML/etc?
If the two versions (hover/non-hover) are significantly different (and you want a no-js solution), you could have two divs, one set to hide, one set to show. Then on-hover, you change their visibility. Fiddle.
<div class="card">
<div class="no-hover">
stuff you want to show when the user is just looking
</div>
<div class="on-hover">
stuff you want to show when the user hovers
</div>
</div>
CSS:
.no-hover {
display: block;
}
.on-hover {
display: none;
}
.card:hover > .on-hover {
display: block;
}
.card:hover > .no-hover {
display: none;
}
It's extra HTML elements, but might be easier to maintain.
Based on your comment to Learner's answer, here is an example of the idea you are describing:
HTML:
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
CSS:
.outer {
width: 304px;
height: 304px;
background-color: black;
}
.inner {
float: left;
width: 150px;
height: 150px;
background-color: red;
border: 1px solid black;
display: none;
}
.outer:hover .inner {
display: block;
}
DEMO
If you are trying to achieve something like this:
http://spoonfedproject.com/wp-content/uploads/demo/jquery-slide-hover/index.htm
Here's your solution:
http://www.robertkuzma.com/2011/01/jquery-animated-swap-div-content-on-hover-effect/