I added Sign in with Google button from https://developers.google.com/identity/gsi/web/guides/personalized-button
The default style fills whole width and looks OK:
But if you have an account, it shows it in the context:
This context adds width to the element style inside of the iframe. I know that by spec Google button should be within 40-400px range. I wanted to make the page container max-width: 400px, but this button simply doesn't scale together with container.
Do I have to use JavaScript, to update the data-width property or is there a normal solution with CSS?
<div class="g_id_signin" data-width="400" />
Hack
I used data-width="328" and matched the container to have max-width: 328px
328px with padding can fit on a 360px phone screen (Moto G4, iPhone 6).
<script src="https://cdn.tailwindcss.com"></script>
...
<div class="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
<div class="w-full space-y-8" style="max-width: 328px">
<div class="flex flex-col gap-2">
<div
id="g_id_onload"
class="w-full"
style="display: none"
:data-client_id="clientID"
data-callback="handleGoogleCallback"
data-auto_prompt="false"
data-auto_select="true"
/>
<div
class="g_id_signin w-full"
data-type="standard"
data-size="large"
data-theme="outline"
data-shape="rectangular"
data-text="continue_with"
data-logo_alignment="center"
data-width="328"
/>
</div>
</div>
</div>
Proper Solution
Wait for Google to update their library. Don't expect it to happen soon.
Using Javascript you can just re-render this button over and over.
CSS:
#googleSignIn {
width: 100%;
max-width: 300px;
}
Javascript:
let googleSignInContainer = $("#googleSignIn");
let renderGoogleTimeout = 0;
window.addEventListener("resize", e => {
clearTimeout(renderGoogleTimeout);
renderGoogleTimeout = setTimeout(() => {
googleSignInContainer.html(""); // clear contents of Google button container
let w = googleSignInContainer.width(); // get current container's width
google.accounts.id.renderButton(
googleSignInContainer[0],
{
theme: "outline",
width: w,
}
);
}, 100);
})
I copied a typewriter effect that is created purely in CSS but the animation of the blinking caret is moving over the full width of the page, while it should stop at the end of the text. I have a code snippet here: https://codesandbox.io/s/currying-currying-20bko?file=/src/styles.css
Anyone suggestions to fix this issue?
You can wrap the paragraph text within a container and give it a width: max-content
App.js:
export default function App() {
return (
<div>
<p className="title">This piece of text is fixed</p>
<div className="typewriter-container"> <!-- Wrapper -->
<p className="typewriter">typewriter text</p>
</div>
</div>
);
}
CSS:
.typewriter-container {
width: max-content;
}
Demo:
Output:
https://imgur.com/a/YiSsr6h
I am trying to use the Next.js Image component with images that all have unique sizes. Their example states the image will stretch to the parent div width and height. I've tried wrapping them but don't know how to accommodate dynamic image sizes. I want to have a set width and the height to adjust to each respective proportion. TIA.
Here is my code (the images are coming from an array) -- since I don't have a height set nothing renders on the page. If i use Tailwind's h-auto it still does not display:
<div className="w-screen h-screen">
{allImages.allImages.map((image, i) => {
return (
<div className="relative w-100 md:w-5/6 lg:w-7/12" key={image}>
<Image priority src={`/${image}`} layout="fill" objectFit="cover" />
</div>
)})}
</div>
I found a solution in this article which seems to work.
<div className="image-container">
<Image src={path} layout="fill" className="image" />
</div>
SCSS
.image-container {
width: 100%;
> div {
position: unset !important;
}
.image {
object-fit: contain;
width: 100% !important;
position: relative !important;
height: unset !important;
}
}
I wrapped this in a component named <ResponsiveImage />. You can try other rules on the wrapper, such as position: relative.
You can use these props on the Image tag,
<div className="div-class">
<Image src={imageLink} layout="fill" objectFit="cover" />
</div>
and wrap the Image tag in a div, just as above. Now you can give width and height to the div with media queries and the image will use that space.
I'm trying to animate an element to full browser height when the user clicks on the top bar. The animation works, but once the (enter) animation is finished the container jumps back to zero height, while it's supposed to stay until the user clicks the close button.
How do I make the container stay 100vh when the animation is finished?
I tried adding height: 100vh; on the element, but by doing that the transition animation stopped working. (by removing the height, the animation works but the element disappears)
Not sure if it matters, but I changed v-if into v-show and also added a key on the container, but that didn't seem to make a difference.
Here's a link to my code. And to view the animation.
<!-- AboutMeComponent.vue -->
<template>
<div>
<div v-show="!extended" class="small-container" #click="extended = !extended">
<h4>
CLICK ME
</h4>
</div>
<ExtendTransition>
<div v-show="extended" key="1" class="main-container">
<div class="icon-container">
<a v-show="extended" href="#" #click="extended = !extended">
<font-awesome-icon icon="times"/>
</a>
</div>
</div>
</ExtendTransition>
</div>
</template>
<!-- ExtendTransition.vue -->
<template>
<transition appear name="extend" mode="out-in">
<slot></slot>
</transition>
</template>
<style lang="scss">
.extend-enter-active,
.extend-leave-active {
transition: 3s;
}
.extend-enter-to,
.extend-leave {
height: 100vh;
}
.extend-leave-to {
height: calc(20px + 1vw);
}
.extend-enter {
height: calc(40px + 3vw);
}
</style>
A transition only is applied while the transition is playing. Once the transition finished, all transition classes are removed. This means that your element must have the CSS you want it to have after the transition is finished. You can then use the transition classes to set the initial state and define the transition to get to that point, and from that point to the initial state.
The easiest way to solve this problem is by making ExtendTransition.vue the only component that worries about the transition, and using a wrapper that wraps the thing you want to extend.
<template>
<transition appear name="extend" mode="out-in">
<div class="extend-transition-wrapper" v-show="extended">
<slot></slot>
</div>
</transition>
</template>
<script>
export default {
props: {
extended: {
type: Boolean,
default: false
}
}
};
</script>
The only thing you then have to do is to set the default state of your wrapper:
.extend-transition-wrapper {
height: 100vh;
will-change: height;
position: relative;
}
In your ABoutMeComponent.vue you then use a prop to show and hide the content:
<ExtendTransition :extended="extended">
<div class="main-container">
<div class="icon-container">
<a v-show="extended" href="#" #click="extended = !extended">
<font-awesome-icon icon="times"/>
</a>
</div>
</div>
</ExtendTransition>
And finally you set .main-container to always have a height of 100%. Since we set the wrapper to have position: relative, this will force the main container to become the height of that element.
I want to create alternating 100% colored blocks. An "ideal" situation is illustrated as an attachment, as well as the current situation.
Desired setup:
Currently:
My first idea was to create an div class, give it a background color, and give it 100% width.
.block {
width: 100%;
background: #fff;
}
However, you can see that this obviously doesn't work. It's confined to a container area. I tried to close the container and that didn't work either.
The container class is intentionally not 100% width. It is different fixed widths depending on the width of the viewport.
If you want to work with the full width of the screen, use .container-fluid:
Bootstrap 3:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6"></div>
<div class="col-lg-6"></div>
</div>
<div class="row">
<div class="col-lg-8"></div>
<div class="col-lg-4"></div>
</div>
<div class="row">
<div class="col-lg-12"></div>
</div>
</div>
</body>
Bootstrap 2:
<body>
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
<div class="row">
<div class="span8"></div>
<div class="span4"></div>
</div>
<div class="row">
<div class="span12"></div>
</div>
</body>
QUICK ANSWER
Use multiple NOT NESTED .containers
Wrap those .containers you want to have a full-width background in a div
Add a CSS background to the wrapping div
Fiddles: Simple: https://jsfiddle.net/vLhc35k4/ , Container borders: https://jsfiddle.net/vLhc35k4/1/
HTML:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS: .specialBackground{ background-color: gold; /*replace with own background settings*/ }
FURTHER INFO
DON'T USE NESTED CONTAINERS
Many people will (wrongly) suggest, that you should use nested containers. Well, you should NOT.
They are not ment to be nested. (See to "Containers" section in the docs)
HOW IT WORKS
div is a block element, which by default spans to the full width of a document body - there is the full-width feature. It also has a height of it's content (if you don't specify otherwise).
The bootstrap containers are not required to be direct children of a body, they are just containers with some padding and possibly some screen-width-variable fixed widths.
If a basic grid .container has some fixed width it is also auto-centered horizontally.
So there is no difference whether you put it as a:
Direct child of a body
Direct child of a basic div that is a direct child of a body.
By "basic" div I mean div that does not have a CSS altering his border, padding, dimensions, position or content size. Really just a HTML element with display: block; CSS and possibly background.
But of course setting vertical-like CSS (height, padding-top, ...) should not break the bootstrap grid :-)
Bootstrap itself is using the same approach
...All over it's own website and in it's "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/
This is how you can achieve your desired setup with Bootstrap 3:
<div class="container-fluid">
<div class="row"> <!-- Give this div your desired background color -->
<div class="container">
<div class="row">
<div class="col-md-12">
... your content here ...
</div>
</div>
</div>
</div>
</div>
The container-fluid part makes sure that you can change the background over the full width. The container part makes sure that your content is still wrapped in a fixed width.
This approach works, but personally I don't like all the nesting. However, I haven't found a better solution so far.
There is a workaround using vw. Is useful when you can't create a new fluid container.
This, inside a classic 'container' div will be full size.
.row-full{
width: 100vw;
position: relative;
margin-left: -50vw;
left: 50%;
}
After this there is the sidebar problem (thanks to #Typhlosaurus), solved with this js function, calling it on document load and resize:
function full_row_resize(){
var body_width = $('body').width();
$('.row-full').css('width', (body_width));
$('.row-full').css('margin-left', ('-'+(body_width/2)+'px'));
return false;
}
In bootstrap 4, you can use 'w-100' class (w as width, and 100 as 100%)
You can find documentation here:
https://getbootstrap.com/docs/4.0/utilities/sizing/
If you can't change the HTML layout:
.full-width {
width: 100vw;
margin-left: -50vw;
left: 50%;
}
<div class="container">
<div class="row">
<div class="col-xs-12">a</div>
<div class="col-xs-12">b</div>
<div class="col-xs-12 full-width">c</div>
<div class="col-xs-12">d</div>
</div>
</div>
Demo: http://www.bootply.com/tVkNyWJxA6
Sometimes it's not possible to close the content container.
The solution we are using is a bit different but prevent a overflow because of the
firefox scrollbar size!
.full-width {
margin-top: 15px;
margin-bottom: 15px;
position: relative;
width: calc(100vw - 10px);
margin-left: calc(-50vw + 5px);
left: 50%;
}
Here is a example: https://jsfiddle.net/RubbelDeKatz/wvt9253q
Instead of
style="width:100%"
try using
class="col-xs-12"
it will save you 1 character :)
Sorry, should have asked for your css as well. As is, basically what you need to look at is giving your container div the style .container { width: 100%; } in your css and then the enclosed divs will inherit this as long as you don't give them their own width. You were also missing a few closing tags, and the </center> closes a <center> without it ever being open, at least in this section of code. I wasn't sure if you wanted the image in the same div that contains your content or separate, so I created two examples. I changed the width of the img to 100px simply because jsfiddle offers a small viewing area. Let me know if it's not what you're looking for.
content and image separate: http://jsfiddle.net/QvqKS/2/
content and image in same div (img floated left): http://jsfiddle.net/QvqKS/3/
I would use two separate 'container' div as below:
<div class="container">
/* normal*/
</div>
<div class="container-fluid">
/*full width container*/
</div>
Bare in mind that container-fluid does not follow your breakpoints and it is a full width container.
I'd wonder why someone would try to "override" the container width, since its purpose is to keep its content with some padding, but I had a similar situation (that's why I wanted to share my solution, even though there're answers).
In my situation, I wanted to have all content (of all pages) rendered inside a container, so this was the piece of code from my _Layout.cshtml:
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
<div class="container">
#RenderBody()
</div>
</section>
</div>
In my Home Index page, I had a background header image I'd like to fill the whole screen width, so the solution was to make the Index.cshtml like this:
#section featured {
<!-- This content will be rendered outside the "container div" -->
<div class="intro-header">
<div class="container">SOME CONTENT WITH A NICE BACKGROUND</div>
</div>
}
<!-- The content below will be rendered INSIDE the "container div" -->
<div class="content-section-b">
<div class="container">
<div class="row">
MORE CONTENT
</div>
</div>
</div>
I think this is better than trying to make workarounds, since sections are made with the purpose of allowing (or forcing) views to dynamically replace some content in the layout.
Though people have mentioned that you will need to use .container-fluid in this case but you will also have to remove the padding from bootstrap.
The following answer is not exactly optimal by any measure, but I needed something that maintains its position within the container whilst it stretches the inner div fully.
https://jsfiddle.net/fah5axm5/
$(function() {
$(window).on('load resize', ppaFullWidth);
function ppaFullWidth() {
var $elements = $('[data-ppa-full-width="true"]');
$.each( $elements, function( key, item ) {
var $el = $(this);
var $container = $el.closest('.container');
var margin = parseInt($container.css('margin-left'), 10);
var padding = parseInt($container.css('padding-left'), 10)
var offset = margin + padding;
$el.css({
position: "relative",
left: -offset,
"box-sizing": "border-box",
width: $(window).width(),
"padding-left": offset + "px",
"padding-right": offset + "px"
});
});
}
});
This must work (Mobile phone as well as Desktop screen):
class: alignfull and class: img-fluid will do the magic.
<div class="alignfull">
<img class="img-fluid" style="background-size: cover;
background-position: center ;
background-repeat: no-repeat;
height: auto;
min-width: 100%;
width: -moz-available; "
src="{{ $image->image }}" alt="An image">
</div>