I am trying to align the items in a clearing lightbox to the center. The lightbox aligns the items to the left for default. Here is the current situation:
According to this answer you can align them in the tabs component using
float: none !important;
display: inline-block;
But for the lightbox it just produces an erratic behavior where the thumbnails are in an apparently random position yet center aligned horizontally:
So i wonder how to make the items aligned to the center and not all to the left.
Here is the relevant code:
CSS:
[class*="clearing-thumbs"]
{
/* top right bottom left*/
margin: 5% 0 0 0;
text-align: center;
padding: 0.25 0 0.5rem 0;
}
[class*="clearing-thumbs"] > li
{
padding: 0.025 0 0.5rem 0;
/*
float: none !important;
display: inline-block;
top:0%;
*/
}
HTML/JS:
function load(listaSucursales.data)
{
var output = '<div class="row"><div class="small-11 small-centered columns" >';
output += '<ul class="clearing-thumbs" data-clearing>';
for(var x in listaSucursales.data)
{
output+='<li> <div class="square">'+ listaSucursales.data[x].NOMBRE +"</div></li> ";
}
output+= '</ul> </div></div>';
document.getElementById("mainContent").innerHTML=output;
}
Thanks to Niloct suggestion this code allowed me to align the items as i needed:
[class*="clearing-thumbs"]
{
margin: 5% 0 0 0;
text-align: center;
padding: 0.25 0 0.5rem 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
[class*="clearing-thumbs"] > li
{
padding: 0.025 0 0.5rem 0;
}
Related
I just want to play the mp3 when the image tracking is turned on, and stop the sound
What currently works is that after recognizing the nft, the model comes out well
but the sound doesn't play
Play and pose sound when image tracking is on with AR.js
I used the code in this link, but it doesn't seem to work due to my lack of skills
The link was intentionally deleted (a-assets,a-nft,a-entity)
please give me any advice. Thanks
'''
<script>
AFRAME.registerComponent('soundhandler', {
tick: function () {
var entity = document.querySelector('sound');
if (document.querySelector('a-nft').object3D.visible == true) {
entity.components.sound.playSound();
} else {
entity.components.sound.pauseSound();
}
}
});
</script>
<style>
.arjs-loader {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.arjs-loader div {
text-align: center;
font-size: 1.25em;
color: white;
}
</style>
<body style="margin: 0px; overflow: hidden">
<!-- minimal loader shown until image descriptors are loaded -->
<div class="arjs-loader">
<div>Loading, please wait...</div>
</div>
<a-scene
cursor="rayOrigin: mouse"
vr-mode-ui="enabled: false;"
renderer="logarithmicDepthBuffer: true; precision: medium;"
embedded arjs="trackingMethod: best; sourceType: webcam;debugUIEnabled: false;"
gesture-detector
id="scene"
>
<a-assets>
<a-asset-item src="https.mp3"
preload="false" id="sound" response-type="arraybuffer" loop
crossorigin webkit-playsinline autoplay="false" playsinline>
</a-asset-item>
</a-assets>
<!-- we use cors proxy to avoid cross-origin problems ATTENTION! you need to set up your server -->
<a-nft
type="nft"
url="https:rogoqr"
smooth="true"
smoothCount="10"
smoothTolerance=".01"
smoothThreshold="5"
raycaster="objects: .clickable"
emitevents="true"
cursor="fuse: false; rayOrigin: mouse;"
>
<a-sound src="#sound"></a-sound>
<a-entity
gltf-model="https:.glb"
scale="2 2 2"
position="100 -20 -115"
class="clickable"
gesture-handler="minScale: 0.25; maxScale: 10"
sound="src: #sound" autoplay="false"
>
</a-entity>
</a-nft>
<a-entity camera></a-entity>
</a-scene>
<script>
</script>
</body>
'''
please give me any advice. Thanks
I have a set of several radio button and would like the ability to customize the layout more detailed, I know you can choose vertical or horizontal layout but I would like to combine the two. What I currently have is shown in the below picture, is it possible to keep the first 5 buttons in the same vertical column, then make the next set of 5 buttons in a vertical column to the right of the first 5, and then the last 2 in a third column to the right of those 5?
Current code:
radioButtons("b_Bet_Sizes", "",
choiceNames = list("17.5%", "35%", "62.5%", "75%", "90%", "125%", "150%", "175%","300%","400%","geo2","geo3"),
choiceValues = c(0.175,0.35, 0.625, 0.75, 0.9,1.25,1.5,1.75,3,4,"geo2","geo3")
),
You can play with CSS to meet your needs. Try this
css <- "
.shiny-options-group {
height: 100px;
width: 600px;
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
row-count: 5;
-webkit-column-fill: auto;
-moz-column-fill: auto;
column-fill: auto;
margin-top: 0px;
}
.control-label {
padding-bottom: 10px;
}
div.radio {
margin-top: 0px;
margin-bottom: 0px;
padding-bottom: 5px;
}
"
radioLab <-list(tags$div(align = 'left',
class = 'multicol',
radioButtons("b_Bet_Sizes", "",
choiceNames = list("17.5%", "35%", "62.5%", "75%", "90%", "125%", "150%", "175%","300%","400%","geo2","geo3"),
choiceValues = c(0.175,0.35, 0.625, 0.75, 0.9,1.25,1.5,1.75,3,4,"geo2","geo3")
), style = "font-size:75%"))
ui <- shinyUI(
navbarPage("TITLE",
tabPanel("TABULATE",
tags$head(tags$style(HTML(css))),
fluidRow(
column(width = 6, radioLab, align = "center"),
column(6)
)
)))
server <- shinyServer(function(input, output) {
})
shinyApp(ui,server)
I have a counter component - pretty straight forward.
<div> + </div>
<input type="text" v-model="countData" />
<div> - </div>
Detailed code is here - https://github.com/Shreerang/Vue-Nuggets/blob/master/src/components/QuantitySelector/QuantitySelector.vue
I am trying to unit test this component.
it('Renders a default quantity selector with the max count set to 6', () => {
const wrapper = shallowMount(QuantitySelector);
wrapper.find('input[type="text"]').setValue('1');
expect(wrapper.find('input[type="text"]').element.value).toBe('1'); // notice here that the value is a String, whereas I expect it to be a Number
wrapper.findAll('div').at(2).trigger('click');
expect(wrapper.vm.countData).toBe('2'); // This fails as countData becomes "11" instead of doing a 1 + 1 = 2 and then becoming Number 2.
expect(wrapper.find('input[type="text"]').element.value).toBe(2); // You can notice the same thing as above.
wrapper.find('input[type="text"]').setValue(wrapper.vm.countData); // Do I have to do this? This does not seem right to me :frowning:
});
I am not able to get this unit test to work! Any help with this is appreciated!
Text fields contain text values. Note that you even specified a text value: setValue('1'). If you change the value in the input manually, (say, to 3) and press the increment button, it becomes 31. Your test is telling you the truth.
You need to change your functions to convert to number. [Update] As your comment informed me, Vue has a .number modifier for v-model for this very purpose
new Vue({
el: '#app',
name: 'quantity-selector',
props: {
count: {
type: Number,
default: 1,
}, // Makes sense to have default product count value
maxCount: {
type: Number,
default: 6,
}, // maxCount makes sense when you have a restriction on the max quantity for a product
iconDimensions: {
type: Number,
default: 15,
},
minusIconFillColor: {
type: String,
default: '#000',
},
plusIconFillColor: {
type: String,
default: '#000',
},
isCountEditable: {
type: Boolean,
default: true,
},
},
data() {
return {
countData: this.count,
};
},
computed: {
minusIconColor: function() {
return this.countData === this.count ? '#CCC' : this.minusIconFillColor;
},
plusIconColor: function() {
return this.countData === this.maxCount ? '#CCC' : this.plusIconFillColor;
},
},
methods: {
decrement: function() {
if (this.countData > this.count) {
this.countData -= 1;
}
},
increment: function() {
if (this.countData < this.maxCount) {
this.countData += 1;
}
},
adjustCount: function() {
if (this.countData > this.maxCount) {
this.countData = this.maxCount;
} else if (this.countData < this.count) {
this.countData = this.count;
} else {
if (isNaN(Number(this.countData))) {
this.countData = this.count;
}
}
},
}
});
.nugget-quantity-counter {
display: inline-flex;
}
.nugget-quantity-counter div:first-child {
border: solid 1px #ccc;
border-radius: 5px 0px 0px 5px;
}
.nugget-quantity-counter div:nth-child(2) {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
display: flex;
flex-direction: column;
justify-content: center;
}
.nugget-quantity-counter input[type='text'] {
border-top: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-left: none;
border-right: none;
text-align: center;
width: 20px;
padding: 12px;
margin: 0;
font-size: 16px;
}
.nugget-quantity-counter div:last-child {
border: solid 1px #ccc;
border-radius: 0px 5px 5px 0px;
}
.nugget-quantity-counter > div {
cursor: pointer;
padding: 12px;
width: 20px;
text-align: center;
}
.nugget-quantity-counter > div > svg {
height: 100%;
}
<script src="https://unpkg.com/vue#latest/dist/vue.js"></script>
<div id="app">
<div #click="decrement">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d='M64 0 M2 11 L2 13 L22 13 L22 11 Z' :fill="minusIconColor" />
</g>
</svg>
</div>
<input v-if="isCountEditable" type="text" v-model.number="countData" #blur="adjustCount" />
<div v-else>{{countData}}</div>
<div #click="increment">
<svg viewBox="0 0 24 24" :width="iconDimensions" :height="iconDimensions">
<g>
<path d="M 11 2 L 11 11 L 2 11 L 2 13 L 11 13 L 11 22 L 13 22 L 13 13 L 22 13 L 22 11 L 13 11 L 13 2 Z" :fill="plusIconColor" />
</g>
</svg>
</div>
</div>
I have:
<style>
.parent{
display: flex;
flex-flow: row wrap;
}
.c1{
flex: 1 100%;
background: green;
}
.c2{
flex: 1;
background: red;
}
.c3{
flex: 4;
background: cyan;
}
</style>
<div class="parent">
<div class="c1">100% width</div>
<div class="c2">This text is big and long, and pushes the other div towards the bottom of the page and blabla.</div>
<div class="c3">This should not grow.</div>
</div>
And I wonder if it is posible to have the cyan div not to have 100%. A fixed size doesn't look right because I want it to grow with the flow of text in diferent window sizes.
Just add:
align-items: flex-start;
to the parent div. This makes the children align top and have diferent sizes. Strangely, the default valu for align-items is stretch.
Looking through http://foundation.zurb.com/docs/components/section.html, is there anyway I can add horizontal scroll for Section headers ( Tabs) . I am looking something like http://www.seyfertdesign.com/jquery/ui.tabs.paging.html in foundation sections with horizontal scroll and continue to use accordion in small screen
I found a solution for those interested : https://codepen.io/gdyrrahitis/pen/BKyKGe
.tabs {
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
.tabs-title {
float: none;
display: inline-block;
}
}
if someone needs an angularjs with jquery implementation, below code can help you, for pure jquery replace angularjs directive method with a native js method with respective attributes.
I tried to search for similar implementation but found nothing, so I have written a simple angular directive which can transform a foundation CSS tabs to scrollable tabs
angular.module("app.directives.scrollingTabs", [])
.directive("scrollingTabs", ScrollingTabsDirective);
//#ngInject
function ScrollingTabsDirective($timeout, $window) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if(attr.scrollingTabs == "true"){
element.addClass('scrolling-tabs-container');
element.find('.nav-buttons').remove();
element.append('<div class="scrolling-tabs nav-buttons nav-buttons-left"></div>');
element.append('<div class="scrolling-tabs nav-buttons nav-buttons-right"></div>');
let scrolledDiv = $(element).find('.tabs');
let scrolled;
let scrolling;
let scrollFn = (step, animationTime, cb) => {
scrolled = Math.max(scrolled + step, 0);
scrolledDiv.animate({
scrollLeft: scrolled
}, animationTime, ()=>{
if (scrolling) {
scrollFn(step, animationTime, cb)
}else{
if(cb){cb()}
}
});
};
let checkActiveNavButtonsClasses = () => {
scrolled = scrolledDiv.scrollLeft();
let scrollWidth = scrolledDiv.get(0).scrollWidth;
let scrolledDivWidth = scrolledDiv.get(0).clientWidth;
if(scrollWidth > scrolledDivWidth){
element.addClass('nav-active');
scrollWidth = scrolledDiv.get(0).scrollWidth;
if(scrolled == 0){
element.removeClass('nav-active-left').addClass('nav-active-right')
}else if(scrolled > 0 && scrolled + scrollWidth < scrolledDivWidth){
element.addClass('nav-active-left').addClass('nav-active-right');
}else if(scrolled > 0 && scrolled + scrollWidth >= scrolledDivWidth){
element.addClass('nav-active-left').removeClass('nav-active-right');
}else{
element.removeClass('nav-active-left').removeClass('nav-active-right')
}
}else{
element.removeClass('nav-active-left').removeClass('nav-active-right').removeClass('nav-active');
}
};
let scrollToActiveTab = () => {
let activeDD = scrolledDiv.find('dd.active');
let tabsOffset = scrolledDiv.offset();
let activeTaboffset = activeDD.offset();
let activeTabwidth = activeDD.width();
let scrolledStep = activeTaboffset.left - tabsOffset.left - scrolledDiv.width() + activeTabwidth;
scrollFn(scrolledStep, 100, checkActiveNavButtonsClasses);
};
element.find(".nav-buttons.nav-buttons-left")
.off("click.scrolling")
.on("click.scrolling", (event)=>{
event.preventDefault();
scrolling = false;
scrollFn(-100, 100, checkActiveNavButtonsClasses);
})
.off("mouseover.scrolling")
.on("mouseover.scrolling", function (event) {
scrolling = true;
scrollFn(-2, 1, checkActiveNavButtonsClasses);
})
.off("mouseout.scrolling")
.on("mouseout.scrolling", function (event) {
scrolling = false;
});
element.find(".nav-buttons.nav-buttons-right")
.off("click.scrolling")
.on("click.scrolling", (event)=>{
event.preventDefault();
scrolling = false;
scrollFn(100, 100, checkActiveNavButtonsClasses);
})
.off("mouseover.scrolling")
.on("mouseover.scrolling", function (event) {
scrolling = true;
scrollFn(2, 1, checkActiveNavButtonsClasses);
})
.off("mouseout.scrolling")
.on("mouseout.scrolling", function (event) {
scrolling = false;
});
$timeout(()=>{
checkActiveNavButtonsClasses();
scrollToActiveTab()
},1000);
$($window).off('resize.scrolling').on('resize.scrolling', _.debounce(()=> {
checkActiveNavButtonsClasses();
}, 500));
scope.$on('$destroy', function() {
$($window).off('resize.scrolling');
});
}
}
}}
css:
.scrolling-tabs-container {
position: relative;
.tabs {
overflow-x: hidden;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
display: block;
margin-right: 18px;
dd {
display: inline-block;
float: none;
margin: 0px -3px 0px 0px;
}
.tabs-title {
float: none;
display: inline-block;
}
}
.scrolling-tabs {
&.nav-buttons {
display: none;
position: absolute;
width: 19px;
height: 38px;
border: 1px solid #c1c1c1;
top: 1px;
background-color: rgba(255, 255, 255, 0.5);
opacity: 0.4;
cursor: pointer;
&:hover {
opacity: 1;
&:before {
color: #444;
}
}
&:before {
position: absolute;
left: 7px;
top: 8px;
color: #777;
}
&.nav-buttons-left {
left: 0;
&:before {
content: '<';
}
}
&.nav-buttons-right {
right: 18px;
&:before {
content: '>';
}
}
}
}
&.nav-active{
.tabs{
margin-right: 36px;
margin-left: 18px;
}
.scrolling-tabs {
&.nav-buttons {
display: inline-block !important;
}
}
}
&.nav-active-left{
.scrolling-tabs{
&.nav-buttons-left{
opacity: 0.8;
}
}
}
&.nav-active-right{
.scrolling-tabs{
&.nav-buttons-right{
opacity: 0.8;
}
}}}
HTML: Foundation Tabs template.
<tabset class="list-tabs" scrolling-tabs="true">
<tab heading="tab1"></tab>
<tab heading="tab2"></tab>
<tab heading="tab2"></tab>
</tabset>
Before you start you'll want to verify that both jQuery (or Zepto) and foundation.js are available on your page. These come with foundation package so just uncomment them in your footer or include them accordingly.
<div class="section-container auto" data-section>
<section class="active">
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
The foundation documentation has all of the information for this :
http://foundation.zurb.com/docs/components/section.html#panel2
This will get you your section tabular headers. You then want to manage the content to be scrollable.
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
This content here will be the area to work on, try adding a new class called .scrollable
Within this class use something like:
.scrollable{
overflow:scroll;
}
You may want to add some more to this however this will get you started. Your HTML should now look like this :
<div class="content scrollable" data-section-content>
<p>Content of section 1. This content will be scrollable when the content has exceeded that of the div size. </p>
</div>
This this is what you are looking for.