In this input-group,as you can see there's unnecessary gap inside input field and I want to get rid of it
As you can see above,this black line is the distance between my number and link button.How can I remove it?
.resetToDef{
display: block;
width:25.8%;
max-width: 195.1px;
border-radius: 4px;
border: 1px solid #FF7921;
}
.resetToDef a{
font-size:12px;
color:#FF7921;
border: none;
text-decoration-line: underline
}
.resetToDef input{
display:inline-block;
width:57px;
border:none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<div class="resetToDef input-group">
<input type="number" class="form-control" placeholder="30">
Back to default
</div>
From your snippet :
The width is automatically calculated by flex. So if you remove flex, you can then play with the width and the padding.
.resetToDef.input-group > input.form-control {
flex: none;
width: 52px;
padding-right: 5px;
}
Resulting in :
Beware that the little arrows may not look exactly the same size from browser to browser.
Related
I have managed to remove the tooltip entirely, just to see if it was possible to style this tooltip, in any way. But what I actually need is to position it centred below the choose file button.
The CSS for getting rid of the tool tip was basically this:
input[type="file"] {
display: none;
}
Which basically results in the button looking like this
However, if I remove the css, I am left with this mad button inside of a button mess which includes the tooltip inside the button
To be clear, both the button and the button within the button do the same thing. I am not 100% clear on why it displays like it as this is my first time working with a file upload button which isn't my own code.
Followed by this Codepen you can simply do it like this:
<html>
<style>
.custom-file-input {
color: transparent;
}
.custom-file-input::-webkit-file-upload-button {
visibility: hidden;
}
.custom-file-input::before {
content: 'Select some files';
color: black;
display: inline-block;
background: -webkit-linear-gradient(top, #f9f9f9, #e3e3e3);
border: 1px solid #999;
border-radius: 3px;
padding: 5px 8px;
outline: none;
white-space: nowrap;
-webkit-user-select: none;
cursor: pointer;
text-shadow: 1px 1px #fff;
font-weight: 700;
font-size: 10pt;
}
.custom-file-input:hover::before {
border-color: black;
}
.custom-file-input:active {
outline: 0;
}
.custom-file-input:active::before {
background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}
</style>
<input type="file" class="custom-file-input" />
</html>
Now the question is how it works?
To get the answer know about css ::before selector here
Hope this helps!
I've been doing a huge amount of reading here and on other websites about how to dynamically increase an input field's width based on its content. All the solutions so far have only worked in part, but I have found a website where it works perfectly:
https://paper.fiftythree.com/search
They've even given some vague instruction as to how they did it:
http://making.fiftythree.com/fluid-text-inputs/
But I can't for the life of me work out how to implement this on my own website.
This is my form structure at the moment:
<form action="/" class="search-form">
<input type="text" name="s" class="_input" placeholder="What are you looking for?">
<button type="submit" class="_button">Search</button>
</form>
My reason for trying to do this is that the form as a whole has a border underneath it. I would then like text that is typed in to have its own border-bottom 'grow' with the text in a different colour. The input field being a smaller width with its own border works, but I am stuck on a smooth dynamic experience for its width.
Could anyone help? Thanks.
On this example we can do this:
Input positioned absolute with fixed width this never changes, and will get the data
An element that will change the width based on the value from the input and the text transparent so that way we only see the input text.
Centered elements creating the ilusion of increase of the width
$('input').on('keypress', function() {
$('span').text($(this).val())
})
.container {
text-align: center;
position: relative;
font-size:25px;
}
.container img, .container span {
display: inline-block;
line-height: 50px;
margin-right: -4px;
vertical-align: middle;
}
.container span {
padding: 0 10px;
font-family: sans-serif;
color: transparent;
overflow: hidden;
white-space: nowrap;
max-width: 250px;
}
.container input {
width: 250px;
border: none;
text-align: center;
font-size:inherit;
padding: 0 50px;
position: absolute;
left: 50%;
top: 50%;
z-index: 5;
background: transparent;
transform: translate(-50%, -50%)
}
input:focus {
outline: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<img src="http://placekitten.com/50" alt="">
<span>Type here</span>
<input type="text" placeholder="Type here">
<img src="http://placekitten.com/50" alt="">
</div>
Note: Still have some issues when deleting text, but you get the idea
In my case I have a popup "window" with a title and a close button which is controlled with some script. What I want to do is to put gallery of divs with left-float so when the screen resizes they will stacked accordingly (eg. in very small screens they will go just 1 under another) so that's why I think that float is the best option here.
I am not sure how to do it and I would like your help as I want it to be to the center covering a specific percentage of area (so it can be more responsive). I would like you to just tell me what steps I should follow.
I was thinking on making a custom class .gallery set float to left but I don't know how to set everything else in order to work nice.
HTML
<script> document.write('<div class="js">'); </script>
<nav><ul><li id="buttonc">click</li></ul></nav>
<div class="vidar-bg">
<div id="vidar">
<span>my divs×</span>
</div>
</div>
<script> document.write('</div>'); </script>
CSS
.js .vidar-bg{
position:fixed;
left:0;right:0;
top:0;bottom:0;
z-index:100;
background-color:rgba(50,50,50,0.5);
display:none;}
#vidar{
position:absolute;
top:50%;
left:50%;
z-index:101;
width:80%px;
height:80%px;
left:10%;right:10%;
top:10%;bottom:10%;}
#vidar span{
display: block;
background:#5DC3A7;
padding: 10px;
color: #fff !important;
background: #f00;
z-index:100;}
#closevid{
float: right;
color: #fff;
font-family: serif;
font-size: 18px;}
#closevid:hover{color: #000;}
Live code here: http://codepen.io/mariomez/pen/OPBVxY
thank you all in advance for your help :)
This CSS should do it:
.gallery-item {
width: 150px;
height: 150px;
background-color: #F00;
color: #FFF;
text-align: center;
font-size: 2em;
line-height: 150px;
margin: 5px;
float: left;
}
Then you just have to add the following HTML to your page:
<div id="gallery">
<div class="gallery-item">DIV</div>
</div>
Actually, most of the CSS properties are there just to create the red square with centered white text in the image you provided. To do what you want you just need the float: left property like you said yourself.
I have an issue with some CSS shrinkwrapping. First the (very simple) code...
<!doctype html>
<html lang="en-US">
<head>
<title>Device Activation</title>
<meta charset="utf-8">
<style type="text/css">
body {
background: white;
font-family: "Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
//border: 1px solid;
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
//display: inline-block;
padding: 0px 10px;
//text-align: justify;
//-moz-border-radius: 40px;
}
</style>
</head>
<body>
<h1>Boogy-woogy</h1>
<div id="start" class="toggleable">
<p>Test</p>
</div>
<script type="text/javascript">
function makeVisible() {
// Not here yet, but that's okay...right?
}
</script>
</body>
</html>
The issue: When you remove the comments from border: 1px solid; the div top and bottom margins will increase significantly.
I have done some research and I understand that this issue relates to collapsing-margins, but I have tried several fixes and nothing seems to effect my end result.
Any help would be greatly appreciated.
i think what you mean is because the p has got default margins and padding. add
p {
margin:0px;
padding:0px;
}
to the css
Maybe your code sample is just a typo.
If not, then please note that with JavaScript comments, you have the options of:
// This is a javascript comment
/* This is a javascript comment as well... */
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Code_comments
If you want to make a CSS comment,
you cannot use the // this is a comment snyntax.
You need to use the /* this is a comment */ syntax.
http://www.w3.org/TR/CSS21/syndata.html#comments
Now, when I hide the border: 1px solid line, I do not see the top or bottom margin changing. But I think what was happening with the improper syntax you used in the code in your question, the div was resorting to display: block because the inline-block rule was not being applied. Because inline-block was not being applied, the div stretched to its full width.
http://jsfiddle.net/2f59k/
body {
background: white;
font-family:"Arial Black", Gadget, sans-serif;
}
div {
background: #dddddd;
/* border: 1px solid;*/
border-radius: 40px;
box-shadow: 10px 10px 5px #888888;
display: inline-block;
padding: 0px 10px;
text-align: justify;
-moz-border-radius: 40px;
}
Again, if nothing else is gleaned from this answer,
this is not a CSS comment:
// border: 1px solid;
This is a CSS comment:
/* border: 1px solid; */
UPDATE
This issue has nothing to do with border radius, borders, etc. Your problem, if understood solely as the amount of space above and below the text, yet inside the grey background, is that the margin surrounding the text.
This increase is significant, but not nearly as significant as the change in the width when the div goes between block and inline-block.
Setting the margin of the inner paragraph to margin: 0 resolves the issue.
http://jsfiddle.net/74eTg/
<div id="inputs">
<input type="text" value="">
<input type="text" value="">
</div>
<input type="button" id="add" value="Add input">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$('#add').click(function(){
$('#inputs').append('<input type="text" value="">');
});
});
</script>
Within the code above, i want to add a search icon for every new input generated with a button (id=add ; not shown here for simplicity). This would be a typical input:
<label>
<input type="text" class="search" name="word" autofocus="autofocus" />
<span class="search-icon">
<span class="glass"></span>
<span class="handle"></span>
</span>
</label>
With CSS i could position the search icons in a fixed way.
Thanks
Here's the CSS code that I'd use:
#add {
padding: 17px;
padding-left: 55px;
width: 300px;
border: 1px solid #f5f5f5;
font-size: 13px;
color: gray;
background-image: url('http://i47.tinypic.com/r02vbq.png');
background-repeat: no-repeat;
background-position: left center;
outline: 0;
}
Note: I added a lot of extra codes to make the search box look better, the necessary code to make the search box apear is padding-left, background-image:url, background-repeat and background-position. Replace "http://i47.tinypic.com/r02vbq.png" with whatever search icon you want.
It's also important to know that now in HTML5, most browsers render
<input type="search" results>
with a search icon. The input type search makes it a search box, with a "x" button to clear, and adding "results" also displays a search box. Of course you could also add an x button with CSS and JavaScript to a regular search box. It's also important to note that input type search allows very little styling. Demo on Safari on a Mac:
Tell me if this helps you, and make sure to mark as the answer. :)
Put the image into the span, for example using background-image, then give it a relative position and move it to the left so it overlaps the right end of the search box, for example:
#g-search-button {
display: inline-block;
width: 16px;
height: 16px;
position: relative;
left: -22px;
top: 3px;
background-color: black; /* Replace with your own image */
}
Working example on JSBin
Note: This is not my answer, i've found it here
There's a step by step on kirupa.com here: http://www.kirupa.com/html5/creating_an_awesome_search_box.htm
With relevant bit of CSS for you here:
input[type=text] {
width: 260px;
padding: 5px;
padding-right: 40px;
outline: none;
border: 2px solid #999999;
border-radius: 5px;
background-color: #FBFBFB;
font-family: Cambria, Cochin, Georgia, serif;
font-size: 16px;
background-position: 270px -10px;
background-image: url('http://www.kirupa.com/images/search.png');
background-repeat: no-repeat;
}