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>
Related
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>
I am trying to put some content into a flex layout row and I noticed that
the row resizes in width with his content
Instead I try to make the width of the row static, so that every child, which is bigger, breaks.
CodeMirror editor is just used to illustrate the problem of having a bigger and/or smaller children in that row.
Take a look at this Fiddle
#main {
display: flex;
justify-content: space-between;
height: 100vh;
.flex {
width: 100%;
&:nth-child(2) {
background: red;
}
#wrapper #item {
background: blue;
}
}
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js">
<script type="text/javascript" src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js">
<script type="text/javascript">
$(document).ready(function(){
var ce = document.getElementById("item");
var myCodeMirror = CodeMirror(function(node){ce.parentNode.replaceChild(node, ce);}, {
value: "function myScript(){return 100;}",
mode: "javascript",
lineSeparator: null,
theme: "default", // theme directory
indentUnit: 2,
smartIndent: true,
tabSize: 2,
indentWithTabs: false,
electricChars: true,
extraKeys: null,
lineWrapping: false,
lineNumbers: true,
firstLineNumber: 1,
scrollbarStyle: "overlay",
inputStyle: "contenteditable",
readOnly: false, // also "nocursor"
showCursorWhenSelecting: false,
lineWiseCopyCut: true,
undoDepth: 200,
historyEventDelay: 1250,
autofocus: true
});
});
</script>
<div id="main">
<div class="flex">ABC</div>
<div class="flex">
DEF
<div id="wrapper">
<div id="item">
</div>
</div>
</div>
<div class="flex">GHI</div>
</div>
How would I do that?
You need to use JavaScript in this. Just get the width of the middle flex element (in my case its class is .codemirror) & then apply that width to itself. Like:
// Used setTimeout to get the plugin initialized
setTimeout(function() {
var codemirror_width = $('.flex.codemirror').width();
$('.flex.codemirror').css('width', codemirror_width);
}, 100);
Have a look at the working snippet below:
setTimeout(function() {
var codemirror_width = $('.flex.codemirror').width();
$('.flex.codemirror').css('width', codemirror_width);
}, 100);
#main {
display: flex;
justify-content: space-between;
height: 100vh;
}
#main .flex {
width: 100%;
}
#main .flex:nth-child(2) {
background: red;
}
#main .flex #wrapper #item {
background: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/mode/javascript/javascript.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/addon/scroll/simplescrollbars.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.20.2/codemirror.min.css" rel="stylesheet"/>
<script type="text/javascript">
$(document).ready(function(){
var ce = document.getElementById("item");
var myCodeMirror = CodeMirror(function(node){ce.parentNode.replaceChild(node, ce);}, {
value: "function myScript(){return 100;}",
mode: "javascript",
lineSeparator: null,
theme: "default", // theme directory
indentUnit: 2,
smartIndent: true,
tabSize: 2,
indentWithTabs: false,
electricChars: true,
extraKeys: null,
lineWrapping: false,
lineNumbers: true,
firstLineNumber: 1,
scrollbarStyle: "overlay",
inputStyle: "contenteditable",
readOnly: false, // also "nocursor"
showCursorWhenSelecting: false,
lineWiseCopyCut: true,
undoDepth: 200,
historyEventDelay: 1250,
autofocus: true
});
});
</script>
<div id="main">
<div class="flex">ABC</div>
<div class="flex codemirror">
DEF
<div id="wrapper">
<div id="item">
</div>
</div>
</div>
<div class="flex">GHI</div>
</div>
Hope this helps!
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%;
}
I am offically stumped. There is obvioulsy an easy solution for this, but maybe I just can't see it.
Basically I have a content div with 2 main divs—leftSide and rightside—which I want to display inline. Each side contains other divs. No matter what I try the rightSide div always resorts to displaying under the leftSide div.
HTML
<div id="leftSide">
<h6>MERCHANDISE</h6><img src="images/merch.gif" height="220" width="330" border="0" alt="Organ Thieves - Merch Slideshow"/>
<div id="twitter">
<div class=hr></div>
<h6>FOLLOW US</h6>
<script charset="utf-8" src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 4,
interval: 30000,
width: 330,
height: 250,
theme: {
shell: {
background: '#525252',
color: '#ffffff'
},
tweets: {
background: '#000000',
color: '#ffffff',
links: '#b51d1d'
}
},
features: {
scrollbar: false,
loop: false,
live: false,
behavior: 'all'
}
}).render().setUser('OrganThieves').start();
</script>
</div><!--end of twitter-->
</div><!--endof leftside-->
<div id="rightSide">
<div id="gigs">
<script type="text/javascript">
var bcGigWidgetWidth=500;
var bcGigWidgetMaxHeight=500;
var bcGigWidgetBackgroundColor="333333";
var bcGigWidgetTextColor="ffffff";
var bcGigWidgetLinkColor="eaeaea";
var bcGigWidgetLineColor="7d7058";
</script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/javascripts/giglistings.js"></script>
<script type="text/javascript" src="http://organthieves.bandcentral.com/gigs/export.js"></script>
</div><!--end gigs-->
</div><!--end of rightSide-->
</div><!--end content-->
CSS
#content{
position: relative;
width: 900px;
}
#leftSide{
width: 330px;
position: relative;
}
#twitter{
position: relative;
width:330px;
}
#rightSide{
position: relative;
width: 570px;
background-color: #339;
height:400px;
display: inline;
}
#gigs{
float: right;
width: 500px;
position: relative;
}
#leftSide and #rightSide need float:left; Also, please make sure their parent element is wide enough for both of them.
check it your code here, float left and right can be used to arrange div horizontally.
http://jsfiddle.net/SfHrb/