Does anyone know why the tooltip is not at the center(center-top) of the item?
here is the picture... as you can see its a little bit more on the right of the top center
item
and the same is on the other items.. here it will be easier to see
item 2
here is my html code:
<button class="btn btn-icon coverage-item "
type="button"
placement="top"
ngbTooltip="Incendio">
<img src="/assets/img/coverages/icon_thunderbolt.svg"/>
</button>
and this is the scss code:
#import "~bootstrap/scss/_functions.scss";
#import "../../scss/variables";
.coverage-item {
background: $white;
border: 1.5px solid $brand-primary;
color: $gray-light;
height: 3.5rem;
width: 3.5rem;
position: relative;
font-size: 1.5rem;
padding: 0rem 0rem;
}
.coverage-item__new {
background: $white;
border: 1.5px dashed $gray-lighter;
color: $gray-light;
height: 3.5rem;
width: 3.5rem;
position: relative;
font-size: 1.5rem;
padding: 0rem 0rem;
I just added this code to my scss file and it's working.
app-coverage-item {
.tooltip {
margin-left: -2px;
}
}
Related
So I'm trying to make an easy website for a server user ordering stuffs. But now I have a problem that will affect about the Navigator text.
Now it's looks like this:
As you can see in the code below, there should be a navigator text above the Back button and also the Categories button below should be shows like the back and prices button above too since they're the same code.
I tried for some other way but it's kinda out my coding range so I decide to find on Google but I don't find any helpful solve.
Is that actually can be fix?
Conclusion: problem
"Navigator" text disappear at 100% zoom view
Category buttons can't shows like buttons above (same codes as buttons above but different ID)
.title {
color: #66d4ff;
background-color: #444444;
font-size: 62px;
text-align: center;
border: solid 10px #66d4ff;
padding: 50px;
margin-left: 302px;
}
body {
background: #444444;
}
button {
color: #66d4ff;
background: #444444;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
}
a {
color: #66d4ff
}
nav {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: #4a4a4a;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-right: solid 2px #ffffff;
overflow-y: scroll;
}
.nav::-webkit-scrollbar {
display: hidden;
}
main {
color: #66d4ff;
background-color: #444444;
font-size: 20px;
}
.navigator {
display: block;
margin-bottom: 50px;
color: #66d4ff;
font-size: 35px;
text-align: center;
}
.store {
padding: 0 99.5px 0 99.5px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.prices {
padding: 0 93.5px 0 93.5px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Woods {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Stones {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Brewing {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Enchanting {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Color {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Nether {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.Redstone {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
<main>
<div class="title">
<t1>MineGlobe | IchorDragon's Store</t1>
</div>
</main>
<nav>
<div id="navigator">
<p class="navigator">Navigator</p>
<div>
<button class="store">Back</button>
<button class="prices">Prices</button>
</div>
</div>
<div id="category">
<p class="navigator">Select Category</p>
<div>
<button class="Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
<button class="Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
<button class="ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
<button class="Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
<button class="Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
<button class="Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
<button class="Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
<button class="Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
</div>
</div>
</nav>
I honestly can't explain all the changes made, there are too many. My attempt was to clean up your code and give you a working layout (hopefully that's what you were looking for).
In 2021 there are better layouts compared to fixed menu (with grids for example), which work better in responsive and are more clean. But it would require an in-depth study that's up to you.
body {
background-color: #444444;
}
main {
width: 100%;
padding-left: 302px;
box-sizing: border-box;
overflow:hidden;
color: #66d4ff;
background-color: #444444;
font-size: 20px;
}
.title {
padding: 50px;
border: solid 10px #66d4ff;
font-size: 62px;
text-align: center;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background-color: #4a4a4a;
border-right: solid 2px #ffffff;
overflow-y: scroll;
color: #66d4ff;
}
.navigator {
display: block;
margin-bottom: 50px;
font-size: 35px;
text-align: center;
}
button {
width:96%;
margin: 10px auto;
background: #444444;
color: #66d4ff;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
cursor:pointer;
}
<body>
<main>
<div class="title">
<t1>MineGlobe | IchorDragon's Store</t1>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/> This is a long page content...
<br/>
</main>
<nav>
<div id="navigator">
<p class="navigator">Navigator</p>
<div>
<button>Back</button>
<button>Prices</button>
</div>
</div>
<div id="category">
<p class="navigator">Select Category</p>
<div>
<button class="Woods items" onclick="document.getElementById('Woods').scrollIntoView();">Woods</button>
<button class="Stones items" onclick="document.getElementById('Stones').scrollIntoView();">Stones</button>
<button class="ArmorsWeapon items" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();">Armors & Weapons</button>
<button class="Brewing items" onclick="document.getElementById('Brewing').scrollIntoView();">Brewing</button>
<button class="Enchanting items" onclick="document.getElementById('Enchanting').scrollIntoView();">Enchanting</button>
<button class="Color items" onclick="document.getElementById('Color').scrollIntoView();">Color</button>
<button class="Redstone items" onclick="document.getElementById('Redstone').scrollIntoView();">Redstone</button>
<button class="Nether items" onclick="document.getElementById('Nether').scrollIntoView();">Nether</button>
</div>
</div>
</nav>
</body>
"Navigator" text disappear: This is because justify-content: center; on the nav
Buttons will not take a width of 100% even with display: block (more information), so it needs to be added. Note that since all cathegories have the same code a single class is enough.
.title {
color: #66d4ff;
background-color: #444444;
font-size: 62px;
text-align: center;
border: solid 10px #66d4ff;
padding: 50px;
margin-left: 302px;
}
body {
background: #444444;
}
button {
color: #66d4ff;
background: #444444;
font-size: 30px;
font-family: 'Times New Roman', Times, serif;
}
a {
color: #66d4ff
}
nav {
position: fixed;
top: 0;
left: 0;
width: 300px;
height: 100%;
background: #4a4a4a;
display: flex;
flex-direction: column;
align-items: center;
/* justify-content: center; */
border-right: solid 2px #ffffff;
overflow-y: scroll;
}
.nav::-webkit-scrollbar {
display: hidden;
}
main {
color: #66d4ff;
background-color: #444444;
font-size: 20px;
}
.navigator {
display: block;
margin-bottom: 50px;
color: #66d4ff;
font-size: 35px;
text-align: center;
}
.store {
padding: 0 99.5px 0 99.5px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.prices {
padding: 0 93.5px 0 93.5px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
}
.category {
padding: 0 80px 0 80px;
display: block;
margin-top: 25px;
margin-bottom: 25px;
width: 100%;
}
<main>
<div class="title">
<t1>MineGlobe | IchorDragon's Store</t1>
</div>
</main>
<nav>
<div id="navigator">
<p class="navigator">Navigator</p>
<div>
<button class="store">Back</button>
<button class="prices">Prices</button>
</div>
</div>
<div id="category">
<p class="navigator">Select Category</p>
<div>
<button class="category Woods" onclick="document.getElementById('Woods').scrollIntoView();"><a style="text-decoration: none;">Woods</a></button>
<button class="category Stones" onclick="document.getElementById('Stones').scrollIntoView();"><a style="text-decoration: none;">Stones</a></button>
<button class="category ArmorsWeapon" onclick="document.getElementById('ArmorsWeapon').scrollIntoView();"><a style="text-decoration: none;">Armors & Weapons</a></button>
<button class="category Brewing" onclick="document.getElementById('Brewing').scrollIntoView();"><a style="text-decoration: none;">Brewing</a></button>
<button class="category Enchanting" onclick="document.getElementById('Enchanting').scrollIntoView();"><a style="text-decoration: none;">Enchanting</a></button>
<button class="category Color" onclick="document.getElementById('Color').scrollIntoView();"><a style="text-decoration: none;">Color</a></button>
<button class="category Redstone" onclick="document.getElementById('Redstone').scrollIntoView();"><a style="text-decoration: none;">Redstone</a></button>
<button class="category Nether" onclick="document.getElementById('Nether').scrollIntoView();"><a style="text-decoration: none;">Nether</a></button>
</div>
</div>
</nav>
I currently have 2 submit buttons that cannot be place side by side.
.submit-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-top: 70px;
margin-left:100px;
border-radius: 30px;
}
.cancel-button {
color: #fff;
background: #55a1ff;
border: 0;
outline: 0;
width: calc(15%);
height: 50px;
font-size: 16px;
text-align: center;
cursor: pointer;
margin-left:450px;
border-radius: 30px;
}
<div class="arrange3">
<button type="submit" class="submit-button" name="save", value="save">Submit</button>
</div>
<div class="arrange3">
<button type="cancel" class="cancel-button" name="cancel", value="save">Cancel Claim</button>
</div>
How am i suppose to place the buttons side by side. It would be great if u can provide the code to me. Thanks
Make arrange3 class display inline.
.arrange3{
display: inline;
}
I'm building the traditional todo list app in an effort to increase my understanding of Vuejs. Most of the functionality is working as expected, however my todo items are not displaying properly. Each item should have a "delete" button that shows up on the right side of its row, but the buttons are bleeding into the row below (see image).
What irks me is that the checkboxes are displaying properly, but the buttons are not. I've tried changing all the css for the buttons to that for the checkbox, but this didn't work
TodoItem.vue
<template lang="html">
<li class="todo-item" v-bind:class="{ 'is-complete': todo.completed }">
<div class="checkbox-holder">
<input type="checkbox" v-on:change="markComplete(todo.id)" />
</div>
<h2>{{ todo.title }}</h2>
<button v-on:click="deleteTodo(todo.id)" class="del">x</button>
</li>
</template>
App.scss
.todos {
position: absolute;
display: block;
width: 656px;
background-color: white;
margin-left: 266px;
border-right: $generic-border;
min-height: calc(100vh);
padding-left: 40px;
padding-right: 40px;
padding-top: 80px;
padding-bottom: 80px;
#include mq("900px") {
margin-left: 0;
width: auto;
}
h2 {
font-size: 20px;
font-weight: normal;
}
&__list li {
line-height: 1.4;
color: #333;
font-size: 14px;
list-style-type: none;
border-bottom: 1px solid #f0f0f0;
margin-bottom: 20px;
margin-top: 20px;
padding: 20px;
&.is-complete {
text-decoration: line-through;
}
button {
#include btn("30px");
float: right;
display: block;
}
.checkbox-holder {
margin-right: 20px;
margin-left: 20px;
align-items: center;
justify-content: center;
line-height: 16px;
float: left;
.checkbox {
cursor: pointer;
border-color: gray;
color: #343434;
height: 16px;
width: 16px;
border: 1px solid gray;
border-radius: 16px;
}
}
}
}
Here's how the buttons are displaying.
You can see the below code.
li {
display: flex;
align-items: center;
}
<ul>
<li class="todo-item">
<div class="checkbox-holder">
<input type="checkbox"/>
</div>
<h2>Hello world</h2>
<button>x</button>
</li>
</ul>
I would like to create an alignment along a div container with the following structure. There are 3 buttons and one span element but this could be replaced with other elements if needed.
I started creating this
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
and tried to add float: right to the buttons on the right side but they didn't stick to the right side.
How can I achieve it? (A solution using display: grid would be fine too)
I have edited your code and here is what you expected , please have a look
I have used position style to make it right aligned by placing two button in one div<div class="pushRight"> and added styles for that div
body {
margin: 0;
background-color: #222222;
}
.todoContainer {
display: flex;
align-items: center;
outline: none;
border: 0;
border-radius: 0;
border-bottom: 1px dotted #666666;
padding-bottom: 5px;
margin-bottom: 15px;
position: relative;
}
.todoContent {
font-size: 25px;
color: #ffffff;
}
.btnTodoAction {
cursor: pointer;
text-align: center;
text-decoration: none;
outline: none;
width: 40px;
height: 40px;
padding: 8px;
border-radius: 40px;
border: 0;
background: #2a2a2a;
color: #555555;
}
.pushRight{
position: absolute;
right:0
}
.todoIsCompleted>.todoContent {
position: relative;
color: #666666;
}
.todoIsCompleted>.todoContent::before {
position: absolute;
content: "";
left: 0;
top: 50%;
right: 0;
border-top: 2px solid #85bf6b;
}
.todoIsCompleted>.btnToggleTodoState {
color: #85bf6b;
}
<div class="todoContainer">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 1</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
<div class="todoContainer todoIsCompleted">
<button class="btnTodoAction btnToggleTodoState">T</button>
<span class="todoContent">Item 2</span>
<div class="pushRight">
<button class="btnTodoAction">E</button>
<button class="btnTodoAction">D</button>
</div>
</div>
We can achieve this using float, check the sample code.
Here added floating instead display:flex
For right alignment added a class
.pull-right{
float:right;
}
and it will be called in
<button class="btnTodoAction pull-right">D</button>
<button class="btnTodoAction pull-right">E</button>
In the following HTML/CSS snippet, I'm trying to align the output div below the input field in such a way that they have the same width whenever the window is resized.
Right now the elements get misaligned whenever the viewport dimensions are changed.
How do i refactor and improve my CSS to achieve the desired result?.
I am still very fairly new to web design and development in general and would appreciate it if i could get detailed answers and suggestions. Thanks.
CSS/HTML
html {
font-size: 62.5%;
}
body {
background-color: #c0c0c0;
font-size: 1.6rem;
}
.section {
position: relative;
margin-top: 2rem;
text-align: center;
}
header {
margin-bottom: -2rem;
}
.text-field {
display: inline-block;
background-color: #c0c0c2;
border-top: .4rem solid;
border-color: red;
border-radius: .3rem;
color: black;
width: 50%;
height: 4.2rem;
text-align: left;
text-decoration: none;
font-size: 1.5rem;
min-width: 17.5rem;
}
.btn {
display: inline-block;
background-color: blue;
border-color: black;
border-radius: 3px;
border-style: dotted;
color: white;
padding: 14px 20px;
text-align: center;
text-decoration: none;
font-size: 16px;
}
.output-div {
position: absolute;
display: block;
font-size: 1.4rem;
background-color: #fff;
border-top: .5rem solid;
border-right: .15rem solid;
border-bottom: .15rem solid;
border-left: .15rem solid;
border-color: clack;
border-radius: .3rem;
margin: .5rem auto auto 6.5rem;
min-width: 17.4rem;
padding: .1em;
width: 50%;
height: auto;
text-align: left;
overflow-wrap: break-word;
word-wrap: break-word;
}
<br>
<!-- ✓ Oguntoye -->
<section class="section">
<header>
<h1>Header</h1>
</header>
<div class="user-interaction-area">
<form id="form">
<input class="text-field" type="text" placeholder="Input">
<button class="btn" type="button">Run</button>
</form>
</div>
<!-- output block-->
<div class="output-div">
<kbd class="input-output">Oy</kbd>
<samp class="run-output">vey!</samp>
</div>
</section>
I put your example code inside a codepen. https://codepen.io/melvinhicklin/pen/qyRwXB?editors=1100
From what I could see, the text areas already do a good job of staying the same width.
To align them, I added the following to the .output-div CSS Class:
position:relative;
left:-71px;
display:inline-block;