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>
Related
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
it has a button that will be used to open a content. Then when it is opened, the button text is changed to "-" and when it closes to "+".
I can't use icons!
Anyway, the "-" or "x", are not aligned on the button. I've used flex display, tested several things and I can't, someone help me please
document.getElementById("btn").addEventListener("click", (event) => {
let button = event.target;
if (button.innerText == "-") {
button.innerText = "+";
} else {
button.innerText = "-";
}
})
* {
margin: 0;
padding: 0;
}
div {}
#btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
border: 0;
font-size: 40px;
font-weight: 600;
background-color: red;
}
<div id="div">
<button id="btn">
x
</button>
</div>
You just have to add a width property.
.btn {
display: flex;
justify-content: center;
align-items: center;
height: 40px;
width: 40px;
border: 0;
font-size: 40px;
background-color: red;
}
<button class="btn">+</button>
<br/>
<button class="btn">−</button>
<br/>
<button class="btn">×</button>
Notes:
The minus symbol is not the dash -, and the close symbol is also not X since they will be misaligned. Copy the symbol from the above code directly.
Symbol references
https://en.wikipedia.org/wiki/Plus_and_minus_signs
https://en.wikipedia.org/wiki/X_mark
PS: Some code that is not in use in the answer have been removed from the snippet copied from question.
My suggestion:
button {
background-color: red;
border: 0;
font-size: 28px;
font-weight: bold;
margin: 0 5px 0 5px;
padding: 10px;
vertical-align: middle;
text-indent: 3px; /* for perfect horizontal centering, with some fonts */
}
<button>+</button>
<button>−</button>
<button>×</button>
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;
}
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;
}