I am trying to create a search bar with results that appear right under the bar, but I am faced with a number of problems while trying to implement this. I am new in web programming, which is why I prefer to use bootstrap because of its compatibility on different screen sizes. In this case, I don't know which method to use and I simply created "div" under the bar, but I am not sure if it is the correct way. Would be happy if you gave me suggestion.
Below I included the code with css that I used.
I gave hard-coded value for the width as 174px, while I need something that automatically
identifies the width of search bar and sets that value as maximum.
ID="searchResults" is the string that I get in real time using jQuery and Ajax.
Would be happy if you give me advice about the way how to implement this.
<div class="navbar-form navbar-left">
<input class="form-control" placeholder="Search..." type="text"
autocomplete = off id = "autocomplete_search">
<div id="searchResults"
style="position: absolute;
width: 174px;
background: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 200px;
overflow-y: auto;
margin-top: -3px;"> </div>
</div>
your attemp is ok. .navbar-form navbar-left needs to be position: relative;.
If you do that, you can use this element to position and size the absolute container of #searchResults.
Your HTML is not valid, here is a more clean version:
<div class="navbar-form navbar-left">
<input class="form-control" placeholder="Search..." type="text" autocomplete="off" id="autocomplete_search" />
<div id="searchResults">So much results...</div>
</div>
Here is some CSS to put the html in shape:
.navbar-form
{
position: relative;
/* just a little demo */
margin-left:200px;
}
.form-control
{
width: 100%;
}
#searchResults
{
position: absolute;
width: auto;
background: white;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
max-height: 200px;
overflow-y: auto;
border: 1px solid gray;
/*This is relative to the navbar now*/
left: 0;
right: 0;
top: 20px;
}
And here is a little demo: http://jsfiddle.net/NicoO/ZAyN9/
Related
Any ideas where I went wrong? I have tried setting width to 0 inside CSS and using JavaScript to add width it still didn't work.
function showsidenav(){
document.getElementsById("barres").style.display = "block";
}
.opened-side-nav {
background-color: ghostwhite;
width: 30%;
height: 100%;
position: absolute;
border-right: black 2px solid;
z-index: 1;
overflow: hidden;
display: none;
}
<!--Nav Bar-->
<div class="opened-side-nav" id="barres">Content</div>
<div class="logo">
<input id="5055" class="showsidenavbar" type="checkbox" onclick="showsidenav()">
<label for="5055">=</label>
</div>
</div>
Use getElementById and not getElementsById. For id, there's no 's' in Element. The 's' in the spelling is causing it, that is if your code is working fine.
I want to create a div where one of the children is visible and one is out of the div, I've been using overflow:hidden for this, however whatever i try i can't seem to get this to work, I've tried positioning one absolute and that works, but as soon as I extend the div to reveal the extention it will overlap it obviously. Any help would be great, here are some pictures of the main concept.
Before Being Clicked
After Being Clicked
note: I am using react js to develop this, if you could make a codepen or something in vanilla javscript just as a concept of the main functionality and then I will convert it to react.
Thanks in advance :)
Here is one way:
.expandable {
position: relative;
}
.expandable>div {
width: 200px;
transition: all 1s;
overflow: hidden;
background-image: url('https://via.placeholder.com/200');
background-repeat: no-repeat;
min-height: 200px;
border: 1px solid black;
}
.expandable>div>img {
position: absolute;
width: 200px;
}
.expandable>input { display: none; }
.expandable>label {
position: absolute;
top: 90px;
left: 210px;
transition: all 1s;
background-image: url('https://img.icons8.com/flat_round/64/000000/arrow--v1.png');
width: 20px;
height: 20px;
background-size: cover;
background-repeat: no-repeat;
transform: rotate(0deg);
}
.expandable>input:checked+label {
left: 410px;
transform: rotate(180deg);
}
.expandable>input:checked~div {
width: 400px;
}
.expandable>div>div {
width: 200px;
padding-left: 200px;
}
<div class="expandable">
<input type=checkbox id='ex1'>
<label for='ex1'></label>
<div>
<div>
<!-- right side content -->
<h1>Stuff here</h1>
<p>lorem ipsum</p>
</div>
</div>
</div>
This uses the label as the button. When clicked, it triggers the input to be checked/unchecked. We then use the status of the checkbox to change our CSS, and we use transitions so that it is smooth, works across all modern browsers, and is very battery efficient for mobile devices.
I was wondering if you can help me with this.
I have a div (in white) where I need to put two circular buttons (in green) on the borders. Everything should be done with CSS.
It should look like this:
Screenshot
Now, the thing is that I don't know the size of the white div, and I won't know it at the time of creation, because it will get added to the DOM afterwards. All I know is that the white div has a percentage width and height relative to its future parent. So, at the time of creation, since it's not yet added, any calls to width(), height() or its css values won't work.
I've seen all those snippets that tell you how to make a div with a fixed aspect ratio. I need this now, I need the button to be 1:1, but all I know about the dimensions, is that it has to be 100% of the height of the white div (and therefore, its width should be equal as its height). All the examples I've seen assume that you know the width and to make the height keep the ratio. In my case, what I know is the height (100%) and I want the width to adapt.
I have no idea how to achieve this.
This is my snippet:
body{
background-color: #DCDCDC;
}
.container {
width: 50%;
height: 7%;
background: white;
border-radius: 20px;
position: absolute;
}
.arrow {
background: green;
border-radius: 20px;
height: 100%;
position: absolute;
}
.arrow:after{
content: "";
display: block;
padding-right: 100%;
}
.arrow:last-child {
right: 0;
}
<div class="container">
<div class="arrow"></div>
<div class="arrow"></div>
</div>
https://jsfiddle.net/7bxecL9m/
If you know how can I do this without entering any fixed value (jQuery use is of course valid), I'd really appreciate it.
Thanks.
There are many variables here:
Since container's height is % and circle radius is px units, one is static and the other one will resize.
The only way to preserve 1:1 with just html/css, considering the container's height % will resize circle's height as well, would be to isolate circle's div width & height to something static like px units.
Now, since you said no fixed dimensions, the only thing I can think of is to comment .arrow's 100% height, to prevent resizing other than 1:1, and nesting a div inside .arrow to restrain 1:1 with static units (ideally impacting .arrow directly would be less code but if you don't want/can't set them on that element, maybe you consider this).
If you want the circle to remain circular as the content expands, you need to dynamically adjust the height to match the width. You could use Javascript to achieve this, but your border-radius is tied to container's in px static units, since container will always be bigger something like border-radius: 50% wouldn't work for both, 50% radius of circle would never match 50% of container's (that is, if you care about radius alignment).
body {
background-color: #DCDCDC;
}
body,
html {
height: 100%;
}
.container {
width: 50%;
height: 37%;
background: white;
border-radius: 20px;
position: relative;
}
.arrow {
background: green;
border-radius: 20px;
/*height: 100%;*/
position: absolute;
overflow: hidden;
}
.bLimit {
height: 40px;
width: 40px;
line-height: 40px;
}
.arrow:after {
content: "";
display: block;
padding-right: 100%;
}
.arrow:last-child {
right: 0;
}
<div class="container">
<div class="arrow">
<div class="bLimit">button overflow</div>
</div>
<div class="arrow">
<div class="bLimit">button</div>
</div>
</div>
Why not doing a fixed width in percent for your arrow :
.arrow {
background: green;
border-radius: 20px;
height: 100%;
position: absolute;
width: 10%;
}
body{
background-color: #DCDCDC;
}
.container {
width: 50%;
height: 7%;
background: white;
border-radius: 20px;
position: absolute;
}
.container:after,.container:before{
content: " ";
display: block;
padding: 4%;
z-index: 999;
top: 0;
position:absolute;
background: green;
border-radius: 50%;
}
.container:before {
left: 0;
}
.container:after{
right: 0;
}
<div class="container">
</div>
You can achieve using before and after CSS pseudo selectors. You check this Example.
There is a posibility to get this result using a image (that won't show) of the required ratio.
In this case, the ratio is 1:1 so we will use an image of 50px (but it can be any size)
.container {
width: 300px;
height: 20px;
border: solid 1px blue;
margin: 40px;
position: relative;
}
.container:nth-child(2) {
height: 40px;
}
.container:nth-child(3) {
height: 60px;
}
.arrow {
height: 100%;
background-color: red;
opacity: 0.5;
position: absolute;
border-radius: 50%;
transform: translateX(-50%);
}
.arrow:last-child {
right: 0px;
transform: translateX(50%);
}
img {
height: 100%;
opacity: 0;
}
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
<div class="container">
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
<div class="arrow">
<img src="https://placehold.it/50x50">
</div>
</div>
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
I'm creating a dropdown settings box, and inside it I want to be able to have dropdown submenus to group settings. The submenus should slide down, and to do so, I am using jQuery to slide down the div that contains them. However, the absolutely positioned toggles that I have appear immediately, despite the fact that they are outside the div, which is set to overflow: hidden, as can be seen in this image:
This is a sample from my html:
<div id="settings-content" class="hover-content">
<div class="setting-expandable">
Panels to display<span class="expand-button pointer">+</span>
<div class="hide expand-content">
<label class="pointer">YouTube - LinusTechTips
<input type="checkbox" class="display-none setting" data-setting="panel.yt.ltt"><span class="toggle"></span>
</label>
<br/>
<label class="pointer">YouTube - TechQuickie
<input type="checkbox" class="display-none setting" data-setting="panel.yt.tq"><span class="toggle"></span>
</label>
<br/>
<label class="pointer">YouTube - Channel Superfun
<input type="checkbox" class="display-none setting" data-setting="panel.yt.csf"><span class="toggle"></span>
</label>
<br/>
</div>
</div>
</div>
and my CSS:
.toggle {
height: 13px;
margin: 3px 0;
position: absolute;
right: 10px;
width: 27px;
}
.toggle::after {
background - color: red;
content: "";
height: 13px;
position: absolute;
right: 0;
width: 13px;
transition: 0.2s linear all;
}
.expand-content {
margin-left: 10px;
margin-top:3px;
overflow:hidden
}
.hover-content {
position: absolute;
width: 500px;
right: 15px;
background-color: inherit;
top: -15px;
border: 2px black solid;
border-radius: 14px;
padding: 5px;
display: block;
}
JS is essentially $("...").click(function(){ $("...").slideUp(); });
If I deliberately position them outside of the content area, and set overflow hidden on each thing in turn, it only hides when it affects the #settings-content container div.
I have made a fiddle for it here: http://jsfiddle.net/S4DSh/1/
I would greatly appreciate some guidance as to how I should fix this because it looks pretty weird at the moment.
Thanks in advance!
Set it's container to position:relative and overflow:hidden.
.setting-expandable {
position:relative;
overflow:hidden;
}
DEMO
You could also just add position:relative; to .expand-content but that looks like it moves the toggles a little bit.
Also see this answer it's basically the same question.
What you want to do is change the z-index for your divs.
You should put a lower z-index value on things you want to stay in the back and higher z-index values to what you want in the front. And correct me if I'm wrong but, a value of -1 would be behind the body. You can put any value like 999
#DivInTheBack{
z-index:12;
}
#DivInTheFront{
z-index:13;
}
You should take a look at the w3schools reference: http://www.w3schools.com/cssref/pr_pos_z-index.asp