Here is my problem:
I need rounded border only for first and last element? How can I accomplish that?
This is my css:
.root {
display: flex;
width: 100%;
height: 56px;
align-items: center;
border-radius: var(--radius-medium)px;
border: 1px solid var(--color-gray2);
}
.icon {
display: flex;
align-items: center;
padding: 0 15px;
}
.text {
color: #000;
font-size: calc(var(--font-size-body) / 10)rem;
}
This is from React:
//<ListElementRoot> === .root
//<ListElementIcon> === .icon
//<ListElementText> === .text
return (
<ListElementRoot>
<ListElementIcon>
<Icon name={icon} color={color} />
</ListElementIcon>
<ListElementText>
{children}
</ListElementText>
</ListElementRoot>
)
}
That is all, I know I should do something with first and last element, but how to do it in my case? Any ideas?
Borders are generated by root...
I suppose you mean that the first and last one should still have non-rounded edges at the inner sides:
.root {
width: 200px;
height: 80px;
border: 1px solid black;
}
.root:first-of-type {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.root:last-of-type {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
<div>
<div class="root">1
</div>
<div class="root">2
</div>
<div class="root">3
</div>
<div class="root">4
</div>
</div>
You can use :first-child and :last-child for this:
.root { /* all .root */
display: flex;
width: 100%;
height: 56px;
align-items: center;
border: 1px solid var(--color-gray2);
}
.root:first-child, .root:last-child { /* first or last .root only */
border-radius: var(--radius-medium)px;
}
Related
I'm creating a resume website. I'm adding content to the Job.js component, and I'm encountering an issue with logo. The height seems to expand when the desc exceeds the height of the component. If the desc is short, I do not have this issue. I'm also not having this problem when flex-direction is column.
I tried adjusting padding-bottom of .job-container img, but while the image returned to normal, there was unwanted padding at the bottom.
Relevant Code
Job.js
import React from 'react';
import '../css/Job.css';
function Job(props) {
console.log(props.name);
const jobList = props.job.map(j =>
<div className='job-container'>
<img src={j.logo} alt={j.alt} />
<div className='description'>
<div>
<a href={j.link} rel='noopener noreferrer' target='_blank'>
{j.companyName}
</a>
</div>
<div>{j.title}</div>
<div>{j.duration}</div>
<div>{j.location}</div>
<div>{j.desc.map(paragraph => <p>{paragraph}</p>)}</div>
</div>
</div>
)
return (
<div>{jobList}</div>
);
}
export default Job;
Job.css
:root {
--image-spacing: 30px;
}
.job-container {
border: 2px solid red;
padding: 0px 5%;
display: flex;
flex-direction: row;
}
.job-container img {
border: 2px solid red;
border-radius: 3px;
display: block;
height: auto;
width: 35%;
}
.job-container .description {
line-height: 1.45;
padding-left: var(--image-spacing); /* Change this. */
}
.job-container a {
color: black;
text-decoration: none;
}
/* Responsive Mode */
#media only screen and (max-width: 768px) {
.job-container {
/* Line up description and image. */
flex-direction: column;
}
.job-container img {
border-radius: 3px;
margin: auto;
width: 75%;
}
.job-container .description {
padding-left: 0px;
padding-top: var(--image-spacing);
}
}
.content {
display: block;
}
I solved this problem by adding align-self: start; to .job-container img.
I have the div block as shown below:
<div className={'row ge-container'}>
<div className={'a-span3 ge-container-navigation'}>
hello
</div>
<div className={'a-span9 ge-container-content'}>
Okay
</div>
</div>
And the css as
.ge-container {
min-height: 300px;
}
.ge-container-navigation {
background-color: $light-gray-background;
display: inline-block;
float: left;
height: inherit;
margin: 5px 0 0 0;
padding: 10px 8px 0 8px;
border: 1px solid $gray;
}
.ge-container-content {
display: inline-block;
height: inherit;
}
The child is not inheriting the height of parent. I tried the solution by setting min-height of child to inherit by seeing some answers. But, that fails when the height goes above 300px.
Can anyone help with this
Please use display: flex; CSS in .ge-container parent.
This code makes a child flex-box of height 100% using CSS only.
.ge-container {
min-height: 300px;
display: flex;
}
Updated snippet :-
.ge-container {
min-height: 300px;
display: flex;
}
.ge-container-navigation {
background-color:red;
display: inline-block;
float: left;
height: inherit;
margin: 5px 0 0 0;
padding: 10px 8px 0 8px;
border: 1px solid $gray;
}
.ge-container-content {
display: inline-block;
height: inherit;
}
<div class="row ge-container">
<div class="a-span3 ge-container-navigation">
hello
</div>
<div className="a-span9 ge-container-content">
Okay
</div>
</div>
You can also try it with javascript/jquery
$('.ge-container-navigation').height($('.ge-container'));
and, if you want it to update itself in rotation mode:
setInterval(function(){
$('.ge-container-navigation').height($('.ge-container'));
}, 10);
Thanks
Hello i'm trying to do like an arrow from a question balloon:
code:
<Styled.MessageWrapper user={message.user}>
<Styled.BotImg src={BotLogo} user={message.user} />
<Styled.ChatMessage user={message.user}>
{message.text}
</Styled.ChatMessage>
</Styled.MessageWrapper>
css:
const MessageWrapper = styled.div`
display: flex;
align-items: center;
justify-content: ${props => (props.user ? 'flex-end' : 'flex-start')};
`;
const BotImg = styled.img`
display: ${props => (props.user ? 'none' : 'block')};
padding-left: 10px;
width: 40px;
`;
const ChatMessage = styled.div`
margin: 1ex;
padding: 1ex;
border-radius: 2px;
${props => (props.user ? messageClient : messageBot)}
`;
now i have this:
i trying make this but not sucess:
Unfortunately, I don't know anything about styled components. However, this solution with just HTML and CSS might help demonstrate how to leverage the technique already recommended by #BugsArePeopleToo.
.messages {
max-width: 400px;
margin: 0 auto;
}
.message {
margin: 0.5em;
}
.message.tx {
text-align: right;
}
.message .bubble {
position: relative;
display: inline-block;
vertical-align: top;
background: #0D47A1;
color: #fff;
padding: 0.5em 1em;
border-radius: 0.5em;
}
.message.rx .bubble {
background: #CFD8DC;
color: #212121;
}
.message .icon {
display: inline-block;
width: 2em;
height: 2em;
margin-right: 0.5em;
border-radius: 1em;
background: #CFD8DC;
}
.bubble.l-caret::before,
.bubble.r-caret::before {
position: absolute;
display: block;
content: '';
top: 0;
width: 0;
height: 0;
border-left: 0.5em solid transparent;
border-right: 0.5em solid transparent;
border-top: 0.5em solid #0D47A1;
}
.message.rx .bubble.l-caret::before,
.message.rx .bubble.r-caret::before {
border-top: 0.5em solid #CFD8DC;
}
.bubble.l-caret::before {
left: -0.5em;
}
.bubble.r-caret::before {
right: -0.5em;
}
<div class="messages">
<div class="message rx">
<span class="icon"> </span>
<span class="bubble l-caret">
test 123 hello world <br>
multiline
</span>
</div>
<div class="message tx">
<span class="bubble r-caret">
ohai
</span>
</div>
</div>
You need a pseudo element on your ChatMessage component.
The syntax for styled components is:
const ChatMessage = styled.div`
position: relative;
&:before {
position: absolute;
/* additional pseudo element styles here */
}
`;
As for the styles of the arrow, you need relative/absolute positioning, and use the transparent border trick to get a triangle. Here is anther question on SO that explains this technique very well, just adjust the positioning, dimensions, color, border, etc to your liking: Speech bubble with arrow
Hi there I am new to css and to stackoverflow and need some help. I am trying to create something like this with css:
image
But I really don't get these results, can someone help me? thanks
I created a snippet which looks like the image you were trying to re-create. Hope it helps.
Useful links -
::after / ::before, flexbox
.hr-sect {
display: flex;
flex-basis: 100%;
align-items: center;
margin: 8px 0px;
}
.hr-sect::before,
.hr-sect::after {
content: "";
flex-grow: 1;
height: 2px;
font-size: 0px;
line-height: 0px;
margin: 0px 20px;
}
.hr-sect,
span {
color: blue;
}
.hr-sect::before,
.hr-sect::after {
background-color: blue;
}
hr {
border: 1px solid blue;
}
.title {
text-align: center;
}
.big {
font-size: 25px;
}
<div class="title">
<div class="hr-sect"><span>HOW TO GET</span></div>
<span class="big">GALAXY SKIN FORTNITE</span>
<hr>
</div>
I need to make dropdown menu with connected area without border between button and dropdown-panel, but the borders at the edges of dropdown panel will be preserved. I use dropdown-pane from Foundation 6.
This is my result:
And this is my target:
Below is my HTML code where dropdown-wrapper is container for dropdown toggler and dropdown-panel. data-v-offset is set -1 to overlap border of item-container. I tried to set up the bottom border of item-container to background color, but dropdown-pane instantly overlap the item-container element.
<ul class="bottom-menu">
<li class="dropdown-wrapper" data-toggle="header-shopping-card" >
<a href="#" class="item-container">
<div class="item-content">
<div class="item-title">
<span>Nákupní košík</span>
<span class="box primary"><span>4</span></span>
</div>
<div class="item-subtitle">12 000 Kč</div>
</div>
</a>
<div
class="dropdown-pane"
id="header-shopping-card"
data-dropdown data-hover="true"
data-hover-pane="false"
data-position="bottom"
data-alignment="right"
data-hover-delay=0
data-v-offset=-1
>
Just some junk that needs to be said. Or not. Your choice.
</div>
</li>
</ul>
And this is my SCSS code:
.bottom-menu {
#include menu-base;
#include flex-align(right, middle);
.dropdown-wrapper {
border: 0;
&:hover {
.item-container {
background-color: $light-gray;
border: 1px solid $dark-gray;
border-bottom: 1px solid transparent;
.item-content {
color: $black;
}
.item-subtitle {
color: $dark-gray;
}
}
}
.dropdown-pane {
background-color: $light-gray;
border: 1px solid $dark-gray;
}
}
.dropdown-pane {
font-size: $global-font-size;
}
.item-container {
transition-delay: 0;
display: flex;
align-items: flex-end;
font-size: $small-font-size;
border: 1px solid transparent;
.item-icon {
width: rem-calc(35px);
height: auto;
color: $accent-secondary;
.item-icon-path {
fill: $accent-secondary;
}
.item-icon-path-circle {
fill: $green;
}
.item-icon-path-check {
fill: $header-primary-color;
}
}
.item-content {
padding-left: 6px;
color: $header-primary-color;
font-size: rem-calc(12px);
.item-title {
margin-bottom: 4px;
}
.item-subtitle {
line-height: 1em;
color: $header-secondary-color;
}
.box {
display: inline-flex;
justify-content: center;
align-items: center;
min-width: rem-calc(21px);
min-height: rem-calc(21px);
color: $white;
font-size: rem-calc(13px);
}
.box.primary {
background-color: $primary-color;
}
}
}
}
}
}
}
I don't know hot to remove border between dropdown-pane and item-container. Can you please help me? I'll be glad for every help.
Thank you,
Michal
.item-container must have position: relative and .dropdown-pane must have position: absolute. After that the z-index is working. Then Bottom border of the .item-container is overlapped by:
.item-container:after {
content: '';
background-color: $light-gray;
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: -1px;
}