I'm using Onsen and I'm trying to make the elements inside the ons-page to be vertically align center on the screen but no luck, below is what I've tried.
<ons-page id="login-form" modifier="full_bg">
<ons-row align="center">
<ons-col width="50%" vertical-align="center">
<div style="padding-left:5px">
<ons-button modifier="large">Signin</ons-button>
</div>
</ons-col>
<ons-col width="50%" vertical-align="center">
<div style="padding-left:5px">
<ons-button modifier="large">Signin</ons-button>
</div>
</ons-col>
</ons-row>
</ons-page>
Any help, ideas?
try add a wrap it.
HTML
<div class="flexbox-container">
<ons-row>...</ons-row>
</div>
CSS
.flexbox-container {
height: 100%;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center;
align-items: center;
}
Reference: https://davidwalsh.name/css-vertical-center-flexbox
Related
I have a react component where I need to have multiple carousels that are connected. I am trying to create two swiper instance in a react component and control the slide of one on the slide of another.
I need help in creating multiple swiper instances and use in React.
And control one with the movement of the other.
API / Controller
Use API controller (Not a lot of docs/examples out there - For specific answer you should add full-code-example):
swiper API:
https://swiperjs.com/swiper-api#controller
Github: Github issue: How do I get two swiper instances to control each other? #1738
Example:
let sliderOne = new Swiper(".slider-one", {
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
let sliderTwo = new Swiper(".slider-two", {
pagination: {
el: ".swiper-pagination",
clickable: true
}
});
sliderOne.controller.control = sliderTwo;
sliderTwo.controller.control = sliderOne;
html,
body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
height: 50%;
}
.swiper-slide {
text-align: center;
font-size: 18px;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-pagination-bullet {
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 12px;
color: #000;
opacity: 1;
background: rgba(0, 0, 0, 0.2);
}
.swiper-pagination-bullet-active {
color: #fff;
background: #007aff;
}
.slider-two .swiper-pagination-bullet-active{
background: red;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"/>
<div class="swiper-container slider-one">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<div class="swiper-container slider-two">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.5.1/js/swiper.min.js"></script>
thumbs
Two carousels click/swipe A change B - Very Easy to control/sync with thumbs:
In addition to Controller component Swiper comes with Thumbs component
that is designed to work with additional thumbs swiper in a more
correct way than Controller which is used for syncing two swipers.
https://swiperjs.com/api/#thumbs
Demo:
https://swiperjs.com/demos/300-thumbs-gallery.html
Demo Source code:
https://github.com/nolimits4web/Swiper/blob/master/demos/300-thumbs-gallery.html
Using ngDraggable/Angular Material and having problems dragging objects within the parent DIV container.
The DIV style has a defined height and an overflow-y of "scroll", and the data is a list of employees.
I was expecting the DIV tag to scroll as I dragged my object down the list, but the scrolling won't trigger.
Stuck for a solution. Any help would be appreciated. The following code snippet is a stripped down example of my code.
.allEmployeeContainer {
height: 500px;
overflow-y: scroll;
}
.employeeHolder{
display: inline-block;
width:100%;
font-weight: normal;
font-size: 10.5pt;
padding:10px 0px 10px 0px;
margin:0px;
}
<div class="allEmployeeContainer">
<div ng-repeat="employee in someCtrl.employees" style="padding:0px; margin:0px" >
<div class="employeeHolder" layout="row" layout-wrap>
<div style="width:100%; margin-top:10px;" layout="row" layout-wrap>
<div flex="15">
<div class="drag-object" ng-drag="true" ng-drag-data="clip"></div><br />
</div>
<div flex>{{employee.firstName}}</div>
<div flex>{{employee.lastName}}</div>
</div>
</div>
</div>
</div>
The following code gives me a checkbox with a label:
<md-checkbox ng-model="data.foo">
This Label should be editable
</md-checkbox>
Actual state: I can (un)check the box by clicking either the box itself or clicking on the label. The cursor is a pointer over the entire box-label-line.
Desired state: I can (un)check the box only by clicking on the box itself. When hovering the label, cursor should become a text cursor and clicking on it should offer in-place editing.
How can I achieve this?
Modify the html like this:
<div ng-app="sandbox" class="ng-scope">
<md-checkbox ng-model="data.label" aria-label="Editable label" role="checkbox" class="ng-valid md-default-theme ng-dirty ng-valid-parse ng-touched md-checked" tabindex="0" aria-checked="true" aria-invalid="false" style="">
<div class="md-container" md-ink-ripple="" md-ink-ripple-checkbox="">
<div class="md-icon"></div>
<div class="md-ripple-container"></div>
</div>
</md-checkbox>
<div ng-transclude="" class="md-label" style="display: inline-block;">
<span class="ng-scope">
This label should be editable
</span>
</div>
</div>
Modify the css class md-checkbox, note the display value and the width value.
md-checkbox {
box-sizing: border-box;
display: inline;
margin: 8px;
white-space: nowrap;
cursor: pointer;
outline: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
padding-left: 18px;
padding-right: 0;
position: relative;
line-height: 26px;
min-width: 18px;
min-height: 18px;
width: 18px;
}
I am developing an app using onsen ui and angular js. Lets say I have 3 html files(physical) not the ons-template one on the same page. How can I make a header of menu that will appear on all the three pages.
Here is an example with ons-navigator and ons-toolbar. You can add a footer in the same way, although a little css adjustment will be needed.
ons.bootstrap()
.back-button-icon{
vertical-align: top;
background-color: transparent;
height: 44px;
line-height: 44px;
font-size: 36px;
margin-left: 8px;
margin-right: 2px;
width: 16px;
display: inline-block;
padding-top: 1px;
}
.back-button-text{
vertical-align: top;
display: inline-block;
line-height: 44px;
height: 44px;
}
ons-toolbar ~ ons-navigator .page__content{
margin-top: 44px;
}
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsen-css-components.css" rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/css/onsenui.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.6/build/js/onsenui.min.js"></script>
<ons-toolbar>
<div class="left">
<div class="toolbar-button" ng-show="navi.getPages().length > 1" ng-click="navi.popPage()">
<i class="ion-ios-arrow-back back-button-icon"></i><span class="back-button-text">Back</span>
</div>
</div>
<div class="center">Title</div>
<div class="right"></div>
</ons-toolbar>
<ons-navigator var="navi" page="page1.html"></ons-navigator>
<script type="text/ng-template" id="page1.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page1
<ons-button onclick="navi.pushPage('page2.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page2.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page2
<ons-button onclick="navi.pushPage('page3.html')">PushPage</ons-button>
</div>
</ons-page>
</script>
<script type="text/ng-template" id="page3.html">
<ons-page>
<div style="text-align:center; margin-top:10px">
Content of Page3
</div>
</ons-page>
</script>
I'm new to Angular and need to repeat objects until the data is exhausted.
Here's the code snippet that I wish to repeat.
<!-- Start box content -->
<div class='span3 box box-nomargin' style="margin-left: 0px !important;">
<!-- Now starts the box content -->
<div class='box-header red-background'>
<div class="title text-center span12" style="font-weight: 600;">Skyfall</div>
<div class="normal text-center span12 utilMonSmallTitle">Network: <span class="utilMonSmallText">My First Network</span></div>
<div class="normal text-center span12 utilMonSmallTitle">Site: <span class="utilMonSmallText">My Site 388_ascdaaf298</span></div>
</div>
<div class='box-content text-center' style="padding-bottom: 0px;">
<!-- Start box content Header -->
<div class="title span4 text-left" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Hardware</div>
<div class="title span3 text-center" style="color: black; padding-left: 20px; font-size: 14px; font-weight: 600; margin-top: -10px;">
<i id="icon508Compliant" class="icon-remove-sign" style="font-size: 40px; color: red;"></i>
<!-- The icons are: icon-remove-circle, icon-warning-sign, icon-ok-circle -->
</div>
<div class="title span4 text-right" style="color: black; padding-left: 5px; font-size: 14px; font-weight: 600; margin-top: -5px;">Software</div><br><br>
<!-- End box content Header -->
<!-- Start box content body -->
<div class="row-fluid">
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="hwVal1">{{hardwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="hwVal2">{{hardwareAlerts[0].warning}}</span>
</span>
</div>
<div class="span6">
<span style="font-size:24px; font-weight: bold; border-right: solid black 1px; margin-bottom: 2px; padding-right: 5px;">
<span id="swVal1">{{softwareAlerts[0].critical}}</span>
</span>
<span style="font-size:24px; font-weight: bold; padding-left: 8px;">
<span id="swVal2">{{softwareAlerts[0].warning}}</span>
</span>
</div>
</div>
<!-- End box content Body -->
<!-- Start box content footer buttons -->
<div class="row-fluid">
<button class="btn btn-small btnBoxLeft"><i class="icon-warning-sign">View Critical</i></button>
<button class="btn btn-small btnBoxRight"><i class="icon-warning-sign">View All</i></button>
</div>
<!-- End box content footer buttons -->
</div>
<!-- Now ends the box content -->
</div>
<!-- End box content -->
So that whole snippet of code will REPEAT within a FLATTY Bootstrap "ROW" until there's no more data.
I'm used to Handlebars.js but Angular is a little tricky.
It needs to repeat based on the number of NETWORKS there are.
For instance: If there are 10 networks, the above code should repeat 10 times displaying 10 BOXES.
I have my controllers and directives code working... just need to understand the "REPEAT" stuff.
Thank you all.
You need to use ng-repeat
<div class='span3 box box-nomargin' style="margin-left: 0px !important;" ng-repeat="object in objects">
Where in the above snippet objects would be your ARRAY of objects. If you only have an object and you wish to iterate keys, use ng-repeat="(k, v) in objects". (Where k is your property name and v is the value of said property)
To display the data, simply reference the property within the repeater where you wish to use it via:
{{object.PROPERTY}}
Or, if using the (k, v) in objects simply do {{k}} or {{v}}