I am trying to position the control nav in flexslider 2 (the dots for each slide). Default is text-align:center. If you change to the left it positions to the left no problem. If you change to right then while it positions to the right it also shows text numbers of each slide over each dot.
How can I position this to the right WITHOUT the text numbers showing up? Furthermore, why are they showing up when aligned to the right?
You can see this happen out of the box in its default state by just changing the value to the below.
/* Control Nav */
.flex-control-nav {width: 100%; position: absolute; bottom: 0px; text-align: right;}
I thought that changing the -9999px to a positive had worked for me, until I realized that it just pushed the text way off the screen. But you could still scroll to it. My fix, leave the text-indent at -9999px; and add
color: rgba(0, 0, 0, 0); .
The last 0 in this controls the alpha, and with it at 0, that makes the numbers completely invisible.
removing width allows positioning without the number issue
I had problems with this, removing the width doesn't work. Here is a solution that does work:
.flex-control-nav {
text-align: right;
}
.flex-control-paging li a {
text-indent: 9999px;
}
When aligning the control nav to the right, you need to change the text indent from negative -9999px to a positive 9999px.
Use this code to adjust the positioning without the numbers.
/* Control Nav */
.flex-control-nav {position: absolute; bottom: 25px; right: 20px;}
Related
I searched a lot, but every solution was to include some constant CSS class names into the page, and use the Column's ClassNameGenerator to set the proper classname on the cell/row.
Now this might be a good solution when the developer can decide on formatting a cell, however when a user can decide (especially with a script written as cell renderer) how a cell will look like, it is not possible to use the ClassNameGenerator.
So question is, how can I format the cell/row background programmatically, not using any CSS? I can provide custom component as cell value. So it's fine to render a label with icon, or just icon, or a checkbox, however coloring this rendered component is not enough, since this is smaller than the cell itself, making it look really ugly. I need to access the root element of the cell, and color it using getStyle().set("background", "xxxx"). How to achieve this?
Thanks!
You can use a TemplateRenderer.
For example:
Grid<Person> grid = new Grid<>();
grid.setItems(people);
grid.addColumn(TemplateRenderer
.<Person>of("<b>[[item.name]]</b>")
.withProperty("name", Person::getName)
).setHeader("Name");
Checkout this tutorial for more information: https://vaadin.com/docs/v14/flow/components/tutorial-flow-grid
OK, finally I solved. I use a template renderer with a proper template structure. I modified the cell style in a way, that my renderer DIV fills the entire cell (removed any padding/margin from the original cells)
<dom-module id="grid-style" theme-for="vaadin-grid">
<template>
<style>
[part~='cell'] ::slotted(vaadin-grid-cell-content) {
padding: 0px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--cellopa: 255;
}
[part~='cell'][aria-selected~="true"] ::slotted(vaadin-grid-cell-content) {
--cellopa: 0;
}
</style>
</template>
</dom-module>
I also added some simple CSS declarations to one of the main CSS:
vaadin-grid-tree-toggle flow-component-renderer {
width: 100%;
height: 100%;
}
vaadin-grid-cell-content flow-component-renderer {
width: 100%;
height: 100%;
flex-grow: 1;
}
This way the rendered DIV fills the whole cell and I can color it's background.
Now the problem comes with the selection, since the selection is not visible any more. For this you find the --cellopa variable set to 255 normally and set to 0 for selected cells.
Now when I define a background-color on the div, I use rgba and I set the alpha to the var(--cellopa) variable, like this for example rgba(255, 0, 0, var(--cellopa))
Now when the row is not selected, the cellopa is 255, so the background is visible, when I select the row the cellopa is set to 0, so the background of the DIV gets transparent, and the row selection color on the row is visible. This is super fast, and changing the selection does not cause any glitch, and also the previous coloring state is restored properly.
I also managed to get around with the treegrid and managed to color even the hierarchy column fully using a special template for the hierarchy column with some padding taking the level into account.
So I'm designing the website for my dad's company and I'm trying to get rid of the whitespace above the header on the page. I tried making the margins 0 and paddings 0 but nothing is changing. Here is my code and a link to the website:
header {
font-size: 20px;
position: relative;
background-color: #DDDDDD;
height: 150px;
}
The problem is the the w3-sidebar-class you are using inside the page. It sets the top margin to a negative value. In order to analys these kind of problems, I suggest you start from a black html page and add new elements to it step by step. Then you can see which changes have which effect.
Bootstrap 3:
I'm trying to float a button center halfway outside the panel-footer. But the whole layout is responsive so I need to have it when the screen size is resized or smaller it is still correct.
I created a bootply with my attempt that is close but doesn't stay when the screen is resized.
Thanks,
Nate
Bootply Trial
Is this what you wanted to get? http://www.bootply.com/114327
.relative {
position: relative;
}
.absolute {
position: absolute;
}
.bottom-btn {
left: 50%;
bottom: -17px; /* half of the button height */
margin-left: -77px; /* half of the button width */
/* instead of bottom and margin-left, you can use translateX as well. */
}
play with css position property and use margin to get exact position. see the comments for the .bottom-btn class.
Im trying to set a vertical carousel with AnythingSlider. But, I need to set a fix width for UL, and the script dont allow this. Is that possible?
Here is my code: http://jsfiddle.net/ycUB6/5230/
But the list stay with a blank space ;/
Anyone could help me?
AnythingSlider isn't, at this time, set up to allow multiple vertical slides. So, you will see some blank space below the last slide until it reaches the top.
To fix your demo, change this bit of css (updated demo):
ul#slider img {
width: 300px;
height: 100px;
list-style: none;
}
Working URL:
http://webstage.co/scroll/stack.html
What I am trying to accomplish is to hide the content when it is outside of the background area (1280x800). I like the way the backgrounds are coming in when you scroll to a new section, but I want to hide the content until it gets into that 1280x800 viewport? Any suggestions on how I can accomplish this?
Bonus...It would be great if I could also hide the content under the top navigation once it scrolled up under it as well. A guy can dream. :)
Thanks!
For the first part you can add another div and target with css something like this:
.viewport {
width: 1280px;
height: 100%;
position: fixed;
top: 0;
left: 50%;
margin-left: -640px;
background: black;
clip: rect(800px, 1280px, auto, auto);
}
Basically, set the background to the same color as the page background and use clip to only display the portion of the div that sits below your desired viewport area hiding the content outside the viewport area.
If you add content to the footer later you may need to tweak some z-index settings to make sure it sits on top of the viewport div.