I have a button modal that I need move it to the right side, I have tried with bootstrap classes as :
float:right, mt:20
and they did not work. My code is this one :
<b-modal ref="my-modal" hide-footer title="Using Component Methods" v-model="modalShow">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
</b-modal>
How can I fix it? Thanks
Let me help. You can use the position with top and right direction. I sai sorry if i wrng
app = new Vue({ //not vue, it is Vue
el: "#app",
data: {
myclass: ['myclass']
},
methods: {
showModal: function(){
this.$refs.myModalRef.show()
}
}
})
.myclass > div {
position:absolute !important;
top: -10px !important;
right: -10px !important;
background-color:yellow !important;
}
.myclass > .modal-dialog > .modal-content {
background-color:red !important;
}
.b_button{
position:absolute !important;
top: 10px !important;
right: 10px !important;
}
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="https://unpkg.com/vue#2.5.16/dist/vue.js"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-button #click="showModal" class="b_button">
Open Modal
</b-button>
<b-modal ref="myModalRef" :modal-class="myclass" size="lg">
<h2>Test</h2>
</b-modal>
</div>
Related
I'm using owl carousel latest version and I have a little problem.
I have 3 images with different size.
My main div that is named "mydiv" must have must 614px width.
So, now, if you can see, looking at the images you can see there is a problem with the height (first has more width, second has more height and last one is a little small), there is too much space between the image and the bottom of the page.
How can I fix or How to fill the empty space?
$(document).ready(() => {
var owl = $('.mydiv').owlCarousel({
items: 1,
dots: true,
nav: true,
loop: false,
autoplay: false,
autoplayHoverPause: true,
mouseDrag: false,
});
})
body { background-color: green; }
.owl-prev, .owl-next {
font-size: 65px !important;
}
.owl-carousel .owl-item img {
width: 614px !important;
object-fit: cover;
}
.mydiv {
border: 2px solid red;
width: 614px !important;
}
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<body>
<div class="mydiv owl-carousel">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" alt="cristiano post" class="newsfeed-show-img-display">
<img src="https://i.pinimg.com/originals/0b/3a/56/0b3a56ce1b5f0433f15a11115182b900.jpg" alt="cristiano post" class="newsfeed-show-img-display">
<img src="https://i.pinimg.com/170x/cd/b2/07/cdb207efa5fb886defac79b7ac646f93.jpg" alt="cristiano post" class="newsfeed-show-img-display">
</div>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- OWL CAROUSEL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
</body>
</html>
You can set owl-stage display as flex and then target images for 100% height.
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item img {
width: auto;
height: 100%;
}
$(document).ready(() => {
var owl = $('.mydiv').owlCarousel({
items: 1,
dots: true,
nav: true,
loop: false,
autoplay: false,
autoplayHoverPause: true,
mouseDrag: false,
});
})
body { background-color: green; }
.owl-prev, .owl-next {
font-size: 65px !important;
}
.owl-carousel .owl-stage {
display: flex;
}
.owl-carousel .owl-item img {
width: 614px !important;
object-fit: cover;
height: 100%;
}
.mydiv {
border: 2px solid red;
width: 614px !important;
}
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css?">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" integrity="sha512-tS3S5qG0BlhnQROyJXvNjeEM4UpMXHrQfTGmbQ1gKmelCxlSEBUaxhRBj/EFTzpbP4RVSrpEikbmdJobCvhE3g==" crossorigin="anonymous" />
<body>
<div class="mydiv owl-carousel">
<img src="https://wallpapercave.com/wp/wp5405231.jpg" alt="cristiano post" class="newsfeed-show-img-display">
<img src="https://i.pinimg.com/originals/0b/3a/56/0b3a56ce1b5f0433f15a11115182b900.jpg" alt="cristiano post" class="newsfeed-show-img-display">
<img src="https://i.pinimg.com/170x/cd/b2/07/cdb207efa5fb886defac79b7ac646f93.jpg" alt="cristiano post" class="newsfeed-show-img-display">
</div>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
<!-- OWL CAROUSEL -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" integrity="sha512-bPs7Ae6pVvhOSiIcyUClR7/q2OAsRiovw4vAkX+zJbw3ShAeeqezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"></script>
</body>
</html>
I am trying to identify each element of a v-for directive with a unique ID, so I can access the HTML object with the ID and change its CSS.
Currently, this is my HTML with Vue.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<script type="text/javascript" src="assets/js/vue#2.6.12/dist/vue.js"></script>
<title>remoteProto</title>
<style type="text/css">
html,
.switch {
white-space: nowrap;
display: inline-block;
padding: 30px;
background-color: rgb(255, 223, 223);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
top: 24px;
right: 194px;
transform: rotate(0deg);
}
.switch.closed {
background-image: url(assets/image/switch-closed.svg);
background-position: 0px 0px;
}
.switch.opened {
background-image: url(assets/image/switch-opened.svg);
background-position: 0px -7.5px;
}
</style>
</head>
<div id="app">
<fieldset style="background-color: rgb(181, 207, 209);">
<h1>simTest server</h1>
<hr>
<div class="circuitplan">
<div v-for="(val, key) in switchObj" v-bind:key="key">
<div>{{ key }}
<span class="switch" v-bind:class="{ closed: val==='closed', opened: val==='opened' }" #click="onSwitchClick(key)" ></span>
</div>
</div>
</div>
</fieldset>
</div>
<script>
const app = new Vue({
el: '#app',
data () {
return {
ws: null,
idCount: 1,
url: 'ws://localhost:3000',
switchObj: {
/*'K1': 'opened',
'K2': 'opened',
'K3': 'opened'
*/
},
sentObj: {},
}
},
})
</script>
</html>
How can I change the CSS of this specific ID?
Let's say "key" is named the following: "K1", "K2", "K3", ...
The class is "switch".
I know this is not right but to illustrate what I mean, I would like to have something like this:
switch.K1 {other position than e.g. K2}
switch.K2 {...}
Also, the switch is bound to close and opened, see the CSS.
I guess my syntax of the HTML reveals me being a noob. Anyway, I hope you guys can help me, thank you!
You have two choices :
1- defining an unique for each element then define its style like :
K1{
...
}
K2{
...
}
...
Kn{
...
}
template (key represents KEY1 KEY2 ...):
<div v-for="(val, key,index) in switchObj" v-bind:id="key">
2- to define a data property that contains the style of each element and bind it the element using the key:
url: 'ws://localhost:3000',
style:{
K1:{
color:'red'
},
K2:{
color:'geen'
}
}
in template use inline style binding :
<div v-for="(val, key,index) in switchObj" v-bind:style="style[key]">
I have a problem when animating ng-if with ngAnimate. I have two different containers which replace each other, by fadeInLeft the new element and fadeOutRight the old element. However, during the animation the second container is moved down.
Here is a simplified example of my problem (display in full-screen mode to see the exact problem):
var app = angular.module("MyApp", ['ngAnimate']);
app.controller("MyController", function($scope, $interval) {
$scope.show = true;
$interval(function() {
$scope.show = !$scope.show;
}, 3000);
});
.box {
height: 200px;
}
.box.ng-enter {
animation: fadeInLeft 1.0s;
}
.box.ng-leave {
animation: fadeOutRight 1.0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" />
<div ng-app="MyApp" ng-controller="MyController">
<div ng-if="show" class="box" style="background:red"></div>
<div ng-if="!show" class="box" style="background:blue"></div>
</div>
That is the default behavior of <div> block level elements to occupy their own space. You can add position: absolute to the box class so that it comes out of the normal document flow.
Also add width: 100% since the width of the absolutely positioned div is limited to the content.
In order to limit the positioning inside this area, make sure you add position: relative to the parent element.
Updated Plunker
var app = angular.module("MyApp", ['ngAnimate']);
app.controller("MyController", function($scope, $interval) {
$scope.show = true;
$interval(function() {
$scope.show = !$scope.show;
}, 3000);
});
.box {
height: 200px;
position: absolute;
width: 100%;
}
.box.ng-enter {
animation: fadeInLeft 1.0s;
}
.box.ng-leave {
animation: fadeOutRight 1.0s;
position: absolute;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.7/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.css" />
<div ng-app="MyApp" ng-controller="MyController">
<div ng-if="show" class="box" style="background:red"></div>
<div ng-if="!show" class="box" style="background:blue"></div>
</div>
I wrote the following jinja2 html file for my flask app to render:
<!DOCTYPE html>
<html lang='en-US'>
<head>
<style type='text/css' media='screen'>
body {
background-image: url( {{ url_for('static', filename='img/background.png') }} );
}
textarea {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<script src={{ url_for('static', filename='script/CodeMirror/lib/codemirror.js') }}></script>
<link rel="stylesheet" href={{ url_for('static', filename='script/CodeMirror/lib/codemirror.css') }}>
</head>
<body>
<title>icc eval webapp</title>
<textarea id="text" rows="4" cols="10"></textarea>
<script>
var codeMirror = CodeMirror.fromTextArea(document.getElementById("text"), {
value: '(32.3333333333+1.6666667)/7-0.8571426+(5^2*2)-12.0000002619',
lineNumbers: true,
lineWrapping: true,
fixedGutter: true,
showCursorWhenSelecting: true,
cursorHeight: 0.85
});
codeMirror.setSize(800, 400);
</script>
</body>
</html>
Unfortunately, I cannot seem to get the to center. It keeps showing up to the left of the page, and I was hoping for it to be center, with a wide margin on either side and above it. Any help would be appreciated.Thanks.
Wrap tour textarea in div
<div class="test">
<textarea id="text" rows="4" cols="10"></textarea>
</div>
css:
.test {
width: 100%;
text-align: center;
margin: 0 auto;
}
I'm trying to add the textAngular toolbar at bottom of the texteditor-div. Right now it renders at the top.
I've been trying playin around with the css alot but with no sucess.
JS:
var app = angular.module('myApp', ['textAngular']);
app.controller('AppCtrl', function($scope, $http) {
$scope.htmlcontent = "<h2>New Note...</h2>";
$scope.save =function() {
console.log( $scope.htmlcontent );
$http.post("/Home/SaveWNote", { jsonData: $scope.htmlcontent });
}
});
HTML:
<!doctype html>
<head>
<meta charset="utf-8">
<title>Testing</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/rangy/1.2.3/rangy-core.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.14/angular.min.js"></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular-sanitize.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/textAngular/1.2.0/textAngular.min.js'></script>
<script src="script.js"></script>
<link rel="stylesheet" href="style.css"/>
</head>
<body ng-app="myApp">
<div ng-controller="AppCtrl">
<div text-angular ng-model="htmlcontent "></div>
<button ng-click="save()">Save</button>
<br/>
Your htmlcontent <pre>{{htmlcontent}}</pre>
</div>
</body>
</html>
PREVIEW:
http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
You can use the attribute ta-target-toolbars on the text-angular directive to have it register with an alternate toolbar:
<div text-angular ta-target-toolbars="toolbar" ng-model="htmlcontent"></div>
<div text-angular-toolbar class="toolbar" name="toolbar"></div>
Here is an example: http://plnkr.co/edit/B2NU8RpUlSrKVFAlpOU2?p=preview
The relevant lines of code involcing ta-target-toolbars from textAngular are available here: https://github.com/fraywing/textAngular/blob/64d31658186bb9bb54c07f7c719d73a472d60b11/src/textAngular.js#L642-L656
you can play a bit with css to move toolbar under text area
please see here http://plnkr.co/edit/Wu1mc0v5bbuoLkvvDb9V?p=preview
.ta-editor {
height: 400px;
overflow: auto;
font-family: inherit;
font-size: 100%;
margin: 20px 0;
position: absolute;
top: 0;
width: 100%;
}
.editor-wrapper {
position: relative;
height: 470px;
}
.ta-toolbar {
position: absolute;
bottom: 0;
width: 100%;
}