I have a problem when custom close icon and search icon style.
I want to make search icon in left of input and close icon in right of input.
But now two icons is in right of input.
How can I fix this problem?
My code is here
.ant-input {
padding: 4px 10px 4px 40px;
border-radius: 20px;
&-search {
height: 40px;
width: 240px !important;
}
&-suffix {
width: 18px;
> i {
font-size: 18px;
}
}
}
}
<div className='user-list__tollbar--search'>
<Search
onChange={this.onSearch}
style={{width: 200}}
defaultValue={keyWord}
allowClear
/>
</div>
You can use antd Input to solve your issue
<Input
prefix={<SearchOutlined />}
placeholder="Search"
allowClear
/>
Related
If you look here... http://matiny.tk/Mixed%20Swim/Mixed.html
This is a simple site I'm making. It uses Bootstrap to switch the menu when the screen shrinks. Nicely enough, the Menu label/checkbox combo is not working, though it has worked on another site of mine. This is the relevant code...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"></label>
<input type="checkbox" id="menulogo">
</nav>
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
label {
font-size: 40px;
width: 100%;
color: white;
z-index: 2;
}
#menulogo {
opacity: 0;
}
#menu a {
background: rgba(0,0,0,.35);
font-size: 50px;
color: white;
height: 75px;
}
#menu {
margin-top: 100px;
text-align:center;
z-index: 3;
display: none;
position: fixed;
}
#menulogo:checked + #menu {
display: block;
}
As it turns out, my order of elements was incorrect. If one is going to use something like... #menulogo:checked + #menu, then the + or ~ selector means that the nav with #menu has to go right after the checkbox input, like so...
<label for="menulogo" id="menulabel" class="visible-sm visible-xs"><img src="Menu.png"> MENU</label>
<input type="checkbox" id="menulogo">
<!--These must be in sequence-->
<nav id="menu">
SHOP
ABOUT
BLOG
GALLERY
CONTACT
</nav>
It's my problem:
http://jsfiddle.net/Vqa7v/
body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}
#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}
nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}
nav a {
padding: 5px 7px;
color:white;
}
<div id="menu">
<nav>
HOME
SERVICES
ABOUT
BLOG
CONTACT
</nav>
</div>
At first, the menu is fit to background position, but make the Result window smaller & smaller to see when the menu get out of the background position.
How to avoid that and fix menu to background image position? (I want to have a menu in center of my website on its background image)
Had some real trouble understanding what you were looking for, but is this it? Basically it needed a whole bunch of changes that I've made to nav etc.
http://jsfiddle.net/robsterlini/Vqa7v/2/
I solved it by my self: http://jsfiddle.net/Vqa7v/4/
.menu {
position:absolute;
top: 20px;
left:15px;
}
nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}
nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}
<nav>
<div class="menu">
HOME
SERVICES
ABOUT
BLOG
CONTACT
</div>
</nav>
Small the RESULT window width and see the menu is fixed to the background image.
I've read many other posts regarding floating divs, but haven't been able to find success yet with the things I've tested, so here I am... (I'm still new to this, so apologies if my code isn't super clean!)
I have an image that I'd like to float over several others. My goal (if it is attainable) is to have it in a fixed position from the upper right corner of .container. I'm close... but I can't get the image to move in from the right, and as it sits now, it is bumping the other photo out of the header (without the .crosses added, it sits in the green, right-aligned.)
The project requires that it still looks good (or degrades nicely) in IE7.
I've set up a fiddle here: (can't figure out what the red error means by "links to jsfiddle.net must be accompanied by code") so, if you could just go there and visit:
http://jsfiddle.net/cathi/VAkk5/5/
HTML (extract):
<div class="container">
<div class="crosses"><img src="/img/common/crosses-motif.png" width="213" height="118" alt="crosses-motif" /></div>
<div class="header"></div>
<div class="hero">
<div class="herophoto">photo</div>
</div>
</div>
CSS (extract):
.container {
width: 80%;
margin: 0 auto;
}
.crosses {
float:right;
margin-right:0;
margin-top:130px;
}
.header {
height: 150px;
}
.headerlogo {
width: 250px;
padding-top: 80px;
padding-left: 20px;
float:left;
}
.headerlogo2 {
float:right;
}
.hero {
height: 205px;
}
.heroheadline {
height: 0;
width: 450px;
padding-top: 45px;
padding-left: 70px;
float:left;
}
.herophoto {
height: 205px;
width: 333px;
float: right;
}
I am trying to achieve css3 curved shadow effect in one of the div something like this. However, I ran into z-index problem. Even-though I set parent as position relative and set higher z-index it is still not working. Pseudo elements shows up on top of element. Here is the Fiddle that demonstrates my problem also the code below. Any help will be much appreciated.
HTML
<div class="app-home-body-banners">
<div>
<ul style="height: 100px">
</ul>
<br class="clear" />
</div>
</div>
CSS
.app-home-body-banners
{
position: relative;
z-index: 100;
margin: 20px 0px 20px 0px;
background-color: #E9E9E9;
}
.app-home-body-banners:before, .app-home-body-banners:after
{
content:"";
position:absolute;
z-index:-1;
}
.app-home-body-banners:before
{
top:0px;
bottom:0px;
left:10px;
right:10px;
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
box-shadow:0 0 15px rgba(0,0,0,0.6);
-moz-border-radius:100px / 10px;
border-radius:100px / 10px;
}
.clear
{
float: none;
clear: both;
line-height: 1px;
}
remove the z-index from .app-home-body-banners: http://jsfiddle.net/7mMaT/9/
.app-home-body-banners {
position: relative;
margin: 20px 0px 20px 0px;
background-color: #E9E9E9;
}
Hi I am teaching myself some backbone from tutorials, and I want to create a table like display element using spans.
So I added a width element into my span in the template. (I know it isn't the best place to put it, but it should take priority over stylesheet properties, and is just to get an idea during development).
<script type="text/template" id="loadedwith-template">
<span style="width:100" class="library"><%= library.name %></span>
<input style="width:100" class='input' type="text" />
<button class="delete_lw" >delete</button>
</script>
However when I look at it in the browser, the element shows up as before without the width setting applied.
"Inspect element" in Chrome shows the width property, but is disabled (has a line like html strikethrough on it). This is the last thing shown in element styles before the computed styles section.
There is another stylesheet referencing the span. Is there anything causing the width to be disabled? The other stylesheet is as follows (borrowed from the backbone tutorial). (The span is inside a list).
a { color: #2929FF; }
a:visited { color: #777; }
a:hover {
color: #8F8FFF;
text-decoration: none;
}
body, button { font: 100%/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background: #FFF;
color: #444;
padding: 25px 50px;
}
button, .delete, .swap {
border: 0;
border-radius: 5px;
color: #FFF;
cursor: pointer;
font-weight: bold;
line-height: 1;
text-align: center;
text-transform: uppercase;
}
button:hover, .delete:hover, .swap:hover { opacity: 1; }
button {
background: #2929FF;
font-size: 0.75em;
padding: 7px 12px;
opacity: .75;
}
h1 {
font-size: 1.25em;
letter-spacing: -0.5px;
}
p {
color: #777;
font: italic 0.75em/1.2 "Georgia", Palatino, "Times New Roman", Times, serif;
}
span {
display: inline-block;
margin-right: 10px;
}
ul { padding-left: 0; }
.delete, .swap {
font-size: 0.625em;
opacity: .25;
padding: 3px 10px;
position: relative;
top: -3px;
}
.delete { background: #FF29D0; }
.swap { background: #FF6529; }
You need to specify a unit of measurement
Specifying CSS units is a requirement for non-zero values. Browsers may try to guess what you meant, but it would still be a broken stylesheet according to the standard.
I.e. there is no "default unit" in CSS, it's just that the browser may try to help you out, although it may as well just ignore your statement that doesn't specify units as an invalid one.
Try style="width:100px"
You should specify a unit, like px:
style="width: 100px"