My issue is that there is a 1px gap in the alignment. If you see closely the search icon btn is 1 px above of search box, how Do i fix it? I need both to be same alignment.
I tried to set same height, but it didn't work.
input {
border-radius: 10px 0 0 10px;
border-right: none;
border: solid #D9D9D9;
height: 30px;
}
button {
height: 30px;
border-radius: 0 10px 10px 0;
border: solid;
}
.bg-grey {
background: lightgrey;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<input class="addFont bg-grey" placeholder="What is your mood?" style={{
borderRadius: "10px 0 0 10px",
borderRight: "none",
border: "solid #D9D9D9",
height: "30px"
}}/>
<button class="bg-grey" style={{
height: "30px",
borderRadius: "0 10px 10px 0",
border: "solid"
}}><i class="fa fa-search"></i></button>
{
margin-top : "5px"
}
or
{
padding-top : "5px"
}
Related
I was trying to make a button that has the shape of an icon but the button overflows the icon
.upvote, .downvote {
font-size: 55px;
}
.up {
color: green;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<button class="upvote up"><i class="fa fa-caret-up"></i></button>
<a class="upvote up"><i class="fa fa-caret-up"></i></a>
It works fine for a tag but I want to use it in a submit form so I can't use a tag.
Why don't use directly the icon as button like:
.upvote,
.downvote {
font-size: 55px;
}
.up {
color: green;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<i class="fa fa-caret-up fa-5x upvote up"></i>
i add fa-5x for the size and cursor: pointer; for cursor in hover state.
Into a form:
const myform = document.getElementById('myform');
document.querySelector('.up').addEventListener('click', () => {
myform.submit();
});
.upvote,
.downvote {
font-size: 55px;
}
.up {
color: green;
cursor: pointer;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<form id='myform'>
<i class="fa fa-caret-up fa-5x upvote up"></i>
</form>
Else you can use SVG sprites Link official, i can't post an example for Same origin policy
Instead of using an icon inside the button, you can follow this method. Here I have modified the button matching the styles of the icon. This way you can keep the properties of a button, while having a different design.
Otherwise, you can add a clickEventListener to the icon itself as Simone's answer
.arrow-up {
display: inline-block;
width: 0;
height: 0;
background-color: #fff;
padding: 0;
border: 0;
outline: none;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 20px solid green;
}
<button class='arrow-up'></button>
Please find the same for arrow-down
.arrow-down {
display: inline-block;
width: 0;
height: 0;
background-color: #fff;
padding: 0;
border: 0;
outline: none;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid green;
}
<button class='arrow-down'></button>
This way you can completely avoid the usage of fa icons if this is your only requirement.
Check the margin and padding of the icon as well as the button and also define height and width by yourself.
.upvote, .downvote {
margin: 0px;
padding:0px;
font-size: 55px;
}
.up {
margin: 0px;
padding:0px;
height:..;
color: green;
}
I want to achieve something like below
How do I style the html and css?
Hello you can enclose the two input fields in a div then add margins inside. Here's a summary of what I did;
put input fields inside a div
remove borders from the input fields
add margin on top & bottom of the input fields (this would be the spacing on top and bottom of the separator)
add a border on the right of the first input field
Do run the snippet below, thanks.
$(".input-group-wrapper input").on("focus", function() {
$(this).parent().addClass("focus");
});
$(".input-group-wrapper input").on("focusout", function() {
$(this).parent().removeClass("focus");
});
.input-group-wrapper {
border-radius: 4px;
border: 1px solid rgba(0, 0, 0, 0.1);
display: inline-block;
transition: 0.2s;
width: 100%;
}
.input-group-wrapper>.first,
.input-group-wrapper>.second {
border: none;
line-height: 30px;
display: inline;
margin: 6px 0px 6px 0px;
padding: 0px 8px 0px 8px;
}
.input-group-wrapper>.first {
width: 60%;
border-right: 1px solid rgba(0, 0, 0, 0.1);
}
.input-group-wrapper>.second {
width: 30%;
}
.input-group-wrapper>.first:focus,
.input-group-wrapper>.first:active,
.input-group-wrapper>.second:focus,
.input-group-wrapper>.second:active {
outline: none;
}
.focus {
border: 2px solid rgba(0, 100, 200, 0.6);
}
<div class='input-group-wrapper'>
<input class='first' placeholder='e.g. Read every day p3 #goals #learning' />
<input class='second' value='Aug 4 2018' />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
To achieve this look, you'll want to use a margin on one of them.
I have my code and a Code Pen linked below:
.modified{
height: 30px;
border-radius: 2px;
border: 1px solid lightgray;
box-shadow: none;
padding: 3px 6px;
}
.modified.right{
margin-left: -10px;
width: 125px;/* Alternatively use % or vw */
}
.modified.right::placeholder{
color: black;
}
<input type="text" class="modified" placeholder="Just Test Me"/>
<input type="text" class="modified right" placeholder="I Am Testing" />
Codepen Example
I hope this helps!
I want to inherit the width of my suggestion div from the input field's width and at the same time overlap it from the objects. My CSS below overlaps but does not inherit the width of the input field. I've tried making it to 100% but it becomes longer than the input field.
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
position: absolute;
width: inherit;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
Here's an example:https://codepen.io/anon/pen/KvgoPX
What I changed was:
For the suggestion div to be absolute, it'll need to be relative to the input in some way. That's what there's an input container around the outside. That can be any width you want.
There's another object in there to show that it overlays.
.inputContainer {
width:200px;
position:relative;
background:green;
}
input {
width:100%;
}
.suggestion {
cursor: pointer;
background: #FFF;
box-shadow: 0 2px 2px 0 rgba(34,36,38,.15);
padding: 5px 20px;
border-radius: .28571429rem;
border: 0px solid rgba(34,36,38,.15);
z-index: 1;
box-sizing:border-box;
text-align:center;
position: absolute;
width: 100%;
}
.search-res{
margin-bottom: 5px;
}
.search-res:hover{
margin-bottom: 5px;
color: #2196f3;
}
.warning {
color: orange
}
<div class="inputContainer">
<input type="text" formControlName="name" placeholder="Enter Name..." maxlength="32">
<div class="suggestion" *ngIf="suggestions">
<div *ngFor="let suggestion of suggestions" class="search-res" (click)="onSelectSuggestion(suggestion.name)">
{{suggestion.name}}
</div>
</div>
</div>
<div class="otherStuff"> This is where other objects are </div>
I´m trying to build a search element together with a button, something like:
Except that I need to change the background color of the search icon (blue, gray, whatever...).
Here is my code so far and the result:
.searchWrap {
position: absolute;
border: thin solid #f2f2f2;
border-radius: 5px;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
}
.searchButton {
right: -50px;
width: 30px;
height: 20px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 5px;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
}
<div className="searchWrap">
<input type="text" className="searchTerm" placeholder="Search..." />
<button type="submit" className="searchButton">
<Icon name='search' />
</button>
</div>
I'm using React. Here is my result so far:
The external border is rounded, ok, that's what I need, but the separation between the searchTerm and the searchButton is also rounded, and I need a plain separator here, something like:
I'm using font awesome here, so the code isn't spaced like your screenshot, but looks like you have your own library you're using with react for that icon and your spacing is fine.
All you need to do is use border-radius: 0 5px 5px 0 to keep the left side borders from rounding, and assign a border-left on the .searchButton to draw the vertical line. I changed the border color so it's more prominent, but you can use whatever color you want.
*{margin:0;padding:0;}
.searchWrap {
position: absolute;
top: 5px;
left: 5px;
}
.searchTerm {
float: left;
border-style: none;
padding: 5px;
height: 20px;
outline: none;
margin-left: 3px;
border: thin solid #ddd;
border-width: thin 0 thin thin;
border-radius: 5px 0 0 5px;
}
.searchButton {
right: -50px;
width: 30px;
height: 32px;
border: 1px solid #f2f2f2;
background: #f2f2f2;
border-radius: 0 5px 5px 0;
text-align: center;
color: #ccc;
vertical-align: middle;
cursor: pointer;
border: thin solid #ddd;
}
.searchTerm:focus, .searchTerm:focus + .searchButton {
border-color: red;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="searchWrap">
<input type="text" class="searchTerm" placeholder="Search..." />
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
Try this for the search button css instead of border-radius
.searchButton {
...
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
...
}
Can you use bootstrap? Relatively simple, and once you have it, modify the css the way you want it.
https://v4-alpha.getbootstrap.com/components/input-group/#button-addons
Bootstrap is strongly recommended for this. See http://getbootstrap.com/components/#input-groups. Coupled with FontAwesome, you could do something like this:
<div class="input-group">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">
<span class="fa fa-search"></span>
<span class="sr-only">Search</span>
</button>
</span>
</div>
here i am pasting html & css and when UI comes then extra space was coming. just could not understand why it is coming and how to make it look proper.
HTML
<div style="display: block; z-index: 1001; outline: 0px none; height: 400px; width: 400px; top: 77px; left: 428px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all noTitleStuff ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog2"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span class="ui-dialog-title" id="ui-dialog-title-dialog2"> </span><span class="ui-icon ui-icon-closethick">close</span></div><div id="dialog2" class="ui-dialog-content ui-widget-content" style="width: auto; min-height: 0px; height: auto;">
<div id="Container">
<div id="acloginpod">
<div id="caption"> Enter Login Information </div>
<div class="acloginform">
<fieldset>
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label1">Email Address:</span>
<input type="text" name="ctl00$mstPartBase$rptlogin$ctl00$txtEmail" id="ctl00_mstPartBase_rptlogin_ctl00_txtEmail" tabindex="1" class="textinput">
<span id="ctl00_mstPartBase_rptlogin_ctl00_Label2">Password:</span>
<input type="password" name="ctl00$mstPartBase$rptlogin$ctl00$txtPassword" id="ctl00_mstPartBase_rptlogin_ctl00_txtPassword" tabindex="2" class="textinput">
<div class="aclogin-action">
<div class="fl-left">
<div class="item">
<label>
<input type="checkbox" id="ctl00_mstPartBase_rptlogin_ctl00_chkRemember" name="ctl00$mstPartBase$rptlogin$ctl00$chkRemember" tabindex="3">
Remember me
</label>
</div>
<a id="ctl00_mstPartBase_rptlogin_ctl00_LinkButton1" tabindex="5" class="forgotpass" href="javascript:__doPostBack('ctl00$mstPartBase$rptlogin$ctl00$LinkButton1','')">Forgot password?</a>
</div>
<div id="btn" style="float:right;">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnLogin" value="Login" id="ctl00_mstPartBase_rptlogin_ctl00_btnLogin" class="btnlogin" de="" style="margin-left: 83px">
<input type="submit" name="ctl00$mstPartBase$rptlogin$ctl00$btnRegister" value="Register" id="ctl00_mstPartBase_rptlogin_ctl00_btnRegister" class="btnlogin">
</div>
<div class="clearfix">
</div>
<br>
</div>
</fieldset>
</div>
</div>
</div>
</div></div>
CSS
#acloginpod {
background: url("../Images/acloginpodbg.gif") repeat-x scroll 0 0 #ebebeb;
border: 1px solid #d3d3d3;
}
#acloginpod label {
color: #444;
display: block;
font-size: 15px;
margin-bottom: 3px;
}
#caption {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 3px;
color: White;
font-family: arial;
font-size: 14px;
font-weight: bold;
padding: 10px;
text-align: center;
text-shadow: 0 2px 1px #000;
}
.btnlogin {
background: url("../Images/button-background-1.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
border: 1px solid #1db74b;
border-radius: 6px;
box-shadow: 0 0 2px #333;
color: #ffffff;
display: inline-block;
font-family: arial;
font-size: 13px;
font-weight: bold;
height: 33px;
padding: 3px 10px;
text-decoration: none;
text-shadow: 0 2px 1px #000;
}
.btnlogin:hover {
background: url("../Images/button-background-2.jpg") repeat scroll 0 0 rgba(0, 0, 0, 0);
box-shadow: 0 0 3px #046629 inset;
text-shadow: 0 2px 3px #333;
}
.btnlogin:active {
position: relative;
top: 1px;
}
#acloginpod input.textinput {
background: url("../Images/textinputbg.gif") repeat-x scroll 0 0 #ffffff;
border: 1px solid #d3d3d3;
color: #000000;
font-size: 15px;
margin-bottom: 10px;
padding: 7px 0;
text-indent: 7px;
width: 100%;
}
#acloginpod .acloginform {
margin: 22px;
}
#acloginpod form, #acloginpod fieldset {
border-width: 0;
margin: 0 !important;
padding: 0 !important;
}
also here i am pasting screen shot.
extra space is coming between two div called dialog2 & container so just guide me which css i need to modify as a result extra space will not come in left,right,top & bottom side. thanks
here is the js fiddle demo of my code http://jsfiddle.net/tridip/jj2cM/
here is my full code which is working
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="Styles/ui-lightness/jquery-ui-1.7.2.custom.css" />
<style type="text/css">
.noTitleStuff .ui-dialog-titlebar {display:none}
.offscreen {position: absolute; left: -999em;}
.BusyStyles
{
background-image: url('../Images/ajax-loader.gif');
background-repeat: no-repeat;
background-position: center center;
height: 350px;
width: 300px;
}
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
</style>
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#opener2").click(function () {
var $this = $(this);
$this.toggleClass('show');
if ($this.hasClass('show')) {
$("<div id='dialog2'/>").dialog(
{
autoOpen: false,
width: 50,
height: 50,
dialogClass: 'noTitleStuff',
draggable: true,
resizable: false,
open: function (event, ui) {
$(this).dialog("widget").addClass('BusyStyles');
$(this).parent().appendTo("form");
}
}).dialog('open').show()
.load('login.aspx', function (responseTxt, statusTxt, xhr) {
if (statusTxt == "success") {
//alert('data found');
// sHtml = responseTxt;
// var element = $(this).find('#Container'); ;
// //$(element).addClass('offscreen').show();
// var width = element.width();
// var height = element.height();
// //alert('h ' + height + ' w ' + width);
// sHtml = $(sHtml).find('#Container').html();
// $sHtml = $(sHtml)
// $sHtml.css({ 'display': 'none' }).appendTo('div#dialog2');
$(this).dialog("widget").removeClass('BusyStyles');
$("#dialog2").dialog("widget").animate({
width: '346px',
height: 'auto'
}, {
duration: 200,
step: function () {
$("#dialog2").dialog('option', 'position', 'center');
}
});
$("#dialog2").css({ height: 'auto', width: 'auto' });
//$("#dialog2").html(sHtml);
}
if (statusTxt == "error") {
alert("Error: " + xhr.status + ": " + xhr.statusText);
}
});
//$("#dialog2").dialog('open').show();
}
else {
$("#dialog2").dialog("close").dialog('destroy').remove();
}
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<button id="opener2">open the dialog2</button>
</form>
</body>
</html>
I think you have to set padding:0 to this class:
.ui-dialog .ui-dialog-content{
padding:0 !important;
}
fiddle