I am having trouble to put the button (enter) next to my input comment section.
I have tried many options like align=right and working on the paddings but it did not do the trick. When I take out the starts wrapper it works but doesn't when it is in it.
Any help would be greatly appreciated!
Thank you in advance
Here is a Screenshot of the page.
Here is my HTML:
.BoxInfo {
display: flex;
justify-content: center;
align-items: center;
height: 1000px;
}
.BoxDesign {
width: 70%;
height: 500px;
padding: 15px;
padding-left: 50px;
padding-right: 50px;
border-radius: 0.9rem;
border: 1px solid gray;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
}
.ButtonEnter {
padding-top: 200;
width: 60px;
color: red;
}
.CommentSection {
width: '100%';
margin-right: -4px;
margin: 0;
display: inline-block;
}
<div class="BoxInfo">
<div class="BoxDesign">
<h3 class="police_fonce">My box</h3>
<hr/>
<h3>1 Info</h3>
<h3 class="police_fonce">2 Info</h3>
<h3 class="police_peu_fonce">3 Info</h3>
<div class="ec-stars-wrapper">
★
★
★
★
★
<a id="textCom" href="#" title="s5"> Reviews</a>
</div>
<input type="text" class="CommentSection" placeholder="Write a comment" />
<Button class="ButtonEnter">Enter</Button>
</div>
</div>
Just use position: and left: or right: in your CSS. Here is MDN and w3schools for reference.
You could do something like this:
position: absolute;
left: 500px;
Or
position: relative;
left: 50px;
Whichever you find best for you.
So in order to make the button and the input have a relative position to one another, they need to share a common father (perferably an individual parent) so just put a wrapper div around them:
<div id="comment_container">
<input type="text" class="comment_input comment_element" placeholder="Write a comment" />
<Button class="comment_submit comment_element">Enter</Button>
</div>
Now that your elements share a common father - wrapper, you can start by adding a width value to the parent. Id keep this as a pixel value but you can convert it to % or vw or whatever. Then you will want to add a small margin to the button and the input (give them space to breath) and finally specifying their width. You can play around with the values or copy mine. Finally adjust height of both elements and enjoy the magic of good html and css.
.comment_element{
display: inline-block;
padding: 10px 5px;
border: none;
}
#comment_container {
width: 400px;
height: auto;
background: #4278DD;
padding: 10px 5px;
}
.comment_input {
width: 300px;
}
.comment_submit {
width: 80px;
cursor: pointer;
}
I added a few CSS tricks to spice things up.
According to image you have to decrease the with of button like
without quote.
.CommentSection {
width: 100%;
}
As mention above your style need to change in padding-top of button (approx)
.ButtonEnter{
padding-top:20px;
width:60px;
color: red;
}
or else try out bootstrap.
Related
I have absolutely positioned inputs which usually have 1 digit length as their input.
I set the input's width to 8px and everything works great. However, sometimes we can have up to 4 digits in the input. In this case, I want the input to automatically expand to fit, while retaining center alignment.
The inputs are positioned on a grid in a specific fashion and require absolute positioning.
For a simplified example, https://jsfiddle.net/joshuaohana/2var8ftL/1/
In this case I want to be able to type 1234 as an input, the box should expand with the input getting longer, and the center of the input box should remain in the same location.
<div class="container">
<div class="input1">
<input placeholder="1" />
</div>
<div class="input2">
<input placeholder="2" />
</div>
</div>
and the css
.container {
position: relative;
padding: 10px;
border: 1px solid blue;
width: 150px;
height: 150px;
}
.input1 {
position: absolute;
top: 5px;
left: 5px;
}
.input2 {
position: absolute;
top: 50px;
left: 25px;
}
input {
width: 8px;
}
The easiest way to make it happen is to have an element reflecting the value of an invisible input field. There is no way to adjust input width by the content without heavy trickery. That is, if you don't need full edit capabilities, like moving the cursor.
If you do, I would opt for having an invisible <div> element and setting its value to whatever you type in your <input>. Then, you'd read the width of that <div> and set the same width to your <input>. Just remember that they both need to have the same font-family, font-size and any other font-related property.
If you're open to using contenteditable then this should be easy to accomplish
.container {
position: relative;
padding: 10px;
border: 1px solid blue;
width: 150px;
height: 150px;
}
.input1 {
position: absolute;
top: 5px;
left: 5px;
}
.input2 {
position: absolute;
top: 50px;
left: 25px;
transform:translateX(-50%);
}
[contenteditable] {
border: 1px solid;
min-width: 8px;
max-width: calc(8px * 4);
white-space:nowrap;
overflow:hidden;
}
<div class="container">
<div class="input1">
<div contenteditable></div>
</div>
<div class="input2">
<div contenteditable></div>
</div>
</div>
I am looking at the Instagram website. I notice that they put a zoom icon inside the padding of adjacent input. I wonder how this is done, can somebody show me an example
Thanks.
Here is the example for jQuery search box on focus show hide icon as per your reference. I hope this answer will be helpful.
$('.btn-close').hide();
$('.fa-search').show();
$('.input-text').on('focus', function() {
$(this).siblings('.btn-close').show();
$(this).siblings('.fa-search').hide();
});
$('.btn-close').click(function(e) {
$('.fa-search').show();
$('.btn-close').hide();
e.stopPropagation();
});
$('.input-text').on('focusout', function() {
$(this).siblings('.btn-close').hide();
$(this).siblings('.fa-search').show();
});
.input-text {
border: 1px solid #888;
min-height: 40px;
font-size: 16px;
padding: 0 25px 0 5px;
}
.input-box {
position: relative;
display: inline-block;
}
.input-box .fas,
.btn-close {
position: absolute;
right: 0;
padding: 11px 4px;
top: 0;
color: #888;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="input-box">
<input type="text" class="input-text" placeholder="text">
<i class="fas fa-search"></i>
<a class="btn-close" href="#"><i class="fas fa-times-circle"></i></a>
</div>
The answer is that they don't actually put the icon inside the input box. The just draw a rectangle around both the icon and the <input>. The icon itself is added to the <span> on the line right after the highlighted <input> in the image in the question. Look for the class coreSpriteSearchIcon.
When I inspected that <span>, I saw these styles applied:
background-image:
url(/static/bundles/metro/sprite_core_2x_6ba81dcece9b.png/6ba81dcece9b.png);
}
background-size: 410px 396px;
background-position: -240px -366px;
height: 10px;
width: 10px;
The background-image is the sprite file (an image containing multiple smaller images). background-size ensure that the image isn't stretched. background-position tells you where to find the search icon within the larger sprite image. And, width and height tell you how much of the image to display.
They were able to place it where it is by using absolute positioning:
left: 11px;
position: absolute;
top: 9px;
z-index: 2;
One of the way to achieve this is to use position: absolute and put input into a wrapper. Let me show you:
.input-wrapper {
position: relative;
}
.input-wrapper img {
position: absolute;
top: 5px;
left: 5px;
}
input {
height: 40px;
width: 200px;
padding-left: 35px;
font-size: 20px;
box-sizing: border-box;
}
<div class="input-wrapper">
<img src="https://picsum.photos/30"/>
<input type="text" />
</div>
So basically we use position: relative to move img relatively to it. Also note, that you have to add extra padding(left one in this case) so text won't overlap with icon.
There are a lot of ways to do the same: position: relative, negative margin, background-image, utilising of pseudo-elements, but absolute positioning is the most semantically correct in my opinion.
I have an outer div, that has two divs.
One div works as a background and has a background image, and other one works as the content and has a background color of #fff, the one that works as a content has a title and an input.
I was trying make a border for my input , that shows what is behind the content div.
Because the proportions of the the background div changes on hover(on pupose), changing the way the border of the input should look.
So i decided to have a div as the border of the input.
But i have been stuck on trying to make the border to show what is behind the content div.
Here is the code:
#chat_bi{
position: absolute;
left: 0;
top:0;
background-repeat: no-repeat;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
background-size: cover;
z-index: -1;
filter: brightness(60%);
height: 100%;
width: 100%;
transition: 0.5s;
}
#outer_div_chat{
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: calc(100% - 400px);
padding: 50px;
}
.chat{
padding: 15px;
z-index: 2;
box-shadow: 0px 0px 15px rgba(0,0,0,0.3);
background-color: #fff;
}
#outer_div_chat:hover #chat_bi{
width: 105% !important;
height: 105% !important;
filter: brightness(95%);
}
#start_up_chat_div{
display: flex;
flex-direction: column;
}
/*text-input*/
.text_input_div{
padding:5px;
background-image: url("http://wallpapercave.com/wp/GProxpt.jpg");
}
.text_input{
outline:none;
padding:2px 4px;
border:none;
width: 100%;
box-sizing: border-box;
}
<div style="height:625px; overflow:hidden;">
<div id="outer_div_chat">
<div id="chat_bi"></div>
<div class="chat">
<div id="start_up_chat_div" >
<span style="padding-bottom: 10px;">Random text</span>
<div class="text_input_div">
<input type="text" class="text_input">
</div>
</div>
</div>
</div>
</div>
I kind of guess that one solution is applying, the same background to the border of the input div, in the same position, and size, but i was wondering if there is another way around, a more proper way around.
You can try something like this:
CSS
.bigcrazydivwithbackground {
background: url('https://images.pexels.com/photos/28477/pexels-photo-28477.jpg?w=1260&h=750&auto=compress&cs=tinysrgb');
}
.crazytitle {
background: white;
padding: 10px;
}
.crazyinner {
border: 20px solid white;
}
.crazyinputwrapper {
margin: 20px;
}
input {
display: block;
width: 100%;
background: white;
line-height: 20px;
border: none;
}
HTML
<div class="bigcrazydivwithbackground">
<div class="crazybox">
<div class="crazytitle">
Title
</div>
<div class="crazyinner">
<div class="crazyinputwrapper">
<input type="text" />
</div>
</div>
</div>
</div>
https://jsfiddle.net/hLphc3nu/
Maybe instead of position: absolute and position: relative, make them both position:absolute so the z-index's will work. Sometimes using a negative z-index might also be the problem.
Start at 0 and go up from there, rather than using -1. For instance, set the div containing your inputs and labels to a z-index of 100, and give the image you want to place behind it a z-index of 50.
I have the following fiddle
The HTML is created by javascript. I can add/change the styles to the div's if needed but I cannot change the order of the HTML code.
I know I can use:
text-align: center;
But there is a catch :) The div containing the 4 images is put in the HTML code before the <h3> is. Since I cannot edit the HTML order I figured to lower the DIV with the images using margin-top: 70px; The problem is that this has an effect on the text in the <h3> which isn't centered anymore.
How to solve this? (pref with css3)
It's okay if the values of the DIV's in the HTML need to be changed in order to fix it
(I can change them)
Thanks a lot
The HTML code:
<div class="solitaireprefs" style="position: absolute; left: 0px; top: 0px; width: 80%; height: 80%; z-index: 100;">
<form method="get" action="">
<div style="float: right; margin-top: 70px; display: table; vertical-align: bottom;">
<div><img src="cardsets/test/spades1.svg" alt="Ace spades" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/clubs7.svg" alt="7 clubs" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
<div><img src="cardsets/test/hearts12.svg" alt="Queen hearts" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"><img src="cardsets/test/backred.svg" alt="Card" align="bottom" style="vertical-align: bottom; width: 119px; height: 166px;"></div>
</div>
<h3>Options</h3>
<h4>Images for size 119</h4>
</form>
</div>
The CSS:
div.solitaireprefs {
background-color: #fff;
border-radius: 7px;
border: 1px solid #ddd;
}
div.solitaireprefs form {
padding: 0 15px;
}
div.solitaireprefs h3 {
background: #e9e9e9;
margin: 0 -15px;
padding: .7em 0;
text-align: center;
border-radius: 7px 7px 0 0 ;
}
The real answer to the question is to figure out how you can arrange the dom elements correctly. Semantics is more important than you think. But since you are already kinda hacking the visuals, the quickest and dirtiest hack is to fix your padding:
padding: .7em 45%;
on the div.solitairprefs h3
Tweak the percentage to get the middle, but the missing 10% of the sum of left and right padding on the h3 is the space between where the options text appears (so tweak accordingly).
And since you're already manually centering, you can go ahead and get rid of the
text-align: center;
Instead of float:right; and margin:top on the element that contains the images, position it absolutely.
{ position: absolute;
top: 70px;
right: 10px;
}
Using absolute positioning takes it out of the flow of the document; which is what is messing up the centering on your h3.
HTML:
<div>
<img src="some/path/" class="thumbnail" />
<input type="file" class="image_upload" />
</div>
CSS:
div
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}
.thumbnail
{
width: 100%;
}
.image_upload
{
opacity: 0;
position: absolute;
}
I want <img> and <input type="file"> to overlap with each other and both fill up their parent <div>. How can I fix my CSS to achieve that?
It is not possible to change the size of a file input. You could redesign the file-input and, but the size of the clickable area isn't modifiable.
Edit: Aaron shows a first trick, and I added the second one, so see this fiddle in which the whole image is clickable for the file input.
The trick is to set font-size to a large value, then opacity to zero and finally add overflow: hidden to the parent element.
File input fields don't really play by the rules (or at least as you'd expect). To accomplish what it sounds like you're after, you've gotta get creative. Example: http://jsfiddle.net/ZTPCd/
Its Possible.
Add this css for input type file
.My_CSS {
opacity: 0;
border: none;
border-radius: 3px;
background: grey;
position: absolute;
left: 0px;
width: 100%;
top: 0px;
height: 100%;
}
You'll need to add relative positioning to the parent div, so the input field won't be positioned relatively to the browser window. (Google for more info about absolute/relative positioning).
And you'll have to add some specific positioning (top/left) to the input tag.
http://jsfiddle.net/NbhQY/
(Your outer div will have to be a little bit bigger, though, if it needs to include a file upload.)
Here you need to use some JavaScript. Since I don't see any way to change the CSS for input(type=file) itself, I made it hidden but the <div> responsible for <input type='file'>.
var box = document.getElementById("box");
var file = document.getElementById("file");
box.addEventListener('click', function(){
file.click();
})
#box {
font-size: 30px;
text-align: center;
width: 300px;
height: 200px;
padding: 10px;
border: 1px solid #999;
position: relative;
}
p {
position: absolute;
top: 80px;
color: white;
}
#file {
width: 100%;
height: 100%;
visibility: hidden;
z-index: 100;
}
<div id="box">
<img id="image" src="http://guide.denverpost.com/media/photos/full/mountain_600x600.jpg" width="100%" height="100%"/>
<input type="file" id="file"/>
<p>Click to import</p>
</div>