I have the following css/styled-components, and I want to be able to (1) have the text resize based on text rendered (currently longer words like "manufacturing" span past the image and get cut off) and (2) If the word is too long, I want the text to wrap within the image. Googling to no avail because it shows "how to wrap text around an image".
** Styled-components **
const ProfilePicContainer = styled.div`
position: relative;
display: inline-block;
text-align: center;
color: #fff;
`
const ProfilePicText = styled.div`
position: absolute;
top: -25%;
left: 40%;
overflow: overflow-wrap;
font-size: clamp(1.15em, 3vw, 1em);
`
const CompanyProfilePic = styled.img.attrs({ src: `${imgBlank}` })`
position: relative;
left: 30px;
top: -30px;
margin-bottom: -10px;
#media (max-width: 767px) {
width: auto;
};
`
** JSX **
export default function Intro({ company, isExpanded, mainWidth }) {
return (
<Wrapper>
<Banner>
<BannerImg background={company.banner} />
<ProfilePicContainer>
<CompanyProfilePic />
<ProfilePicText>{company.name}</ProfilePicText>
</ProfilePicContainer>
</Banner>
</Wrapper>
)
}
Related
i'm doing an app and i need help !
I made a modal window, and that modal window will be bigger than 100vh, and i need it to have an scroll-bar, and i give it a scroll bar, but the problem is that, the other main scroll-bar needs to be cut, but i jus don't know how eliminate it
Here's the css code of my modal window, i'm usign styled-components in react
import styles from "styled-components";
// TODO Part
export const TodoMain = styles.section`
width: 100%;
min-height 100vh;
overflow-x: hidden;
overflow-y: auto;
background: white;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 100;
`;
export const Todo = styles.div`
width: 80%;
min-height: 150vh;
margin: auto;
border: 3px solid black;
`;
I have a Label element with some text and a Span inside. The text of the label changes on user click (it gets shorter/larger). If i put a margin left in the span then when the text of the label gets shorter/larger the span moves with it. I want the span to be static, no matter if the element sitting besides it gets shorter/larger. For some reason i dont know (i am a bit noob with css) position the span with absolute does the work (if you can explain to me why is that it would be great). It's there a more efficient way of doing that? Should i still be using absolute/relative positioning having Flexbox and CSS Grid? Do not pay attention to the <Wrapper> component. That is just a HOC that returns its children to avoid putting everything inside a <div>.
import React, { useState } from 'react';
import styled from 'styled-components';
import Wrapper from '../HOCs/Wrapper';
const ToggleCheckbox = styled.input`
display: none;
`;
const ToggleLabel = styled.label`
cursor: pointer;
padding: 2rem;
display: inline-block;
font-size: 1.6rem;
`;
const ToggleSpanBackground = styled.span`
background-color: #e3dede;
border-radius: 100px;
display: inline-block;
width: 40px;
height: 10px;
position: absolute;
left: 14rem;
top: 2.5rem;
cursor: pointer;
${ToggleCheckbox}:checked + ${ToggleLabel} & {
background-color: #2b90d9;
}
`;
const ToggleSpanButton = styled.span`
width: 2rem;
height: 2rem;
border-radius: 50px;
display: inline-block;
background-color: #e3dede;
position: absolute;
top: -0.5rem;
left: 0.3rem;
${ToggleCheckbox}:checked + ${ToggleLabel} ${ToggleSpanBackground} & {
background-color: #2b90d9;
left: 1.8rem;
}
`;
export default function Toggle(props) {
let [toggle, setToggle] = useState('off');
return (
<Wrapper>
<ToggleCheckbox type='checkbox' id='toggle-checkbox'></ToggleCheckbox>
<ToggleLabel
htmlFor='toggle-checkbox'
onClick={() =>
setToggle((prevState) => {
if (prevState === 'off') {
return 'on';
} else {
return 'off';
}
})
}
>
option: {toggle}
<ToggleSpanBackground>
<ToggleSpanButton></ToggleSpanButton>
</ToggleSpanBackground>
</ToggleLabel>
</Wrapper>
);
}
Well, position absolute effectively takes the element out of the DOM flow. So the thing getting bigger is not touching it any more so when it gets bigger it does not affect its position.
I would make the span have a fixed width, a width big enough for a long or short value.
Hi I'm trying to do an animation on hover, without the hover I would like my circle to make 100% of the height and width
and for some reason I am not able to leave my circle with 100% border radius
like this:
code:
export const TeamCard = styled.div`
background: red;
padding: 10px 0;
& .bgCircle {
border-radius: 50%;
padding: 64px;
background: hotpink;
}
`;
export default function App() {
return (
<TeamCard>
<div className="bgCircle" />
<div class="description">
<h3>huhuehu</h3>
<h3>testing</h3>
</div>
</TeamCard>
example:
https://codesandbox.io/s/dry-river-09ft0
Try using the following styled-div:
export const TeamCard = styled.div`
position: relative;
background: red;
height: 300px;
width: 300px;
& .bgCircle {
border-radius: 100%;
height: 50px;
width: 50px;
background: hotpink;
transition: all ease 333ms;
}
&:hover {
.bgCircle {
position: absolute;
top: 0;
height: 300px;
width: 300px;
border-radius: 0;
left: 0;
right: 0;
}
}
& .description {
position: absolute;
bottom: 0;
}
`;
This is making use of absolute positioning to correctly set where the circle should go. In order to make absolute positioning work, the containing element needs to have a position of something other than 'static'.
The transition property is what provides the animation.
I am using Bootstrap widgets and am attempting to create a full screen modal (header sticks on top, footer on bottom, and body scrolls in the middle). I can easily do this with some simple html as outlined here:
https://www.codeply.com/go/DLPXHfEIiS/bootstrap-4-full-screen-modal
However, once I start getting more complex and want to call my own component as the content then it no longer works. The component nests one level down from the modal-content and I believe this is what is breaking the flow. I am attempting to follow the instructions outlined here:
https://ng-bootstrap.github.io/#/components/modal/examples#component
Even in this above example you can inspect it and see the component is nested within the modal-content div.
The effect (when trying to go full screen using the method in the first link above) is that the modal, modal-dialog, and modal-contend all DO go full screen. However, the nested component within the modal component sizes to content despite my attempts to style it to behave.
What obvious thing am I missing here? Thanks in advance and happy Friday.
::EDIT TO OVERRIDE LIMITATIONS IN COMMENTS::
CSS
.gr-modal-full .modal-dialog {
min-width: 100%;
margin: 0;
}
.gr-modal-full .modal-content {
min-height: 100vh;
}
.TS CALLING THE COMPONENT
const journalPopup = this.modalService.open(
JournalPopupComponent,
{windowClass: 'gr-modal-full', backdrop: false});
journalPopup.componentInstance.journal = this.journal;
COMPONENT
import {Component, Input, OnInit} from '#angular/core';
import {NgbActiveModal} from '#ng-bootstrap/ng-bootstrap';
import {HttpClient} from '#angular/common/http';
#Component( {
selector: `
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
`,
templateUrl: './journal.popup.component.html',
styleUrls: ['./journal.popup.component.scss']
})
export class JournalPopupComponent implements OnInit {
#Input() journal: any;
constructor(public modal: NgbActiveModal) {}
ngOnInit(): void {
}
}
Have the answer by throwing away the above code and going more old-school. I just used CSS and made the components absolute. As long as the heights of my header and footer don't need to change (which I can control) this does the trick.
Props to John Paul Hennessy and his codepen for giving me the kick I needed at this link: https://codepen.io/yewnork/pen/Kpaqeq
.gr-modal-full .modal {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.gr-modal-full .modal-dialog {
position: fixed;
margin: 0;
min-width: 100%;
height: 100%;
padding: 0;
}
.gr-modal-full .modal-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
border-radius: 0;
}
.gr-modal-full .modal-header {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 80px;
padding: 10px;
border-radius: 0;
//background: #6598d9;
}
.gr-modal-full .modal-title {
font-weight: 300;
font-size: 2em;
color: #fff;
line-height: 30px;
}
.gr-modal-full .modal-body {
position: absolute;
top: 81px;
bottom: 61px;
width: 100%;
overflow: auto;
}
.gr-modal-full .modal-footer {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 60px;
padding: 10px;
border-radius: 0;
//background: #f1f3f5;
}
I am using the Tizen 2.3.1 SDK for wearables and have run into an issue where no matter what I do to the style.css file, adding any new ids simply refuses to work.
* {
margin: 0;
padding: 0
}
html, body {
width: 100%;
height: 100%;
background-color: black;
}
#str_day {
position: absolute;
display: -webkit-flex;
width: 50%;
height: 50%;
background: yellow;
color: yellow;
z-index: 4;
opacity: 1;
}
h1 {
font-size: 1.4em;
margin: 10px 0 20px 10px;
color: #6587ac;
}
#box {
display: -webkit-flex;
-webkit-align-items: center;
width: 100%;
height: 100%
}
.canvas {
background: #000;
width: 320px;
height: 320px;
margin: auto;
}
This is my code. I am trying to add the str_day id however it doesn't show up when I run the package through the emulator. The rest of the css (the canvas element, mainly) works fine, but str_day just doesn't show up. I tried specifying the z-index and opacity in case some weird issue was occuring but that doesn't seem to be the problem.
This is my full code on github.
https://github.com/JoyfulOwl/RadialWatch/commit/86d096710c7187b6b3679e02416548e18a3e986e
Probably because of improper CSS layout str_day is rendered/painted outside the viewport of your watchface because of which its not visible.
I think better would be to use canvas fillText command to print the date on canvas.
Try below example.
var canvas = document.getElementById("myCanvas");
var context=canvas.getContext("2d");
context.font="30px Comic Sans MS";
context.fillStyle = "red";
context.textAlign = "center";
context.fillText(str_Day, mCenterX, mCenterY); // mCenterX & mCenterY are the position where text has to be shown.