I have a table in which I have a dropdown, due to IE8, I had to manipulate it such that it displays long text in the option. However, upon resizing the window, the dropdown isnt being resized and is being shown as in the image attached. Thats look funny. How can I correct the dropdown being shown such that when window is being resized, it also gets resized along.
style is as follows: .test{
width: 250px;
position:absolute;
z-index:+1;
}
code is as follows:
<select id="myList" class= "test" onactivate="this.style.width='auto';" onchange="this.blur();" onblur="this.style.width='250px';" disabled>
Give the select a width in % rather than px.
Or use some javascript to handle the window's resize event.
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;
}
I'm new to css and I produced what i thought was a nice webpage until i resized the browser window size. I don't know why this happening?
Could someone offer me some advice please. When I resize the window I would like the 'objects' to stay where they are but the window to resize. for example, if I drag the bottom corner of a window up and to the left I'd expect to see what was at the bottom right disapear and scroll bars to appear but the object in the top left hand corner would stay exactly where they are
Full webpage link
following links are html and one of my css codes
You will need to put a wrapper around your content to prevent the objects from moving around when you resize your browser/zoom in and out.
You will need to implement something like this..
CSS:
#Wrapper {
margin: 0 auto;
}
HTML:
<div ID = "Wrapper">
<!-- Content here you want to be wrapped into position -->
</div>
Without the rest of your code, I can't offer any other help, You've only supplied one of your style sheets.
I've just started using Twitter Bootstrap (I'm new to it so I don't fully grasp it quite yet!) and I'm trying to create a two-column form with some specific visual elements.
The complete width of the form is approx. 80% of the width of the viewport and within here are two (roughly equally spaced out) columns of labels and associated textboxes. Some of the textboxes need to have a small icon affixed to the right-hand side of the textbox and for that icon to remain fixed to the righ-hand side of the textbox when the user resizes the browser window (to remain like this at least down to 1024x768 resolution). I'm also trying to achieve all of this with a "responsive design".
I can get it looking good at higher resolutions, but I know I'm doing something wrong as the icons are displaying "inside" the textboxes when the user resizes the browser window.
This first image shows how the form should look (roughly) at all sizes:
But when resizing the browser window, it does this:
I'd like that little envelope icon to remain fixed to the right-hand side of the textbox at all times. Unfortunately, when the browser window is shrunk even further, it moves to the next line:
I'm using ASP.NET MVC to generate much of this form, so there's lots of #Html.TextBoxFor calls going on within the mark-up, however, I've posted up a JSFiddle with a portion of the relevant rendered mark-up that highlights the problem:
http://jsfiddle.net/qYTSY/1/
I'm sure I've taken an entirely wrong approach with this, however I'm no designer so I'm struggling to tweak the current mark-up to achieve what I'm after. Can anyone help please?
In jsfiddle I added a class:
.controls-row-with-icon {
width: 28em;
}
...and then obviously changed the two divs to:
<div class="controls controls-row controls-row-with-icon">
That "pins" the mail icon just to the right. Not sure if it "breaks" anything else though?
Note: in jsfiddle the two columns seemed to overlap each other - not sure if it would do that in your production version though? I couldn't get the rh column to "fall under" the lh column when the viewport was smaller - but guess that's working ok in your production code?
Rob
EDIT
See comment
#import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.row{
/*min-width: 62em;*/ /* add this is viewport should be fixed */
}
.controls-row{
width: 30em;
background: #ccc;
}
.row-fluid .span5{
margin-left: 0;
margin-right: 2em;
width: 30em;
}
.row-fluid .offset1{
margin-left:0;
margin-right: 0;
}
Well, after some twiddling around, I believe I've found a solution!
Here is an updated JSFiddle:
http://jsfiddle.net/qYTSY/32/
which highlights the answer (ignore the first column - I've fixed that up separately.)
Many thanks to both LiverpoolsNumber9 and Sherbrow for their help in guiding me towards a solution.
The crux of my solution was to remove the span3 class on the span element around the input elements that needed the icon appended to them (leaving this span in place caused all sorts of weird and wonderful problems), but then also wrapping the input element and the icon element in an extra div and using the input-append and add-on classes in order to ensure the icon is placed and fixed to the right of the input box.
So this mark-up:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<span class="span3"><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="offset4"><i class="icon-envelope" id="emailicon"></i></span>
</div>
Became this:
<div class="controls controls-row">
<span class="span3"><label for="Contact_EMail">EMail</label></span>
<div class="input-append">
<span><input id="Contact_EMail" name="Contact.EMail" type="text" value="" /></span>
<span class="add-on"><i class="icon-envelope" id="emailicon"></i></span>
</div>
</div>
Although I've found a solution I have to confess that, where CSS/Styling/Twitter Bootstrap is concerned, I still feel a lot like this!
All,
I'm using the jQuery UI Modal Form which opens up very nicely for me except for one thing. Sometimes it opens up so only half of it is in the active window and the other half is below the page and I have to drag it up so that the whole form is there. I only changed some of the form elements and colors in the CSS but didn't do anything else in terms of sizing and I also changed the height and width from 300 and 350 to 550 and 600.
How can I ensure that the modal form always opens up in the current window space instead of only half and make sure this happens each time?
Thanks!
When you launch the jQuery Dialog, it tries to center on the page. The first thing I would check is that your HTML and BODY elements are not larger than the default size. Use firebug to check if there are any styles or DOM attributes causing the HTML and BODY elements to be larger than 100%. I usually like to reset them like this...
html { width:100%; height:100%; }
html, body { margin:0; padding:0; }
I am trying to display a background image for a button. The button is saved as .png and used in JSP page. The problem is that, when button gets displayed, it only displays one half of the image, i want the whole image to be displayed.
CSS -
#btn {
background: url(../images/btn-blk.png) no-repeat;
width: 100%;
}
JSP -
<input type="submit" value="Add" id="btn" />
What could the problem be? How to make the image display the whole width instead of left half alone?
-Thx in Advance
Are you sure that you posted corect css code? It should be "#btn" not "btn".
Since you know your width of btn-blk.png, why don't you put it in css, instead using width:100%? Attach here the image btn-blk and maybe we will be able to understand better what you want to do.
You need to set the size of btn to be the size of your image in pixels. CSS has no idea how big your image is.
Because BTN is an inline element, width:100% refers to the width of the button, not your background image.
You need something like:
btn {
background: url(../images/btn-blk.png) no-repeat;
width: 50px;
height:20px;
}
Check with a DOM examiner (FireBug, Chrome's internal one, or something like that) and see that your <input> tag really is big enough.
As a FYI: the "width: 100%" does not apply to the background image size, but to the element's size, relative to its parent.
There are other ways of putting an image in a form that may be more appropriate:
<input type="image" src="../images/btn-blk.png">
<button><img src="../images/btn-blk.png"></button>