have problem with Css. Id like to set this form symmetricaly. Buttons would be in 1 column, textfields would be in 1 column also question mark i like to have it in 1 column.
Sorry for maybe bad ticket structure here. This is the second one in my life :) Im using React.js + Styled components
Design of the form atm
const ItemText = styled.div `
padding-top: 1%;
text-align: center;
display: block;
.form-inline {
flex-flow: row wrap;
align-items: center;
}
.form-inline label {
margin: 5px 10px 5px 0;
}
.form-inline input {
vertical-align: middle;
margin: 5px 10px 5px 0;
padding: 10px;
background-color: #fff;
border: 1px solid #ddd;
}
.form-inline button {
padding: 10px 20px;
background-color: dodgerblue;
border: 1px solid #ddd;
color: white;
cursor: pointer;
}
.form-inline button:hover {
background-color: royalblue;
}
#media (max-width: 800px) {
.form-inline input {
margin: 10px 0;
}
.form-inline {
flex-direction: column;
align-items: stretch;
}
}
<ItemText>
<div className="App">
{
print? <h1>{dataWhen}</h1> :null
}
<div className="form-inline">
<label className="question">WHEN?</label>
<input className="webflow-style-input" type="text" placeholder="Sem piš" onChange ={getData}/>
<button type="submit" onClick={() => setPrint(true)}> Odeslat</button>
</div>
</div>
</ItemText>
You could just wrap your label inside a div with a fixed width
Then the length of your label won't change the placement of the other elements
Related
I'm trying to use css columns to display a dynamic number of columns based on the maximum width needed for the children to display nicely (such that the text doesn't wrap onto a new line where possible). I'd then like to stretch each element to fit the available space in the column.
This is what I have (Here is a JSFiddle):
But this is what I'd like to see (all elements have equal width):
This is the code I've tried:
<div class="columns">
<div>
Lorem
</div>
<div>
Ipsum
</div>
<div>
Dollar
</div>
<div>
Euro
</div>
<div>
Bitcoin
</div>
</div>
* {
padding: 0;
margin: 0;
}
.columns {
columns: auto;
column-gap: 1rem;
background: #4cafff;
padding: 1rem 0;
}
.columns > div {
width: max-content;
background: #4caf50;
color: white;
font-size: 2rem;
border: 2px solid green;
margin: 1rem;
}
max-content is not work like that. It is make the content not to wrap. I mean, width or height of content will be maximum size of your content. It will be fit.
If you want to equal width of all element, you can use specific pixel for width.
Like this:
.columns > div {
width: 95px;
text-align: center;
background: #4caf50;
color: white;
font-size: 2rem;
border: 2px solid green;
margin: 1rem;
}
Try this CSS
* {
padding: 0;
margin: 0;
}
.columns {
display: flex;
flex-wrap: wrap;
background: #4cafff;
padding: 1rem 0;
}
.columns > div {
background: #4caf50;
flex: 1;
color: white;
font-size: 2rem;
border: 2px solid green;
margin: 1rem;
}
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
}
i tried "display:flex" and "flex:1" but it doesn't seem to work...is there anything wrong or missing in my css? anybody knows please help me! Thank you so much!
This is my html:
div className = "header-search" >
<
input type = "text"
className = "header-searchInput" / >
<
SearchIcon className = "header-SearchIcon" / >
<
/div>
This is my css:
.header-search {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
border-radius: 24px;
}
.header-SearchIcon {
background-color: orange;
padding: 5px;
}
This is how it looks like with my codes:
I not only solved your problem but also tried to make it a little better.
.header-search {
display: flex;
flex: 1;
justify-content: center;
border-radius: 24px;
}
.header-search input{
outline: none !important;
border:1px solid orange;
}
.header-search input:focus{
outline: none !important;
border:1px solid orange;
box-shadow: 0 0 10px #719ECE;
}
.header-SearchIcon {
height:100%;
background-color: orange;
padding: 5px;
cursor:pointer;
}
<div class="header-search" >
<input type = "text"
class="header-searchInput" / >
<span class='header-SearchIcon'>search</span>
</div>
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;
}
}
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;
}