How would I go about doing that;
this is my current wip:
https://jsfiddle.net/Lg0wyt9u/967/
<li>
<div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
<div class='details'>
<div class='date'>date</div>
<div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
<div class='value'>1.2</div>
<div class='slide-in'>
DELETE
</div>
</li>
The delete button is hidden for the moment.
What should happen is, it gets revealed, and the other content is pushed "off-canvas" to the same width as this element. However, I'm unsure of how to proceed. I use display:flex and tried some positioning but it didn't work.
Here you go:-
$(document).ready(function(){
$('.list ul li .rw').click(function(){
console.log(this);
$(this).css("right","65px");
$('.slide-in').css("display","block");
})
})
ul {
list-style-type: none;
margin: 0;
padding: 0;
border: 1px solid black;
}
.rw{
padding-top: 20px;
width:100%;
cursor:pointer;
position:absolute;
padding-bottom: 20px;
border-bottom: 1px solid #a1d1b8;
display: flex;
justify-content: space-between;
align-items: center;
}
.type {
padding-right: 15px;
flex: 0 0 50px;
background: green;
}
.type i {
font-size: 40px;
}
.details {
flex: 1;
overflow: hidden;
font-family: "Courier New";
}
.address {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.value {
padding-left: 15px;
font-size: 55px;
}
.date {
font-weight: bold;
margin-bottom: 5px;
}
.slide-in {
width:65px;
background: red;
color: #fff;
display:none;
}
<div id="container">
<div class="list">
<ul>
<li>
<div class="rw">
<div class='type'><i class='fa fa-arrow-circle-right'>I</i></div>
<div class='details'>
<div class='date'>date</div>
<div class='address'>1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
<div class='value'>1.2</div>
<div class='slide-in'>
DELETE
</div>
</div>
</li>
</ul>
</div>
</div>
You have include jQuery for this solution...
Related
I am currently working on a Forum website, and can't figure out how to place elements that won't be influenced by other elements' content.
For example, if I change the element content text, the other elements that are next to it will change position.
Example:
HTML and CSS from the first image:
.staff-show {
float: right;
margin-right: 10em;
margin-top: 10em;
}
.staff-show .title-staff {
font-family: Poppins-SemiBold, FontAwesome;
display: flex;
align-items: center;
justify-content: center;
}
.staff-show .title-staff i {
margin-right: 1em;
}
.staff-show .title-staff h2 {
right: 5%;
}
.staff-show .staff-list h3,
p {
margin: 0.1em;
padding: 0.1em;
}
.staff-show .staff-list .icon-border {
border: 2px solid #212e38;
border-radius: 10px;
width: 4em;
height: 4em;
display: inline-block;
}
.staff-show .staff-list i {
padding: 1.3em 0.9em;
text-align: center;
}
.staff-show .staff-list ul li {
margin: 1.2em;
}
.staff-show .staff-list .staff-info {
float: right;
margin-left: 1.5em;
}
<div class="staff-show">
<div class="staff-list">
<ul>
<li>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>Johnny Games</h3>
<p>System Admin</p>
</div>
</li>
<li>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>John Lenon</h3>
<p>Service Founder</p>
</div>
</li>
</ul>
</div>
</div>
Second image HTML and CSS:
.forum-list button {
border: 2px solid #212e38;
border-radius: 20px;
padding: 10px 40px;
width: 77em;
height: 8.5em;
font-family: Poppins-SemiBold, FontAwesome;
color: white;
margin-right: 1em;
margin-bottom: 1.5em;
display: grid;
}
.forum-list-border {
border: 2px solid #172129;
border-radius: 20px;
width: 5.7em;
height: 5.7em;
margin-top: 0.3em;
}
.forum-list i {
margin-top: 1.5em;
width: 100%;
}
.forum-list-header {
display: flex;
align-items: center;
}
.forum-list h2 {
margin-left: 2em;
}
.forum-list .forum-list.btn {
margin-bottom: 2em;
}
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
}
.forum-list-info-numbers {
display: flex;
align-items: center;
}
.forum-list-info-text {
display: flex;
align-items: center;
}
.forum-list-info-numbers h3 {
margin-right: 6.3em;
}
.forum-list-info-text p {
margin-right: 5em;
}
<div class="forum-container">
<div class="forum-list-container">
<div class="forum-list">
<button class="forum-list-btn">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers"><h3>5.1k</h3><h3>50.3k</h3></div>
<div class="forum-list-info-text"><p>Posts</p><p>Messages</p></div>
</div>
</button>
</div>
</div>
</div>
Sorry for this long code, I just want to make this as explicit as possible, so it's easier to solve.
You can use the display: flex property to achieve both results. I have added another wrapper div for the first image and added a new class on button for the second one.
.staff-show {
float: right;
margin-right: 10em;
margin-top: 10em;
}
.staff-show .title-staff {
font-family: Poppins-SemiBold, FontAwesome;
display: flex;
align-items: center;
justify-content: center;
}
.staff-show .title-staff i {
margin-right: 1em;
}
.staff-show .title-staff h2 {
right: 5%;
}
.staff-show .staff-list h3,
p {
margin: 0.1em;
padding: 0.1em;
}
.staff-show .staff-list .icon-border {
border: 2px solid #212e38;
border-radius: 10px;
width: 4em;
height: 4em;
display: inline-block;
}
.staff-show .staff-list i {
padding: 1.3em 0.9em;
text-align: center;
}
.staff-show .staff-list ul li {
margin: 1.2em;
}
.staff-show .staff-list .staff-info {
float: right;
margin-left: 1.5em;
}
.another-div {
display: flex;
}
<div class="staff-show">
<div class="staff-list">
<ul>
<li>
<div class='another-div'>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>Johnny Games</h3>
<p>System Admin</p>
</div>
</div>
</li>
<li>
<div class='another-div'>
<div class="icon-border"><i class="fa-solid fa-user fa-xl"></i></div>
<div class="staff-info">
<h3>John Lenon</h3>
<p>Service Founder</p>
</div>
</div>
</li>
</ul>
</div>
</div>
.forum-list button {
border: 2px solid #212e38;
border-radius: 20px;
padding: 10px 40px;
width: 77em;
height: 8.5em;
font-family: Poppins-SemiBold, FontAwesome;
color: white;
margin-right: 1em;
margin-bottom: 1.5em;
display: grid;
}
.forum-list-border {
border: 2px solid #172129;
border-radius: 20px;
width: 5.7em;
height: 5.7em;
margin-top: 0.3em;
}
.forum-list i {
margin-top: 1.5em;
width: 100%;
}
.forum-list-header {
display: flex;
align-items: center;
}
.forum-list h2 {
margin-left: 2em;
}
.forum-list .forum-list.btn {
margin-bottom: 2em;
}
.forum-list-info {
grid-column-start: 2;
grid-column-end: 3;
}
.forum-list-info-numbers {
display: flex;
align-items: center;
}
.forum-list-info-text {
display: flex;
align-items: center;
}
.forum-list-info-numbers h3 {
margin-right: 6.3em;
}
.forum-list-info-text p {
margin-right: 5em;
}
.d-flex-between {
display: flex !important;
justify-content: space-between;
}
<div class="forum-container">
<div class="forum-list-container">
<div class="forum-list">
<button class="forum-list-btn d-flex-between">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Tech, Informatique et autres</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers">
<h3>5.1k</h3>
<h3>50.3k</h3>
</div>
<div class="forum-list-info-text">
<p>Posts</p>
<p>Messages</p>
</div>
</div>
</button>
<button class="forum-list-btn d-flex-between">
<div class="forum-list-header">
<div class="forum-list-border"><i class="fa-solid fa-laptop-code fa-2xl"></i></div>
<h2>Account Boost</h2>
</div>
<div class="forum-list-info">
<div class="forum-list-info-numbers">
<h3>5.1k</h3>
<h3>50.3k</h3>
</div>
<div class="forum-list-info-text">
<p>Posts</p>
<p>Messages</p>
</div>
</div>
</button>
</div>
</div>
</div>
Your first example does this because the .staff-show .staff-list .staff-info rule is set to float: right. So, when the content in div.staff-info gets smaller, the right side of the div will remain flush with the right side of its container.
Assuming you won't have enough content to force it to wrap, you could simply do the following to keep it left-aligned with the bordered box:
.staff-show .staff-list .staff-info {
display: inline-block;
vertical-align: top;
margin-left: 1.5em;
}
However, I would suggest using a grid layout or a similar technique so that it's less likely to break if your content size or container size changes.
In your second example, just add justify-content: space-between to the .forum-list button rule.
You need to differentiate the class names for example in the first image you have both classes named as staff-info, meaning if you style the staff-info class both divs will change simultaneously.
I have been trying to position two buttons side by side in sidenav at the bottom but they always end up getting after the list ends. I want add and delete button (button bar component) at the bottom in the sidenav right aligned all the time.
Below is my code:
drawer.component.html
<aside class="panel">
<div class="panel-header">
<h2 class="panel-title">Title</h2>
</div>
<div class="panel-body">
<div class="form-group search-wrapper">
<form
[formGroup]="form"
>
<input class="form-control"
[placeholder]=Placeholder>
</form>
</div>
<ul class="list-group">
<li *ngFor="let l of list | async as ts"
class="list-group-item"
>
<span>{{ l.name }}</span>
</li>
</ul>
</div>
<div class="panel-footer">
<buttons-bar></buttons-bar> ---> Newly added component injected here
</div>
</aside>
drawer.component.css
.panel {
box-shadow: 0 0 2px inset $border-primary;
height: 100%;
.panel-title {
color: $color-base-text;
font-size: $font-size-normal;
font-weight: bold;
}
.panel-header{
display: flex;
align-items: center;
padding: $panel-padding-basic;
box-shadow: 0 0 2px inset $border-primary;
}
.panel-header {
background-color: $color-base-bg;
height: 44px;
}
&.panel-block {
.panel-header {
background-color: $color-base-bg-inv;
}
.panel-title {
color: $color-base-text-inv;
}
}
}
.list-group-item {
cursor: pointer;
span {
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.search-wrapper {
margin: 0;
input {
outline: 0;
border-radius: 0;
}
}
.button-icon {
margin-left: auto;
}
buttons.component.html
<div class="manipulation-bar">
<div>
<span [tooltip]="tooltip" class="icon button-icon-delete"> delete_forever</span>
</div>
<div>
<span (click)="openDialog()" [tooltip]="tooltip"
class="icon button-icon add"> add </span>
</div>
</div>
buttons.component.css
.manipulation-bar {
display: flex;
justify-content: end ;
align-items: end;
button {
margin: 0 .2vw 0 .2vw;
}
}
.icon {
font-family: 'Material Icons';
font-size: 30px;
}
.button-icon-delete {
color: red;
cursor: pointer;
&:hover {
color: darkred;
}
}
Kindly somebody help me to understand what I am doing wrong.
in your panel div add display: flex; flex-direction: column, and in the panel footer add margin-top: auto; I think it will help you.
I have a mega menu which is vertically above a div that contains image banners. When hovering over this mega menu it expands displaying content. When expanding the content goes under the images in the image banner div making them not visible. I want it to be on top of the image banner div when I hover over mega menu links.
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0; margin: 0;
}
body {
}
.wrapperss {
font-size: 1.6em;
padding: 2em;
margin: 0 auto;
width: 95%;
background-color: white;
z-index: 999;
}
/* Navigation Bar Styling */
.navSuper {
background: white;
width: 100%;
height: 43px;
position: relative;
border: 1px solid #B2BEB5;
}
.navSuper li {
list-style: none;
float: left;
text-align: center;
width: 33%;
width: calc(100% / 3);
}
.navSuper > li > a {
color: #536267;
font-weight: bold;
font-size: .7em;
text-decoration: none;
line-height: 43px;
padding: 0 20px;
height: 43px;
text-transform: uppercase;
}
.navSuper > li:hover {
border-right: 1px solid #b2beb5;
border-left: 1px solid #b2beb5;
}
.navSuper > li:hover > div {
display: block;
}
.navSuper > li > div {
position: absolute;
left: 0;
top: 41px;
display: none;
background-color: white;
padding: 10px 10px;
box-shadow: 2px 4px 4px rgba(0,0,0,0.4);
overflow: hidden;
}
.nav-mainCustom{
width: 100%;
border: 1px solid #b2beb5;
}
.nav-dividerCustom {
display: inline-block;
width: 1.8%;
}
.nav-focus-artCustom {
display: inline-block;
width: 11.5%;
vertical-align: top;
text-align: center;
}
.nav-art-authorCustom, .nav-art-titleCustom{
display: inline-block;
padding: 10px 0px;
}
.nav-art-authorCustom {
font-size: .9em;
color: red;
}
.nav-art-titleCustom {
font-size: 1.4em;
}
.nav-art-imageCustom {
display: inline-block;
}
.nav-divider-2Custom {
display:inline-block;
width: 3.8%;
}
.nav-headlinesCustom {
display:inline-block;
width: 34.5%;
font-size: 1.2em;
font-weight: bold;
text-align: left;
padding-right: 3px;
}
.nav-headline-linkCustom {
border-bottom: 1px solid #b2beb5;
padding: 10px 0px;
}
.nav-headline-linkCustom:last-child {
border-width: 0px;
}
.nav-linksCustom{
display: inline-block;
width: 11.95%;
vertical-align: top;
text-align: left;
}
.nav-linkCustom{
/*padding-bottom: 20px; */
}
.nav-empty-cellCustom{
}
.nav-headline-linkCustom:first-child{
color: red;
}
.nav-linkCustom:first-child{
color: red;
}
<div class="wrapperss">
<ul class="navSuper">
<li>Title 1
<div class="nav-mainCustom">
<div class="nav-divider"></div>
<div class="nav-focus-artCustom">
<img class="nav-art-imageCustom" src="http://example image" alt="article image"/>
<span class="nav-art-authorCustom">Title 2</span> <br>
<span class="nav-art-titleCustom">Product 1</span>
</div>
<div class="nav-divider-2Custom"></div>
<div class="nav-focus-artCustom">
<img class="nav-art-imageCustom" src="http://exampleimage" alt="article image"/>
<span class="nav-art-authorCustom">Title 3</span><br>
<span class="nav-art-titleCustom">Product 2</span>
</div>
<div class="nav-divider-2Custom"></div>
<div class="nav-headlinesCustom">
<div class="nav-headline-linkCustom">New Products</div>
<div class="nav-headline-linkCustom">Product 1 Desctiption</div>
<div class="nav-headline-linkCustom">Product 2 Desctiption</div>
<div class="nav-headline-linkCustom">Product 3 Desctiption</div>
<div class="nav-headline-linkCustom">Product 4 Desctiption</div>
<div class="nav-headline-linkCustom">Product 5 Desctiption</div>
</div>
<div class="nav-divider-2Custom"></div>
<div class="nav-linksCustom">
<div class="nav-linkCustom">Categories</div>
<div class="nav-linkCustom">CAt 1</div>
<div class="nav-linkCustom">Cat 2</div>
<div class="nav-linkCustom">Cat 3</div>
<div class="nav-linkCustom">Cat 4</div>
</div>
<div class="nav-linksCustom">
<div class="nav-empty-cellCustom"></div>
<div class="nav-linkCustom">Test 1</div>
<div class="nav-linkCustom">Cat 5</div>
<div class="nav-linkCustom">Cat 6</div>
<div class="nav-linkCustom">Cat 7</div>
<div class="nav-linkCustom">Cat 8</div>
</div>
In .navSuper class use
z-index: 99;
I have some divs.
I am using a Grid system and I cannot for the life of me figure out how to stop divs from pushing others down.
When I try to set the margin top to say 50px for the border div it pushes everything else down.
I do not want to use position absolute due to being responsive grid system.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
margin-top: 100px;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top:;
}
<div class="cover">
<div class="grid">
</div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
</div>
On the border div, you can remove the margin and add:
position: relative;
top: 50px;
Seems to me that the problematic margin is here:
ul {
margin-top: 100px;
}
Remove or shrink that and add your margin to .border as intended.
body {
font-size: 100%;
font-family: Lato;
}
img {
width: 100%;
height: auto;
max-height: 640px;
}
h2 {
font-size: 3.2em;
font-weight: 300;
text-align: center;
margin-top: 160px;
}
ul {
text-align: center;
overflow: hidden;
margin-right: 25px;
}
ul > li {
display: inline-block;
padding: 0 25px;
font-size: 1.1rem;
}
#circle {
font-size: 1.2rem;
border: 1px solid black;
border-radius: 5px 20px 5px;
padding: 0 20px;
}
.border {
overflow: hidden;
border: 2px solid black;
margin-top: 50px;
;
}
<div class="cover">
<div class="grid"></div>
<div class="row">
<div class="c12">
<div class="border"></div>
<div class="clear"></div>
<ul>
<li id="circle">H</li>
<li>Home</li>
<li id="circle">A</li>
<li>About</li>
<li id="circle">W</li>
<li>Work</li>
<li id="circle">C</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="row">
<div class="c12">
<h2>Exquisite Web Development</h2>
</div>
</div>
</div>
Try using:
position: relative;
top: 50px;
Here is a pen: http://codepen.io/anon/pen/GpyMKp
For your border div. This is a way to move an element from it's usual position without affecting the other divs.
Although I feel like you would be better off just reducing the margin-top on your ul element, and you could achieve the same layout without it being a sort of "hacky" solution.
I am attempting to add a bottom border to a div for the purpose of a navigation bar. The effect I am trying to achieve:
Currently, I have the following code:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item a.current {
border-bottom: 2px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
I cannot find a way to add the empty space in between the content of the div and the bottom border without it being the same colour as the div background.
As it currently stands you can't do this. You can't add a gap between an element and its own border. You can, however, add the border to its parent element (the div.item element in this case), then add padding-bottom to that same element to separate it from the a element:
$("a").click(function() {
$(".current").removeClass("current");
$(this).parent().addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.container .item.current {
border-bottom: 2px solid red;
padding-bottom: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item current">
Page 1
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>
Note that I've also modified your JavaScript to add this .current class to the li element and not the clicked a element.
demo
new css:
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
border-bottom: 8px solid red;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
border-bottom: 4px solid white;
}
.container .item a.current {
}
One more version using :after pseudo element. Unlike other answers this will put white border inside of element, not push the green further outside.
The interesting parts I added/changed:
.container .item a {
...
position: relative;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
And here is a demo:
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
position: relative;
}
.container .item a.current {
border-bottom: 2px solid red;
}
.container .item a.current:after {
content:'';
position: absolute;
left: 0;
bottom: 2px;
height: 2px;
width: 100%;
background-color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
</div>
Demo: http://jsfiddle.net/osajfgLc/
Not sure whether this is what you want. Try this. I added a div with class box. This also can be done using css after method.
$("a").click(function() {
$("a").removeClass("current");
$(this).addClass("current");
});
.container {
}
.container .item {
float: left;
list-style-type: none;
margin: 0 1px;
}
.container .item a {
color: black;
text-decoration: none;
background-color: green;
width: 50px;
font-size: 13px;
text-align: center;
font-weight: bold;
display: table-cell;
vertical-align: middle;
height: 40px;
}
.box {
margin-top:2px;
height: 2px;
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="item">
<a class="current" href="#">Page 1</a>
<div class="box"></div>
</div>
<div class="item">
Page 2
</div>
<div class="item">
Page 3
</div>
<div class="item">
Page 4
</div>
<div class="item">
Page 5
</div>
<div class="item">
Page 6
</div>
</div>