How can I align Vuetify checkbox to the right?
<div style="height:20px; *alignment: right*">
<v-checkbox label="checkbox"></v-checkbox>
</div>
I think the above settings are invalid, then How can I?
Thanks for help in advance
With flexbox, you can do something like this:
<div style="width: 200px; border: 1px solid black; display: flex; justify-content: flex-end">
<div style="width: 50px; height: 50px; background-color: red;"></div>
</div>
So your code would look something like this:
<div style="height:20px; display: flex; justify-content: flex-end">
<v-checkbox label="checkbox"></v-checkbox>
</div>
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
I am trying to fit in a flex container with margins on both sides inside a grid container, but at the smallest viewport width the flex container leaks out. I have added borders to the respective divs to show where its leaking.
I have also added a demo to show my problem: https://codesandbox.io/s/9z49m3ny0p
If the demo isn't clear, take a look at these screenshots:
As you see from the above screenshots, that the red border stays within the viewport at all times but the blue bordered container spills out.
Home.js
<div id="rightContainer">
<div id="editorContainer">
<Notepad />
</div>
<div id="notesCardContainer">
<NoteCard />
<NoteCard />
</div>
</div>
Home.css
#editorContainer {
display: grid;
width: 100%;
position: relative;
border: 1px solid red;
}
#notesCardContainer {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
flex-direction: row;
justify-content: space-evenly;
padding-bottom: 60px;
}
And Notepad.js :
<div className="editorInnerContainer">
<div className="editorTop">
<input
type="text"
id="noteTitle"
value="Some Title"
disabled={true}
/>
<div id="tools">
<a href="" title="Edit this note">
<i className="fas fa-pencil-alt" />
</a>
<a href="" title="Delete this note">
<i className="fas fa-trash" />
</a>
<a href="" title="Download this note">
<i className="fas fa-download" />
</a>
<a href="" title="Share this note">
<i className="fas fa-share-square" />
</a>
</div>
</div>
</div>
Snippet from Notepad.css
.editorInnerContainer {
display: flex;
flex-direction: column;
background-color: var(--white-100);
padding: 20px;
margin-left: 20px;
margin-right: 20px;
margin-top: 50px;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
border: 1px solid blue;
}
Take a look at this:
https://codesandbox.io/s/2v0o67w4kn
#noteTitle {
flex: 1;
height: 60px;
font-size: 18px;
line-height: 17px;
font-weight: 700;
border: none;
color: var(--black);
border: 2px solid sandybrown;
/* add width */
width: 100%;
max-width: 100%;
}
If you want to adjust the border issue as well, set the width to 100% - the border sizes added together via calc: https://codesandbox.io/s/l7rk0zop69
#noteTitle {
width: calc(100% - 6px);
max-width: calc(100% - 6px);
}
Below how it looks :
Below What I would like to have :
or if getNumber return more for example
(so basicaly the circle are always align center whatever number my getNumber return)
Below the AngularJS code :
<div class="w3-container">
<span ng-repeat="i in getNumber(data.numberOfState) track by $index" style="margin-right:10%;">
<div id="advanced" class="circle" ></div>
</span>
<div id="barre"></div>
</div>
Below the CSS code :
.circle {
border-radius: 50%;
width: 18px;
height: 18px;
background: RoyalBlue;
display: inline-block;
}
#barre{
width: 100%;
height: 3px;
background: RoyalBlue;
margin-top: -17px;
}
#advanced {
width: 18px;
height: 18px;
/* TODO */
}
.circleActive {
border-radius: 40%;
width: 15px;
height: 15px;
background: RoyalBlue;
display: inline-block;
}
How to align center the circle on the bar ?
right: 50%;
left: 50%;
position: absolute;
With this it works but since my circle are iterate by my javascript there are showing at the same coordinated, so I can see only one.
Add text-align:center; to .circle parent
.w3-container {text-align:center;}
Here's small snippet for you
.parent {text-align:center;}
.child {height:14px; width:14px; background:royalblue; display:inline-block;}
<div class="parent">
<span class="child"></span>
</div>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>
<div class="parent">
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
<span class="child"></span>
</div>
This is easy if you are using a flexbox - you only need to give:
display:flex;
width:100%;
justify-content: space-around;
Some suggestions though:
Using id inside an ng-repeat is wrong, as you will then get multiple ids which is invalid.
barre is omitted and using an after psuedo element just for more markup readability.
The line (using after) is absolutely positioned with respect to the flexbox
See demo below:
.circle {
border-radius: 50%;
width: 18px;
height: 18px;
background: RoyalBlue;
display: inline-block;
}
.wrapper {
display:flex;
width:100%;
justify-content: space-around;
position:relative;
}
.wrapper:after {
position:absolute;
content:'';
display:block;
width: 100%;
top:7px;
height: 3px;
background: RoyalBlue;
}
.advanced {
width: 18px;
height: 18px;
}
.circleActive {
border-radius: 40%;
width: 15px;
height: 15px;
background: RoyalBlue;
display: inline-block;
}
<div class="w3-container">
<div class="wrapper">
<div class="circle advanced" ></div>
<div class="circle advanced circleActive" ></div>
<div class="circle advanced" ></div>
</div>
</div>
You can use display: flex; for container. To center elements add justify-content: center;.
.line {
display: flex;
justify-content: center;
margin: 50px;
border-top: 2px solid blue;
}
.circle {
flex: 0 0 auto;
width: 20px;
height: 20px;
margin: 0 20px;
background-color: blue;
border-radius: 50%;
transform: translateY(-50%);
}
<div class="line">
<div class="circle"></div>
</div>
<div class="line">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="line">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
I'm using Angularjs in order to display some images in the DOM, and apply some style to them (dim the background). It seems I am unable to apply ng-style to the img tag. What is the reason to that?
Fiddle here.
HTML:
<div ng-controller="MyController">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
<div class="rel">
<img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" ng-style="{'background':'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('+post.link+')','background-size': 'cover'}">
<li class="del">button</li><li class="getLink">get link</li>
</div>
</div>
</div>
</div>
CSS:
.del{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
left: 0;
bottom: 0;
}
.getLink{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
right: 0;
bottom: 0;
}
.rel{
position: relative;
height: auto;
width: auto;
display: inline-block;
}
Please try the following:
HTML:
<div ng-controller="MyController">
<div class="row">
<div class="col-md-4 col-lg-4 col-sm-12 postCon" ng-repeat="post in posts">
<div class="rel">
<div class="cover-img">
<img src="{{post.link}}" alt="..." class="img-thumbnail" ng-click="test()" style="background:linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));background-image: url('{{post.link}}');background-size: cover">
</div>
<li class="del">button</li><li class="getLink">get link</li>
</div>
</div>
CSS:
.del{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
left: 0;
bottom: 0;
}
.getLink{
font-size: 15px;
color: black;
z-index: 10;
text-decoration: none;
padding: 5px 10px;
background-color: white;
position: absolute;
right: 0;
bottom: 0;
}
.rel{
position: relative;
height: auto;
width: auto;
display: inline-block;
}
.cover-img{
position:relative;
}
.cover-img:before{
content:'';
background: rgba(69, 71, 94, 0.53);
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
width:100%;
height:100%;
}
I don't think that how ng-style works. You can see example here and here.
Try this:
In html:
<img ng-style="yourStyle">
In controller:
$scope.yourStyle =
{
'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5))',
'background-size': 'cover'
}
Hope this help.
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;
}