I have implemented an autocomplete functionality for a textbox in my web application.
The issue here is that my textbox is having width 100px. The loading indicator is a background css added to the textbox when user starts typing into it.
I want the loading indicator to be at the extreme right side of the page.
But since the indicated is appended to the text box(width = 100px), the loading indicator stays within it.
Please let me know how to place the loading indicator to the extreme right.
Demo Jsfiddle
One option is to wrap the elements in a wrapper div then use the :after pseudo selector to add in your loading indicator (simply the text image in the demo, replace this with '' and use a background-image along with height and width). The two examples show justifying within the input to the right, or all the way across the page to the right.
HTML
<div class='wrapper'><input type='text' /></div>
<br>
<div class='wrapper'><input type='text' /></div>
CSS
html, body{
position:relative;
width:100%;
padding:0;
margin:0;
}
input{
width:100px;
}
.wrapper{
display:inline-block;
}
.wrapper:first-child{
position:relative;
}
.wrapper:after{
position:absolute;
content:'Image';
right:0;
}
Related
I am currently in the process of developing my website, where it'll be done entirely with CSS and JS, within a single page, entirely responsive. I am currently stuck on an issue I am not sure there is a way around.
I have a div, that contains 1) a picture and 2) a label. They are currently side by side.
When the mouse hovers over the div, the div extends to the right, but the picture stays the same size and location (left side of the div).
This makes the label appear (visibility set to true with JS) on the right side of the div.
My problem is I cannot figure out a way to center the label between the edge of the picture and the edge of the div it is contained within.
Here is some code:
index. html
<div class="menus1 " id = "menus1" style=" background-e: url('../images/background1.jpg');">
<img class = "images" src = "../images/handshake.jpg" id="pen"/>
<label style=" margin-left:5%; color:black; " class="visibleLabel" id="aboutMeLabel"><b>About Me</b> </label>
</div>
Where you see the "margin-left: 5%" is the closest thing I could get it to centering, it just isn't responsive.
Thank you :)
First of all, take the <style> tags* out of your html - its bad practice. Put all your style into your stylesheet. You can always add another class if needsbe.
by this i mean this kind of thing
style=" margin-left:5%; color:black; "
As for the centering, if you are looking to center the text within the label, just set your label css to text-align:center; - that would save a bit of bother.
Should you want to overlay the text on the image, then set the div background to the actual image? I see you have some kind of background there. You can always put a div within a div if thats your main background. And then include the label with the text-align-centered css within it.
Without a fiddle, or more code, it's difficult to know exactly what you're aiming for, but i hope this helps.
Rachel
Create another css file for the style tag or Add the style into head for example
<style>
text-align:center;
margin-left:5%
color:black;
</style>
JSFiddle
Is it possible to have two divs wrap as if their one line?
<div class="multiLine">
<div class="topLine"></div>
<div class="bottomLine"><div>
</div>
so if top line was all "A"'s and the bottom line was all "B"'s we would see it wrap like
AAAAAAAAA
BBBBBBBBB
AAAAAAAAA
BBBBBBBBB
I'm trying to accomplish this with JavaScript, jQuery, and css3.
This could actually be done just by using CSS and playing with the div positions and the line heights.
For example:
.multiLine {
position:relative;
width:100px;
eight:100px;
}
.topLine {
position:absolute;
word-break:break-all;
line-height:40px;
top:20px;
}
.bottomLine {
position:absolute;
word-break:break-all;
line-height:40px;
}
This would work although it may not be an optimal solution for what you want. It depends on the context and what you want to achieve with this effect.
EDIT: You can see an example of how it would look like here: http://jsfiddle.net/78f94/
You cannot do it with html/css alone. But with Javascript you can find viewport width, truncate the string and add it as content to new inner divs. This could get very complicated when you resize as width changes!
Here is more info on getting viewport width: Get the browser viewport dimensions with JavaScript
This sounds like a stupid question but I cannot figure an easy way of doing it. Let us say that I have a fixed-width Div with the string ABCDEFGHIJ as its content. If I reduce the width it will stop showing HIJ or whatever from the right side. I want the visibility of the content from the left side getting impacted. So, let's say that the div has a width of 100px, then
$(div).css('width':'50px');
should not impact the display of EFGHIJ, for example.
Yes, I could have an inner div and shift its position to the left, for example, by the amount of width reduced. Is there a shorter way of doing this?
Thanks
To Hide the beginning letters but not the last letters, you need to change the direction of the letters using css direction: rtl.
and also to hide the letters, you should mention overflow: hidden and some width to the container.
Working Fiddle
One solution is to use a wrapper and CSS positioning:
jsFiddle example
<div id="outer">
<div id="inner">ABCDEFGHIJ</div>
</div>
#outer {
position:relative;
overflow:hidden;
border:1px solid #999;
width:50px;
height:20px;
}
#inner {
position:absolute;
right:0;
}
I have a dialog box. When I call a show on it, everything in the box shows except for the contents in the header DIV and this only happens in firefox. It shows fine in both IE and chrome. I am doing nothing fancy in the dialog box any ideas?
Also it shows up when I hover over the buttons in the dialog box and when i inspect the dialog box but if I reload the page and click show again, the header is no longer there
CSS:
.formHeader {
padding:10px;
background-color:#f2f2f2;
font-size:14px;
font-weight:bold;
}
.dialogContainerBlock .formHeader{
background-color:#333;
color:#fff;
margin-left:-20px;
padding-right:30px;
margin-top:-40px;
position:fixed;
z-index:990;
width:inherit;
}
HTML:
<div class="dialogContainerBlock" style="width:100px; background:black;">
<div class="formHeader">Hi I work</div>
</div>
position:fixed is relative the body of the document, by using negative margins you are hiding the div outside the boundaries of the body.
The negative margin-top seems to be the most relevant style causing this. Watch out for negative margins for hiding things, because when you want to show them you will need to remember to undo them. You might create a class like "closed" and then have that contain the negative margins, then remove that class when you want to show the div.
Container div contains floated left boxes (equally sized) so it looks like grid. One box has a visible content and hidden one. I want to mouse over and see the hidden content expanded so it stays on top of any other box.
I almost got it working except for the last part - hidden content does not stay on top even with z-index applied.
Here is the sample: http://jsfiddle.net/ZQ63X/
you need the css to be like this;
.item .item-1, .item .item-2{
position:absolute;
background-color:white;
}
.item .item-2{
display:none;
}
.item:hover .item-2{display:block;}
hope I helped
/edit -> this way you dont even need javascript..
Change the styles for .item .item-2 as below.
.item .item-2{
display:none;
position:absolute;
top:0px;
}
Demo
I added background color and z-index for the hidden elements when revealed... Is this what you mean?
http://jsfiddle.net/kmacey1249/ZQ63X/3/