I have placed padding left and right on my input text field so that that text inside of the field does not butt right up to the left and right side of the field. This is a standard UI design practice, as you know. The issue I'm facing is I want my input text field to have a 100% width so that it fills the inside of a div, in effect I have no defined a specific pixel value for this input text field, as it is filling the surrounding div container. How would I compensate my width for the padding I place on this field? Do I need to manually to decrease my width, let's say to 93%, until it achieves the same result?
Related
I am trying to vertically align the text in input and div, but when it can't be exactly in the middle because of odd number of pixels, it's sometimes closer to top edge, and sometimes to bottom one.
This happens only with some font families, and you can notice that increasing/decreasing line height for 1px will change position of the text in div, but not in input. However, input will start to behave the same as div if line height is greater that 23px.
Here is the example:
https://stackblitz.com/edit/angular-pss3zh
I would want for input and div to position the text the same way for any line-height set.
I need to have 2 equal width divs side by side, the left column contains an image and the right column will contain dynamic text where the height of the text div can vary somewhere between 400px - 550px depending on how much text the site owner inputs.
I need the image to line up flush at the top and bottom with the end of the text box. The container element is fluid to be responsive.
Desired Effect
What I have at the moment is using floats to line the elements up together and responding fine, but the image falls short, like so:
I tried setting the image as a background-image on the left column with...
.column-image{
padding-bottom:100%;
margin-bottom:-100%;
background-size:contain;
}
But this still falls short a little unless i tweak the padding-bottom amount. This is then rendered useless when I re-size my browser as the aspect ratio changes.
I am trying to avoid using Javascript to solve this.
Use display:table for the container and display:table-cell for the inner divs. Also make sure to remove the float
Fiddle: http://jsfiddle.net/afelixj/26b3vtfx/2/
I have an Access 2010 report that I've setup as tabular and set 2 columns with Can Grow and Can Shrink to Yes but instead of expanding the width it's instead wrapping the text. Is it possible to have it expand the width of the column instead of wrapping the text and expanding it's height?
I don't think Can Grow/Can Shrink are what you expect them to be. These properties only concern fitting controls to a page when printing. I suspect you want to edit the Horizontal Anchor property. You can set this to Left, Right, or Both.
What this will do is, say when set to Left, is bind the control to the left hand side of the Form/Report while leaving width constant.
When Right is set the control will move with the right side of the form/report and stay the same width.
When Both is set the control's width will change to maintain the same distance of the left side of the control to the left side of the form/report and same for the right side.
I'm trying to eliminate white space below a division which I am floating to the right.
My intent is to define a division which I can place anywhere on a page and have it float to the right. A button will expand the division - increase it's height and width - to allow the division to be read. I've left out all of that processing to simplify the examples.
I've got it floating right - - it was simple to do, just code float: right; using CSS. The problem is that if I do not specify a height for the division, I get extra white space below the division. If I set the height so that there is no white space under the division, the button extends below the division's border.
Go to http://www.bobnovell.com/sideboxproblem.html for a page with examples.
Bob
You got the space, because the div with floating right is more height than one line of text. So it takes two lines.
If the div should stay on his on line, wrap the text in a new div and set clear=both on it.
Here is an example: http://jsbin.com/hujax/1/
Update follow the conversation in comments:
If you do not want change the markup, you could use position:ablsolute on your div and position it with top:1em (or what ever you want) and right:0.
Also the container of the text and headline need the style: position:relative.
here is and example: http://jsbin.com/hujax/4/
update
with negative margin-bottom you can reduce the needed height of your div.
http://jsbin.com/hujax/3/
I tried it in different browsers,but it seems to be not working.If I change the number(min-height),then beyond 50 it works and below 50 with any range of values it stays at the same height.So,is there any way to keep min-height of a textarea below 50,say at 10px?
<textarea style="width:700px;resize:none;min-height:10px;"></textarea>
<textarea style="width:700px;resize:none;height:10px;"></textarea>
That is related with the default value of the attribute rows in the text area!
The default is 2 according to http://www.w3schools.com/tags/att_textarea_rows.asp.
So try to change it to 1 an play with the height attribute a little.
If you want your textarea even littler that 1 row size, then adjust your text area style in css "line-height".
The min-height property sets the minimum height of an element, as its name suggest. This means a height that is used unless nothing requires a larger height. For a textarea element, the default height is determined by the number of rows (specified by the rows attribute, which is defaulted to 2 by browser practice and by HTML5 CR) and by browsers’ calculation of line height.
Thus, you can set min-height even to 10px, and it works as defined – the actual height is larger, but that follows from the definition.
To set the height, you would use the height property, as in your example, and/or the rows attribute, which indirectly sets the height. As usual, it sets the content height. The total height of a textarea box is content height plus top padding plus bottom padding plus top border plus bottom border.
It is difficult to imagine a situation where it would make sense to set textarea height to 10px, which is not enough for even one line of text in a size that is legible to most human beings. Moreover, if you really want to have an input box that is one line tall and is not resizable, an input type=text element would be a much more practical and much more logical choice than textarea.