The Problem
I want to hide scrollbar from all pages( which works), but only display one for a section of description.
What I've tried
I add .scroller in , try to display only for the of description. It didn't work.
Code
<template>
<v-col md="6" sm="12" class="scroller ">
<v-row class="mx-auto" v-if="description.length > 0">
<div>
<span>
/* some description */
</span>
</div>
</v-row>
</v-col>
</template>
<style>
.scroller {
display: inline-block;
overflow-y: scroll;
scrollbar-color: rebeccapurple green;
}
::-webkit-scrollbar {
width: 0.8rem;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #888;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
</style>
Expectation
Hide all scrollbars, but leave one for the section of description in specific page.
One solution just comes out after posting the question:
Just add following to .
So I still keep the section(v-col) which needs a scrollbar.
Code
<style>
body::-webkit-scrollbar {
display: none;
}
</style>
Related
I'm having a problem with trying to create a footer in an angular4 app. The issue seems to be if a child component loaded in the app-router is of greater height than it's parent component... The footer on the parent doesn't go to the bottom of the full page, but just to the bottom of the parent component.
eg.
I've placed my footer at the very bottom of the app.component.html file:
<div class="contain">
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<app-footer></app-footer>
The footer is a very simple element:
<footer style="height:150px; background-color:blue">
<h3 class="text-light mt-5">This is the app footer</h3>
</footer>
The problem is the footer doesn't go to the bottom of the total app, it goes to the bottom of the app.component.html...but if the child component being loaded in the app-router is large ie the result of an ngFor loop of many elements... then it the footer is no longer underneath the child.
I can demonstrate the problem more simply by this:
I add a simple component of height 3000px and bootstrap background color danger orange:
<div class="bg-danger" style="height: 3000px;">
</div>
I load the component via routes to go into the router outlet.
The result is this:
Image of problem
How can I make sure the footer is at the bottom of the page?
EDIT:
This CSS is attached to the .css file in the app component.
None of the others seem to address the issue:
#splashbackground{
background:url('/assets/images/photo.jpg') no-repeat;
background-size:cover;
min-height:950px;
}
.dark-overlay{
background-color:rgba(0,0,0,0.4);
position:absolute;
top:0;
left:0;
width:100%;
min-height:952px;
}
Outside attached to other .css files there's these, but none of them really deal with positioning of the card elements or anything. What can I add to the footer element to ensure it will be at the bottom?
.center-block {
display: block;
margin-right: auto;
margin-left: auto;
}
.clickable{
cursor: pointer;
}
.borderThin{
border: 1px gray inset;
border-radius: 15px;
}
.vertical-align {
position:relative;
top:50%;
}
.card-img-left {
border-bottom-left-radius: calc(.25rem - 1px);
border-top-left-radius: calc(.25rem - 1px);
float: left;
padding-right: 1em;
margin-bottom: -1.25em;
}
.panelTheme {
background-color: #222;
color:#999;
border-radius: 5px;
}
/*Image Insertion*/
.customClass {
background-color: #222;
border-radius: 5px;
margin:5px;
width: 500px;
}
.customClass .img-ul-upload {
background-color: #222 !important;
}
.customClass .img-ul-clear {
background-color: #222 !important;
}
.customClass .img-ul-drag-box-msg {
color: purple !important;
}
.customClass .img-ul-container {
background-color: #222 !important;
}
/*Image Insertion*/
/* Ensure that all of the zero offsets are available - recent SASS version did not include .col-sm-offset-0 */
#media (min-width: 768px) {
.col-sm-offset-0,
.col-md-offset-0,
.col-lg-offset-0 {
margin-left: 0;
}
}
.modal-content{
background-color: #222;
border-color: #222;
border-radius: 0;
}
.modal-header{
border-bottom: 0px !important;
}
.modal-backdrop{
background-color: red;
}
.customClass {
background-color: #D21C1C;
border-radius: 5px;
margin:auto;
width: 50%;
}
.customClass .img-ul-upload {
background-color: #222 !important;
}
.customClass .img-ul-clear {
background-color: #222 !important;
}
.customClass .img-ul-drag-box-msg {
color: purple !important;
}
.customClass .img-ul-container {
background-color: #222 !important;
}
Solved!
The issue seems to have been how the divs were organised in the app-component.html:
Going from:
<div class="contain">
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
</div>
</div>
</div>
<app-footer></app-footer>
to this:
<div id="splashbackground">
<div class="dark-overlay">
<app-header></app-header>
<div class="container mt-5">
<router-outlet></router-outlet>
</div>
<app-footer></app-footer>
</div>
</div>
fixed the issue.
HTML
<paper-card class="media-responsive" heading="Nearest customers">
<div class="card-content">
<nearest-customers id="nearestCustomers" card-view-max-records="3"></nearest-customers>
</div>
<div class="card-actions card-footer">
<div style="float:right;text-align:right">
<a data-route="allcustomers" href="/full-customer-list">Full customer list
<iron-icon class="iron-icon-12" icon="fa:arrow-right"></iron-icon></a>
</div>
<div class="clear"></div>
</div>
</paper-card>
CSS:
<style type="text/css">
paper-card {
position: relative !important;
width: 100%;
margin-bottom: 10px;
height: auto !important;
}
.card-actions {
position: relative !important;
bottom: 0 !important;
}
</style>
Custom Style:
<style is="custom-style">
paper-card {
--paper-card-header-color: #000000;
--paper-card-header-text:{
font-size:15px;
margin:0 auto;
};
--paper-card-header: {
margin:0 auto;
border-bottom:1px solid #dddddd !important;
padding:0;
margin-bottom:0px !important;
};
--paper-card-actions {
border-top: 1px solid #e8e8e8;
padding: 5px 16px;
position:relative !important;
#apply(--paper-card-actions);
}
}
</style>
Output (please see attached image)
How can I achieve this?
I have solved this in the past by using iron-flex-layout.
You could also solve it using the --paper-card-actions and defining the proper flex styles.
Also I think for your custom style example there is a typo:
--paper-card-actions { should be --paper-card-actions: {
I am trying to vertically align an img and an inline bloc div, but can't figure how.
Here's a JSFiddle link to what I have done :
https://jsfiddle.net/vat2w1s3/4/
As you may see, the green image and the orange div are not vertically aligned. I don't know how to do this.
More over, the padding doesn't work for the orange bloc (due to the position: asbolute right?)
Anyone has an idea?
Here's the code:
HTML:
<header> <!-- RED -->
<div class="bloc-div">
<a href="#"> <!-- BLUE -->
<!-- GREEN -->
<img class="img" src="https://account.socialbakers.com/default_user.png" alt="some photo">
<!-- ORANGE -->
<div class="text-div">
<span class="span1">SOMETHING BIG</span><br/>
<span class="span2">Small caption</span>
</div>
</a>
</div>
</header>
<!-- BODY IS GRAY -->
and the CSS:
body {background: gray;}
a, a:hover, a:active, a:focus { color: inherit; text-decoration: inherit; }
header {
background: red;
width: 300px;
height: 100%;
position: fixed;
}
.bloc-div a {
display: block;
background: blue;
padding: 1em;
}
.img {
background: green;
display: inline-block;
width:50px;
height:50px;
-webkit-border-radius:50px;
-moz-border-radius:50px;
border-radius:50px;
padding:5px;
}
.text-div {
background: orange;
display: inline-block;
text-align: right;
/* Stick the orange bloc to the right */
position: absolute;
right: 0;
}
.span1 {
font-size: 1.3em;
}
.span2 {
font-size: 0.8em;
}
I propose you a simple solution. You can just add a margin to the orange box (text-div):
margin-top: 10px;
The two elements are in the same box but they are not of the same size, it's the easiest fix.
By the way, the padding works for me, but it makes the orange box bigger.
NB: I use Chrome, could it be a browser issue?
I have a header bar with a logo on the left and a search form following. Both are floated to the left. I am trying to control the vertical spacing of the search form using CSS but I cannot find a good solution other than adding padding and/or margin either on top or bottom of the search form, and although I may be able to find values that work in one browser, it is not a solution that is consistent across browsers... The same problem exists if I have a search button next to the search field. Is there a solution for this that is cross-browser compatible or do I need to use JavaScript? Is there a standard to doing something like this?
P.S. I reset the CSS in my dev code.
Here is a simplified version of my header code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
margin-top: 5px
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Link to code on JSFiddle: http://jsfiddle.net/mg535m80/2/
Edit: I found a solution, it's not as cross-browser compatible is I'd hoped, but it works in all modern browsers. I just added display: flex; and align-items: center to the parent, and it worked like a charm. New code:
body {
font-family: Arial, sans-serif;
}
header {
overflow: hidden;
background-color: black;
display: flex;
align-items: center;
}
a {
text-decoration: none;
color: white;
}
#site-title, #search {
float: left;
}
#site-title {
margin-right: 50px;
background-color: green;
font-size: 28px;
}
#search {
background-color: red;
}
<body>
<header>
<div id="site-title">Site Title</div>
<div id="search">
<form>
<input type="search" placeholder="Search..." />
</form>
</div>
</header>
</body>
Updated JSFiddle: http://jsfiddle.net/mg535m80/9/
The problem is the style of the input, which is different between browsers.
Solution: to make the input look the way you want, set all its styles explicitly instead of relying on the defaults. Example:
input {
width:10em; height:1.25em;
margin:0; border:2px solid #888; padding:0;
font:inherit; vertical-align:baseline;
}
See updated fiddle
Yes, it is possible to specify vertical properties in pure CSS. Partially you already answered your question (i.e. padding and margin properties). Other properties include height, line-height, min-height, max-height, etc. Also, you can use position: absolute or fixed and specify top/bottom properties. Hope this may help. Best regards,
One solution can be set height in header:
header {
height: 33px;
}
And then use display: flex to align search box:
#search {
display: flex;
align-items: center;
height: 100%;
}
FIDDLE: https://jsfiddle.net/lmgonzalves/mg535m80/3/
I have this HTML Code
<a href="test.html">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
and this is the css
.menubox {
height: 150px;
width: 100%;
font-size: 14px;
color: #777;
margin: 0 0 0 0;
padding: 0;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;}
.mcolor1 { background: #3A89BF url(../images/prod2.png) no-repeat center center; }
on mouse hover this div, the text shows the hyperlink line, how can I hide it?
As others have suggested, it's easy to remove the underline from links. However, if you need to target just this specific link, try giving it a class. Example:
.no-underline:hover {
text-decoration: none;
}
<a href="test.html" class="no-underline">
<div class=" menubox mcolor1">
<h3>go to test page</h3>
</div>
</a>
If you want to remove the underline on hover, use this CSS:
a:hover {
text-decoration: none;
}
Note :
Unless your page uses the HTML5 doctype (<!doctype html>), your HTML structure is invalid. Divs can't be nested inside a element before HMTL5.
With the HTML as it stands, you can’t hide the link underline just for this link.
The following CSS will remove the underline for all links:
a:hover {
text-decoration: none;
}
To remove it for just this link, you could move the link inside the <div>:
.menubox > a {
display: block;
height: 100%;
}
.menubox > a:hover {
text-decoration: none;
}
<div class="menubox mcolor1">
<a href="test.html">
<h3>go to test page</h3>
</a>
</div>