I need to make this:
But for now I have this:
This is actual CSS and JavaScript:
<div className="col-md-12">
<Tabs
defaultActiveKey="recents"
id="uncontrolled-tab-example"
className="mb-3 background-tabs"
>
<Tab eventKey="recents" title="Récents (7)">
<div className="col-md-12">
<ul className="list-group">
{tutorials &&
tutorials.map((tutorial, index) => (
<li
className={
"conseil-card" +
(index === currentIndex ? "active" : "")
}
onClick={() => setActiveTutorial(tutorial, index)}
key={index}
>
<IconAdd />
<IconDrag />
<p>{tutorial.isPack ? "test" : "{tutorial.message}"}</p>
<div className="conseil-card-title">
Titre : {tutorial.title}
{tutorial.isPack ? "Pack oui" : "Pack non"}
</div>
</li>
))}
</ul>
.conseil-card {
background: #ffffff 0% 0% no-repeat padding-box;
box-shadow: 4px 4px 12px #00000014;
border-radius: 15px;
position: relative;
display: block;
padding: 0.5rem 1rem;
color: #212529;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.125);
text-align: left;
font: normal normal normal 16px/22px Poppins;
letter-spacing: 0px;
opacity: 1;
margin: 8px;
}
.conseil-card p {
margin-top: 10px;
margin-left: 50px;
margin-right: 50px;
}
.conseil-card svg {
float: left;
clear: both;
}
I didn't find what css property can help me, not display, not align...
And I don't know how can I display Bar with my custom size?
Related
i create a react search box with this design
using search bar css in react
but it seems like it screw up my old previous auto complete suggestion box for my search
basically the list of suggestion now is on top of my box and is fully horizontal instead
here is my simple code
css side
.suggestion{
cursor: pointer;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
}
.suggestion:hover{
background-color: wheat;
}
.search {
width: 100%;
position: center;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid #00b4cc;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
color: #9dbfaf;
}
.searchTerm:focus {
color: #00b4cc;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #00b4cc;
background: #00b4cc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Resize the wrap to see the search bar change!*/
.wrap {
width: 30%;
margin: 20px auto;
/* change the margin to move where it is on the page */
}
react return
<div className="wrap">
<div className="search">
<input type="text"
onChange={e => onChangeHandler(e.target.value)}
className="searchTerm"
value={searchCardName}
onBlur={() => {
setTimeout(() => {
setSuggestions([])
}, 100)
}}
/>
{suggestions && suggestions.map((suggestions, i) =>
<div key={i} className="suggestion" onClick={() => onSuggestHandler(suggestions)}>{suggestions}</div>
)}
{
spinner ? (
<Puff className="searchButton" width="20" height="2em" fill='#ffffff' />
) : (
<button className="searchButton" onClick= {() => handleClick()}>
<FontAwesomeIcon icon={faMagnifyingGlass} />
</button>
)
}
</div>
</div>
i am not sure how to make it become dropdown at the below of my search box as well as maybe align my spinner or something from my button to other places maybe like a modal pop for spinner?
i think i solved the issue here, by just move the suggestion outside of the div with className search.
Try to place this on another div so that it would be independent
<div className="suggestionList">
{suggestions && suggestions.map((suggestions, i)...
...othercode
</div>
now, in your css file. Add styling for suggestionList
.suggestionList {
display: flex;
flex-direction: column;
#adjust the **top** value depending on your preference
#add margins or padding depending on your preference
}
Hi I'm making a project with react and I've noticed that with some buttons I make and style they sometimes get this weird looking blue border when clicking it. I tried to get rid of it by setting border:none !important or even trying override the color of it but I can't seem to get it away. I'm just using scss for styling and also have react-bootstrap installed.
this is an example of a button that has the blue border:
code of buttons
// button 1
<button type="button" className="btn employee-button" value={employee} key={employee.id} onClick={(e) => this.onEmployeeClick(employee)}>
<div className={this.state.startId === employee.id ? "selected employee-card" : "employee-card"}>
<Gravatar email={employee.email} className="employee-gravatar" />
<div>
<p className="employee-name">{employee.firstname} {employee.lastname}</p>
<p className="employee-job">{employee.jobTitle}</p>
</div>
</div>
</button>
// button 2
<button className="btn" onClick={this.openPopUp}>Create new client</button>
styling
// button 1
.employee-button {
.employee-card {
display: flex;
flex-direction: row;
background-color: $white;
width: 250px;
height: 70px;
padding: 10px;
border-radius: 10px;
margin-left: 15px;
.employee-gravatar {
border-radius: 5px;
}
div {
margin-top: 10px;
width: 80%;
margin-top: 0;
display: flex;
flex-direction: column;
font-size: 0.9em;
.employee-name{
font-weight:600;
}
.employee-job{
font-weight:500;
margin-top:-10px;
}
}
&:hover {
color:#E27D60;
box-shadow: 0px 18px 40px -12px rgba(182, 181, 181, 0.356);
}
}
}
// button 2
button {
width: 200px;
height: 50px;
color: $black;
font-size: .9em;
margin: 45px 0px;
padding: 12px;
background-color: $plain-white;
font-weight: 700;
border-radius: 5px;
&:hover {
color: #17A9A3;
}
}
I'm hoping that someone can help me with this because this is getting on my nerves
You need to set focus outline for button:
button:focus {outline:none;}
If it doesn't work use !important also.
--> button:focus {box-shadow:none !important;} this solved it
It's outline not a border, to hide it you should use :
outline:none
full example :
button {
width: 200px;
height: 50px;
color: $black;
font-size: .9em;
margin: 45px 0px;
padding: 12px;
background-color: $plain-white;
font-weight: 700;
border-radius: 5px;
outline:none;
&:hover {
color: #17A9A3;
}
&:focus{
outline:none;
}
}
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
I would like to have this layout : What I would like
The "Resultat" label should be placed under the image.
Unfortunately, what I get is : What I get
You can see that the "Résultat" label is not well situated.
Here is my CSS :
body {
background-color: #A6A4AA !important;
}
.mainContainer {
background-color: #A6A4AA
}
.label-selected, .label-unselected, .label-result, .result-field, .label-univers, .label-target {
border: solid medium #2C3756;
border-radius: 10px;
background-color: #E6F0BB;
color: #405E01;
font-size: 0.75em;
padding: 5px;
text-align: center;
}
.label-target, .label-result, .result-field {
margin-top: 2px;
font-size: 0.875em;
margin-bottom: 0;
background-color: #2C3756;
text-align: left;
color : #FFFFFF;
border-radius: 8px;
}
.label-target {
border-radius: 8px 8px 0 0;
}
.label-result, .result-field {
margin-bottom: 2px;
}
.result-field {
background-color: #FFFFFF;
color: #2C3756;
border-color: #FFFFFF;
}
.targetImage {
margin: 0;
width: 100%;
height: auto;
border: solid medium #2C3756;
border-radius: 0 0 8px 8px;
background-color: #A6A4AA;
position: relative;
}
#targetCol {
overflow: hidden;
position: absolute;
}
.ajustement {
opacity: 0.5;
}
.label-result, .result-field {
float: none !important;
}
And here is my express code :
<div class="row"> <!-- Row : target -->
<div class= "col-xs-12" id="targetCol">
<img id="target" class="targetImage"></img>
<div id="ajustement" class="ajustement"></div>
<div id="impact" class="impact"></div>
</div>
</div>
<div class="row"> <!-- Row : result -->
<div class= "col-xs-3 short-div">
<p class="label-result">Résultats</p>
</div>
<div class= "col-xs-9 short-div">
<p class="result-field" id="resultField">...</p>
</div>
</div>
Can anyone explain to me what's going on ?
Thank by advance.
I think because you are using position: relative for displaying your image. It sets itself independent from the other div. Try using a div for you image and do not use position instead of that use width:100%;height:xyz px;. Avoid using position set it by giving width or using bootstrap column.
I have a horizontal list with 4 items. The first item will be always 52px wide. I want the remaining three items to be equal in width and fill up the remaining space.
How can I do this?
.wa_talents .unlocks {
width: 50px !important;
background: black;
font: normal 20px/52px"Palatino Linotype", "Georgia", "Times", serif;
text-align: center;
}
.wa_talents .tier {
list-style-type: none;
border: 1px solid #221d19;
box-shadow: 0 0 4px #000;
height: 52px;
margin: 5px;
clear: left;
}
.wa_talents .tier li {
float: left;
margin-left: 5px;
width: 30%;
/* THIS FAILS HARD*/
height: 52px;
}
.talent {
background: #000;
}
.talent .cell {
padding: 4px;
margin-top: 2px;
opacity: 0.25;
}
.talent .name {
width: 125px;
text-overflow: ellipsis;
overflow: hidden;
vertical-align: middle;
line-height: 150%;
color: #ffb100;
}
.talent.active .name {
color: #fff;
}
.frame-36 {
height: 36px;
width: 36px;
}
.talent .icon-frame {
display: inline-block;
padding: 1px;
background: #000 no-repeat 1px 1px;
border-radius: 3px;
border: 1px solid #434445;
border-bottom-color: #2f3032;
border-top-color: #b1b2b4;
vertical-align: middle;
margin-right: 5px;
}
.talent.active .cell {
opacity: 1;
}
.talent.active {
background: #5b2200;
border-color: #ce5209;
box-shadow: 0 0 8px #ce5209 inset;
}
<div class="wa_talents">
<div class="tiers">
<ul class="tier">
<li class="unlocks">15</li>
<li class="talent active">
<a href="http://www.google.com" target="_blank">
<div class="cell">
<span class="icon-frame frame-36"></span>
<span class="name">Foo</span>
</div>
</a>
</li>
<li class="talent">
<a href="http://www.google.com" target="_blank">
<div class="cell">
<span class="icon-frame frame-36"></span>
<span class="name">Bar</span>
</div>
</a>
</li>
<li class="talent">
<a href="http://www.google.com" target="_blank">
<div class="cell">
<span class="icon-frame frame-36"></span>
<span class="name">Baz</span>
</div>
</a>
</li>
</ul>
<!-- HERE WILL BE SOME MORE ul#tier LISTS -->
</div>
</div>
View On CodePen
As mentioned before, calc isn't that widely supported. You could use overflow:hidden on an additional div containing the 3 right li's
http://codepen.io/anon/pen/WbVamx
EDIT: wrong pen
Pure CSS : http://codepen.io/saig/pen/EaqBZd
Using JavaScript : http://codepen.io/saig/pen/raXqEJ
var mainId = document.getElementById('main');
var calcWidth = mainId.clientWidth - 52;
var list = document.getElementsByTagName("li");
for(i=0; i < list.length; i++){
if(list[i].classList.contains("talent")){
list[i].style.width=Math.floor((calcWidth/mainId.clientWidth*100)/(list.length-1))-1+"%";
}
}
The simplest solution is to go with calc function. In your case it would be:
.wa_talents .tier li {
float: left;
width: calc((100% - 52px - 20px)/3);
height: 52px;
margin-left: 5px;
}
The rule is a little tricky: 52 is the width of the first li, then you also need to subtract total margin between items (20px).
Support: all major browsers and IE9+.
Demo: http://codepen.io/anon/pen/raXqZG
The only way to do this in pure CSS is using calc(). You can check out the documentation and compatibility table here: https://developer.mozilla.org/en-US/docs/Web/CSS/calc