After reading the docs
https://tailwindcss.com/docs/background-repeat
and changing config.tailwind.js to:
theme: {
...
extend: {
...
backgroundImage: {
"footer-sierpinski": "url('/bg-default.svg'), url('/bg-inverted.svg')",
"footer-sierpinski-default": "url('/bg-default.svg')",
"footer-sierpinski-inverted": "url('/bg-inverted.svg')",
},
then in a component using:
<div class="h-32 bg-repeat-round bg-footer-sierpinski">
produces:
How can the config file be changed so that the images are position to the left and to the right, respectively?
Variations tried:
<div class="grid grid-cols-2">
<div class="h-32 bg-repeat-round bg-footer-sierpinski-default"></div>
<div class="h-32 bg-repeat-round bg-footer-sierpinski-inverted"></div>
</div>
this fills the entire footer with triangles but they are not alternating which makes sense since each div has one background image and each is in its own column.
<div class="h-32 bg-repeat-round bg-[url('/bg-default.svg'),_url('/bg-inverted.svg')] bg-[left,_right]"></div>
same as first (bg-[left,_right] is ignored).
Other variation tried; add both triangles inside the background but this produces ugly spacing and overlapping images on different displays.
Sandbox here:
https://codesandbox.io/s/svg-background-image-x0-forked-c7u4t1?file=/style.css:122-127
Related
I'm trying to build this split layout with Tailwind and React:
But after countless attempts, I only managed to achieve this layout. Using the exact same styling with an image instead of a video works, but I'm unaible to scale / stretch the video container.
I'm under the assumption that this might be related to the width and height properties of the ReactPlayer component, but every attempt to set these at different percentages in order to improve the layout failed.
<div className="bg-green w-full md:w-1/2 order-first lg:order-last md:order-last">
<ReactPlayer
url= {TennisVideo}
className="object-contain h-screen md:h-screen lg:h-screen xl:h-screen w-full "
width='100%'
height='100%'
playing={true}
muted={true}
loop={true}
config={{ youtube: { playerVars: { disablekb: 1 } } }}>
</ReactPlayer>
</div>
Can anyone point me in the right direction?
https://codesandbox.io/s/sharp-hugle-vpuvr?file=/src/App.js
I would imagine that object-contain is a culprit, and should instead be object-cover. More info in the docs here
I have a laptop with 15.6'' screen and an external monitor with 23'' screen. I have a .vue component with this code:
<template>
<div class="bg-red-500 sm:bg-green-500 md:bg-blue-500 lg:bg-pink-500 xl:bg-teal-500">
Hello
</div>
</template>
It shows this when I view it on laptop screen:
the teal color which corresponds to the xl screen size.
The div has the same teal color when I move it to the external monitor.
However the difference between the screen sizes is significant. If both the 15.5'' and 23'' are considered to be xl, how does one achieves better responsiveness?
For instance, I have a navbar with several navbar items. When I view it on the laptop screen, I need to make the padding px-2 small to get them all to fit:
However on the 23'' screen I have space to add more padding/margin, but can't do it because the changes would affect the laptop view as well:
This is the code of the NavbarItem.vue:
<template>
<li class="flex-1 md:flex-none md:mr-3
sm:text-xs md:text-xs lg:text-xs xl:text-xs
border rounded-full">
<a class="inline-block py-2 lg:px-5 xl:px-2
text-white no-underline" href="#">
{{text}}
</a>
</li>
</template>
<script>
export default {
props: ['text']
}
</script>
I tried adding lg:px-5 but it doesn't affect anything, unless I remove xl:px-2. When there's xl:px-2, the lg class is ignored.
xl has a min-width of 1280px. Check breakpoints.
Your 15.6" and 23" both screens falls under minimum of 1280px. I recommend adding additional screen.
// tailwind.config.js
module.exports = {
theme: {
screens: {
'xxl': {'min': '1920px'}, // this is to support your 23". Make sure your 15.6" screen is less than the min px value passed here
},
}
}
Then your class="inline-block py-2 lg:px-5 xl:px-2 xxl:px-4"
Give this a try & keep me posted in the comments below. Cheers!
I'm using the bootstrap-vue overlay on a page that has long content scrolled via the browser window.
<b-overlay :show="loading">
The overlay correctly covers all of the content, even the part below the viewport, but the overlay's built-in spinner is centered on the content rather than the viewport, so the spinner ends up near or below the bottom of the viewport when the content is long enough.
I've tried custom content via a slot, like this...
<b-overlay :show="loading">
<template v-slot:overlay>
<div style="???" class="text-center">
<p style="???">Make me a spinner and center me on the viewport</p>
<b-button
</div>
</template>
...with dozens of ideas for style="???", including position:absolute with different tops, including top=50vh, including !important strewn around, etc., but the content doesn't budge.
// Note that this snippet doesn't run, because I don't see a way to get
// bootstrap-vue via CDN
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'Hello Vue!',
messages: []
}
},
mounted() {
for (let i=0; i<50; i++)
this.messages.push(i)
},
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<b-overlay :show="true">
{{ message }}
<!-- long content below extends the overlay size -->
<!-- this moves the spinner down and off the viewport -->
<ul>
<li v-for="m in messages" :key="m">{{m}}</li>
</ul>
</b-overlay>
</div>
I think key to solving this is finding the CSS selector that allows me to change the spinner's position to "fixed" as opposed to "absolute" which seems to be what bootstrap generates.
To get spinner on center of screen you need to make it as direct child of body.
If it is nested it will have restrict area inside immediate parents area.
Try to add that separately or once your DOM ready detach overlay and append to body tag.
I ran into the same issue. Adding this line of CSS on the component resolved it for me:
<style>
.position-absolute {
position: fixed !important;
}
</style>
Note: make sure to not include the scoped keyword in your <style> tag, as this will not work for Bootstrap classes.
I have a series of images of different size (call it set A) that I am arranging next to each other. Upon press of a button, those images get replaced by a much larger image in original size. I'd like to make sure the replaced image adheres to the original image size. I've tried to apply various container width tricks, but so far have failed.
I've set up a runnable demo here https://stackblitz.com/edit/ionic-au2pcv (code is in home.html and home.ts in pages directory)
If you press the "Switch" button, the images get replaced, as does the size (which I want to avoid)
(please excuse inline CSS styling)
The code:
My template
<ion-content padding>
<div *ngFor="let image of images">
<!-- the reason for this div is to force the placeholder image to this size -->
<!-- doesn't seem to work... -->
<div [ngStyle]="{'width':image.w, 'height':image.h, 'float':left}">
<img [src]="showImage?image.src:placeholder" style="float:left;max-width:100%; max-height:100%;width:auto;height:auto;" />
</div>
</div>
<div style="clear:both">
<button ion-button (click)="toggleImage()">switch</button>
</div>
</ion-content>
The TS:
import { NgStyle } from '#angular/common';
images = [{
src: 'http://lorempixel.com/300/200/',
w:300,
h:200,
},
{
src: 'http://lorempixel.com/100/100/',
w:100,
h:100,
},
{
src: 'http://lorempixel.com/200/80/',
w:200,
h:80,
}];
placeholder = "http://via.placeholder.com/1000x1000";
showImage:boolean = true;
toggleImage() {
this.showImage = !this.showImage;
}
Your demo doesn't show images. Anyways, to acheive this, you don't have to use containers and all other things. It can be acheive by using simple css. Before doing this, make sure to fix the size of the image. for example if you want the 1 image size to be 30% and height 100% and then set object-fit property of the css to be cover. Below is the quick example:-
.image{
width:30%;
height:100%;
object-fit:cover;
}
<img src="../image_path" class="image"/>
Thanks
HTML:
<a href="#" data-container="body" data-id="54" data-toggle="popover" data-placement="left">
Popover on left
Javascript:
$('*[data-id]').mouseenter(function(event) {
var e=$(this);
var content = '<div class="row"><div class="col-xs-12"><div class="col-xs-8">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1</div><div class="col-xs-4">Element 2</div></div>';
e.popover({html:true,placement:'bottom', animation: false,
delay: { show: 1500, hide: 100 }, content: content}).popover('show')
});
It works fine but only if string in content contains spaces. If theres no spaces text overlaps with second div.
JS Fiddle:
http://jsfiddle.net/9Nt48/
How i can fix this?
This is the problem with continuous text, CSS will automatically place it in next line for you if it seems to overlap with the other divs but it doesn't have much of a choice when you don't give a space, this is because it doesn't know when to break, so you can specify it like:
.popover-content {
word-wrap:break-word;
}
Since your columns already have the width specified, if the text inside the div exceeds it, break it at that point.
DEMO
This is because your markup is wrong. A row in Bootstrap is what nests your columns. You have nested columns inside other columns, which is not correct.
<div class="row">
<div class="col-xs-12">
Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1Element1Element1 Element1Element1Element1Element1
</div>
</div>
You also only need to use row and col-x-x classes is if you want to use columns in the tooltip. So you don't really have to use them if you are displaying simple text.
Finally, if you want multiple rows of text, just a p element to split the text.
Caveat: I'm not actually sure you can use the grid inside tooltips. So you might be better off using simple text without columns...