I'm building a mobile webapp and looking for a solution for the following:
[searchbox [img]]
where searchbox should be of width 100%. and img inside the inputbox.
Tried three solutions of which none works well enough:
First, wrap with div for 'false' border+borderless inputbox.
[div[textbox][img]]
Problem looks ok but on focus of textbox the textbox gets and ugly border anyway.
--
Second, position image relative (left:-40px)
[textbox][img]
Problem Can't set textbox width to 100%, img wraps to next row, no respect to -40px;
--
Third,
Background-image in textbox, right-align
Problem: Image isn't clickable.
Hints here? Perhaps bg-img + relative img (0x0px) to catch the click, but it itches.
Your first solution should work fine, just add input:focus {outline:none} to your css:
http://jsfiddle.net/L9gyp/2/
Related
I have a select in a dialog box. The text for the options is long. When the page is loaded the select box should be rendered with static width (i.e. 50px), but when the dialog box will resize, this select should also resize. When I put width:100% initial size of select is adjusted to text from it. When I put width:50px the initial size is ok, but it isn't resized. An example on plunker.
The main problem is that this select is generated by Primefaces and I can't use this example.
I hope that exists pure CSS answer without using jQuery or JS.
You may apply the following css change
.mySelect{
min-width:50px;
max-width:50px;
width:auto;
}
Let me see how well I can explain this. I am working on an index on a website that is in a div that is pushed off of the page via css margin with only part of it showing. When you hover over the part that is showing, the rest slides down into view. This works fine. I already have the transition effect in place for the margin change slide and also a background color change with rgba. It looks very nice.
My question is, the index is around 500px wide and the visible part before hovering is 70px high. So that is a fairly large area of the screen for people to accidentally catch with their mouse hover if they are not trying to display the index div. Is there some way that I can only make part of the initially visible portion of the div activate the hover transition animation to bring the full div into view? Or perhaps someway I can attach a smaller div to this one as a sort of tab, that will bring down the larger div and itself via transition on hover?
I hope this makes sense. Thank you.
Here is the basic idea of the current code:
#index {
position:fixed;
background:rgba(0,0,0,0.3);
width:500px;
height:500px;
top:0;
left:50%;
margin:-430px 0 0 -500px;
transition:0.5s;
-moz-transition:0.5s;
-webkit-transition:0.5s;
-o-transition:0.5s;}
#index:hover {
background:rgba(0,0,0,0.8);
margin:0 0 0 -500px;}
jsFiddle:
http://jsfiddle.net/wZ8zX/1/
html:
<div id="slider"><div id="trigger"><br></div></div>
js:
$('#trigger').hover(function(){
$(this).parent().animate({'top':0},500);
});
$('#slider').mouseleave(function(){
$(this).animate({'top':-150},500);
});
solution without jQuery:
http://jsfiddle.net/wZ8zX/3/
sorry i usually just browse jquery questions, so i didn't check the tags lol
Using only CSS you can use another block, or a pseudo-element to overlay the parts of block where you don't want to have transition, and then, after hover, make z-index for the element with transition bigger than overlaying element, so all the contents of it would be accessible.
Here is a fiddle with an example: http://jsfiddle.net/kizu/Y3px6/1/
This comes from the position:relative property. I strongly feel that your current div tag has position relative property. Please remove that.
i have 2 overlapping divs like so:
div.back {
background:url(brick.png);
background-attachment:fixed;
background-position:right top;
background-repeat:no-repeat;
height:765px;
z-index:200;
}
div.flash {
margin-top:-765px;
z-index:201;
}
what i need to do is set the 'back' div offscreen for a time and then move it back. i tried moving it using a bunch of different jquery methods but for some reason they move all of the divs instead of the one with the specified id.
so how do i move just the bottom one offscreen without affecting the top one? it doesn't need to be animated at all; i just need it set aside until needed. (and "hide" won't work because it messes up my flash, so omit that from your suggestions if you don't mind. :)
thanks.
would $("div.back").hide() do the trick?
hide sets the display style to none if fx is off, otherwise it animates the opacity
you could try:
disabling fx
setting display to none by yourself
setting visibility to hidden by yourself
setting opacity to 0 with jquery
setting position to absolute, left to -1000, top to -1000, width and height to 100 using jquery or by yourself
putting the div somewhere else, and using remove and appendTo to move it using jquery (if it's just an image)
i ended up solving it; instead of trying to move the topmost div i changed the code to alter the margin-top property of the lowest div instead of the highest one; that was able to leave the highest level one onscreen. i still don't know why attempting to change margin-top of the topmost div would affect all the others but it seems to.
I am new to CSS, so please bear with me. I have this form which I'm trying to style. Everything works fine, except the confirmation label which is in a div. I want some space to be there between div.field, and while this works for all the input elements, it doesn't work for the label message which is at the bottom. I tried increasing margin-top, but to no avail. I would like that element to be positioned in the center.
Using the web-developer addon of Firefox, it shows me that the width and height of div.field of label tag specifically is 284px and 209px respectively. Why is this so, when I haven't set it that way?
You can view the code live at jsfiddle: http://www.jsfiddle.net/yMHJY/
The solution is simple, really. Add a margin-top to the parent of the label element, and add overflow: hidden to the div#contact div .field selector.
However, can I just say that the code can be rewritten for much better efficiency and semantic correctness. For instance, I would contain the last massage in a p tag and not a label in a div. Also, I would have each input element placed in an unordered list ul instead of divs. You also have a lot of unnecessary floats and the br at the end of each input is wholly uneeded. Oh, and unless you are embedding Calluna somehow, don't use it - stick to web safe fonts (and if you are, you still need to suggest an alternative, in the user's browser does not support it, and also to give the browser something to display while the font loads).
Edit
Fixed the load for ya, I should be paid for this kind of stuff :) Just stick to better HTML and CSS next time.
http://www.jsfiddle.net/SNrtA/
To center you could add a parent container
<div id="parent">
<label id="label">Your Message Has Been Sent</label>
</div>
div#parent {
text-align:center;
}
or add an id to your original parent div to target it with above css
with regards to the margin, you seem to have an issue with a float:left being set in the
div#contact div input[type=text] class. You need to clear this as it could be causing you margin problems. Try removing this and amending your styles. Why are you floating the inputs left?
I need help to align CSS buttons. I tried many different variations and I just cannot center my button the way I want.
Firstly, have a look at this url: http://www.front-end-developer.net/cssbuttons/example.htm
I'm using 2 images to form a button (this could be done on 1 image, but in this case we've got two). Everything works as expected as long as we apply float:left or float:right to the parent div element, to 'limit' width of the div and close it as soon as the content of the div ends. You can remove float:left from the button to see what I mean.
But what about center positioned buttons? I cannot add float:left/right because I want align it in the middle.
In theory, I could set
{
width:XXpx;
margin:0 auto;
}
And I will get what you can see on this picture:
(source: front-end-developer.net)
But I don't know the length of the text inside. Having different translations my button can be very short, or 5 times that long.
I also tried to use <span> instead of <div>, but unfortunately nested inline elements don't respect their padding correctly...
And yes, I must use <a> inside, so buttons can be accessed by web crawlers.
I'm really stuck on this one.
.button {display:inline-block;}
Seems to do the trick.
inline-block browser-support: http://www.quirksmode.org/css/display.html
More about how to work around the browser issues related to inline-block:
http://foohack.com/2007/11/cross-browser-support-for-inline-block-styling/