I want to remove the padding on item inside ion-slide. By setting the background color, I've found that it must come from there, as shown in the pic:
I want to remove the green zone.
<ion-content >
<ion-slides style="background-color: #976914d0" >
<ion-slide *ngFor="let channel of channels" style="background-color: #0c8831d0">
<div class="flex-container">
<br/>
<h1 class="title-top"> {{channel.name}} </h1>
...
and what i've tried with scss so far:
.ios, .md {
page-home {
ion-slide {
margin: 0 0 0 0 !important;
padding: 0 0 0 0 !important;
}
.flex-container {
flex-basis:100% !important;
overflow: auto;
height: 100% !important;
background-color: #3498db;
//height: 100%;
//display: flex; /* or inline-flex */
flex:1;
//align-content: space-between;
justify-content: space-around;
flex-direction: column;
//flex-grow: 1;
border: solid 5px #000000 ;
}
[EDIT] I should have mentioned that in flex-container I can set height: 600px; and it makes larger item, but it is not portable. and height: 100% does nothing.
In flexbox the value should be flex-start for the align-self property.
Given your current configuration, start with this:
.flex-container {
align-self: flex-start;
}
I found some work around but it is not perfect. It remove the space on top, but I'm still unable to set container size auto adjustable to windows... I overwrite some config on ion-slide. I saw another class that is nested in ion-slide; swiper-slide. I have not tried all of it config...
ion-slides {
height: auto !important;
}
.flex-container {
//height: 100% !important;
display: flex;
flex-direction: column;
height: 500px;
justify-content: space-between;
border: solid 5px #000000 ;
}
[EDIT]finally got the right answer, add:
.scroll-content {
display: flex;
flex-direction: column;
ion-slides {
display: flex;
}
}
.slide-zoom {
height: 100%
}
worked for me. Have a look at the Ionic Demo Source:
https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/slides/basic
Related
I've just been practicing making some mixins, which at the moment are very basic but just do some simple tasks.
I've made a mixin that I can call in which turns child elements into inline-block elements instead of floats, so that the parent can use text-align to center the elements as things shrink responsively.
The problem I have is this was working fine, but since tweaking it, it doesn't seem to work as it did. I'll provide a working example below. In my example when 3 per row are set, I'm only getting two per row.
My initial thoughts are that it might be extra space created by inline-block? Although my vertical-align: top; was to negate that.
HTML
<div id="site-wrap">
<div class="list__wrap">
<div class="list__item">1</div>
<div class="list__item">2</div>
<div class="list__item">3</div>
<div class="list__item">4</div>
<div class="list__item">5</div>
<div class="list__item">6</div>
<div class="list__item">7</div>
<div class="list__item">7</div>
</div>
</div>
SCSS
// The mighty Mixin...
#mixin list-grid($per-row, $spacing, $child, $prefix){
margin: 0 em(-$spacing/2);
#include clearfix;
//if a class
#if $prefix == 'class' {
> .#{$child}{
width: 100%/$per-row;
//position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
}
}
#if $prefix == 'id' {
> ##{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
}
}
#if $prefix == 'none' {
> #{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
word-wrap: break-word;
}
}
}
//start of our styles
#site-wrap{
max-width: 1020px;
margin: 0 auto;
background: {
color: Black;
}
}
.list__wrap{
#include clearfix;
// Call in our mixin on the inner divs
#include list-grid(3, 10, list__item, class);
// We can use text-align to center the list when it's shrinking down
text-align: center;
.list__item{
background: {
color: Tomato;
}
}
}
Working example: http://codepen.io/vdecree/pen/wuExl
I think I found a solution that is not as icky as having to format the HTML in a certain way. Rather that use font-size: 0; on the parent (because this broke my negative margins) — you can use letter-spacing: -0.31em;
// The mighty Mixin...
#mixin list-grid($per-row, $spacing, $child, $prefix){
margin: 0 em(-$spacing/2);
#include clearfix;
letter-spacing: -0.31em;
//if a class
#if $prefix == 'class' {
> .#{$child}{
width: 100%/$per-row;
font-size: 16px;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
#if $prefix == 'id' {
> ##{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
letter-spacing: 0;
background-clip: content-box;
}
}
#if $prefix == 'none' {
> #{$child}{
width: 100%/$per-row;
position: relative;
padding: 0 em($spacing/2) em($spacing) em($spacing/2);
display: inline-block;
vertical-align: top;
background-clip: content-box;
letter-spacing: 0;
word-wrap: break-word;
}
}
}
Source
I have to resize the buttons on the screen initial size of button 157*70px and required size on screen is 100*50px. It has to be compatible with IE8 where the background-size property is not working although this property works fine in FF.
HTML:
<div id="return_button">
<a class="new_return_button" name="PREVIOUS">Previous</a>
</div>
CSS:(Firfox)
.new_return_button{
background: url("images/previous.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
backgound-size: 100px 50px;
color: #FFFFFF;
cursor: pointer;
display: block;
height: 70px;
line-height: 70px;
width: 157px;
}
#return_button{
color: #FFFFFF;
font-weight: bold;
height: 70px;
left: 10px;
line-height: 70px;
margin: 0;
position: absolute;
text-align: center;
width: 157px;
}
This css works fine in Firefox with background-size property and shrinks the image of 157*70px to area of 100*50px but doesn't work in IE8.
Please suggest a solution to this issue
One way to solve this is to use another element. You probably need to tweak the margins of the <span> to have it working as desired. Also note that this does not guarantee a specific height, instead it will give you the correct aspect ratio for the scaled graphic.
<style>
#return_button {
position: relative;
width: 100px;
}
#return_button img {
max-width: 100%;
height: auto;
}
#return_button span {
position: absolute;
top: 50%;
margin-top: -5px;
left: 10px;
right: 10px;
text-align: center;
}
</style>
<div id="return_button">
<img src="images/previous.png" alt="Button graphic">
<span>Button label</span>
</div>
So i have a popup window with a scroller. For scroller i used basic css element overflow: scroll. But the problem is scroller appears on the side and on the bottom. Now i want to know if there is anyway to remove the bottom scroller, because even though its locked its useless to me and it would look better without it. Ive googled it and havent found anything so if you have a solution please share it. If you need any of the code tell me and i will post it.
This is "my" css for popup (i got the code from http://www.zurb.com/playground/reveal-modal-plugin):
.reveal-modal-bg {
position: fixed;
height: 100%;
width: 100%;
background: #000;
background: rgba(0,0,0,.8);
z-index: 100;
display: none;
top: 0;
left: 0;
}
.reveal-modal {
visibility: hidden;
top: 100px;
left: 50%;
margin-left: -300px;
width: 520px;
height: 400px;
background: #eee url(modal-gloss.png) no-repeat -200px -80px;
position: absolute;
z-index: 101;
padding: 30px 40px 34px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
-box-shadow: 0 0 10px rgba(0,0,0,.4);
overflow:scroll;
}
.reveal-modal h1{
color: green;
font-size: 40px;
}
.reveal-modal strong{
font-style: inherit;
}
.reveal-modal.small { width: 200px; margin-left: -140px;}
.reveal-modal.medium { width: 400px; margin-left: -240px;}
.reveal-modal.large { width: 600px; margin-left: -340px;}
.reveal-modal.xlarge { width: 800px; margin-left: -440px;}
.reveal-modal .close-reveal-modal {
font-size: 22px;
line-height: .5;
position: absolute;
top: 8px;
right: 11px;
color: #aaa;
text-shadow: 0 -1px 1px rbga(0,0,0,.6);
font-weight: bold;
cursor: pointer;
}
a better way of doing it would be
overflow-x:hidden;
overflow-y:auto;
That way it means that if a page gets bigger with jquery and then you need to scroll the view won't get smaller and affect your measurements
This should work:
overflow-x:hidden;
overflow-y:auto;
Here is what i aim to do: https://docs.google.com/file/d/0B13W1jkpc_BzLXZ6RGxGbUd2NG8/edit?usp=sharing
Here is the CSS for my approach:
#media (min-width: 980px) {
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
}
a.menu:after, .dropdown-toggle:after {
content: none;
}
.navbar .dropdown-menu {
margin-top: 0px;
text-align: center;
}}
And the way it looks now: https://docs.google.com/file/d/0B13W1jkpc_BzZUlRck5VcWh0TkE/edit?usp=sharing
Everything is working fine except that i can't seem to get the right width for the dropdown menu's text (i need to shrink the width according to text). So how do i do that ?
You have to remove the min-width property of the .dropdown-menu list. Including the following after you include bootstrap:
.dropdown-menu {
min-width: 0px;
}
Alternatively, for the exact style you have given, you could use bootstrap's tooltips instead
Try removing padding from the .dropdown-menu .sub-menu classes.
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
padding: 0;
}
Well you can add space to your inner text and it will automatically increase its width e.g you have
"--View by Category--"
Add spaces with   as many as you want like
 --View by Category--
I'm trying to make a centered, 100% high layout that has NO FIXED width (argh). Everything seems to be ok with the solution below, apart from the img that I need to scale to height: 100%, that doesn't scale inside table-cell (outside of the div everything's ok).
EDIT: I am able to set fixed height like 100px or so, both in css and tag. Why doesn't this work with %?
<div id="center">
<div id="tcontainer">
<div id="tleft">a</div>
<div id="tright"><img id="bgright" src="images/bgright1.jpg" height="100px" /></div>
</div>
</div>
And styles:
html,body {
margin:0;
padding:0;
height:100%; /* needed for container min-height */
font-family:arial,sans-serif;
font-size:small;
color:#666;
}
#bgrepeat { /* unnecessary ATM */
width: 100%;
height: 100%;
position: absolute;
z-index: 0;
}
#bgright { /* HERE THE PROBLEM */
height: 100%;
}
img { border: 0; /*float: left;*/ }
#center {
text-align: center;
height: 100%;
}
#tcontainer {
text-align: left; /* POTRZEBNE ? */
background: red;
height: 100%;
display: table;
margin: 0 auto;
}
#tleft {
display: table-cell;
}
#tright {
background: pink;
display: table-cell;
}
OK, so the problem has been baldy formulated. I've had just forgotten to pass "height: 100%" in consecutive children. It didn't have anything to do with display: table nor images.