How do I get the input to expand to the full width of the parent div? For label it worked fine. The code can be found here: http://jsfiddle.net/7h8Zg/
What makes the label expand but not the input?
change the left padding to percent, and use the rest for width, like so:
padding:0 0 0 2%;width:98%;
If you want the inputs to be the same size as the submit button, you should add width:97% to the input rule.
http://jsfiddle.net/7h8Zg/15/
Adding
width: 100%;
to the input class allows the input to expand to the full size of the parent div.
JSFiddle: http://jsfiddle.net/7h8Zg/5/
Related
I'm new to Angular/Angular Material so I'm not sure if this is code I need to write myself or its already built in a specific way. I'm having a problem with the drop down of the mat-select, the panel that pops up when you click select is not matching the width of the select drop down bar with the arrow. I learned from this question: Styling mat-select in Angular Material that the width of the panel is always equal to the width of the select element, but thats not the case for me. Is there a way to fix the width of the drop down if its not the same size?
That depends on the width of the text options you have on your mat-options.
The panel always takes the width of the max text length. so if the max text length is > select input element width, then the panel should be > select element width.
To better understand:
-Example with: max text width < select element width: https://stackblitz.com/angular/olkexjgqxpk?file=src%2Fapp%2Fselect-custom-trigger-example.ts
-Example with max text width > select element width: https://stackblitz.com/edit/angular-4bk5ns?file=src%2Fapp%2Fselect-custom-trigger-example.html
I add the following two rules to my top level style sheet so I never have to deal with the overflow in my select list
.cdk-overlay-pane {
width: fit-content !important;
}
.mat-select-panel {
max-width: unset !important;
}
https://stackblitz.com/edit/angular-pqtiem?file=src%2Fstyles.scss
I want to use this css for tooltip: enter link description here but i want that the hint have a max width of 400px. if i set max-width:400px and remove white-space:nowrap then the width will be always very short (their is a line break on every word). how to specify that the hint can expend horizontally still 400px and then only add line break ?
There are two possible solutions for this. The first is to add the following to ".hint:after, [data-hint]:after"
width: 100%;
max-width: 400px;
As you already surmised, you must remove the "whitespace: nowrap" as well
If for some reason you can't do that, you can also set the "display" property to "table".
The problem I'm having is I have two divs at the top of my page, one contains a repeating blue background, the other contains a background image.
I have to set the height of both divs in order for them to expand vertically, the don't expand with the content. I have that form on the right hand side set to overflow. Which I believe is what's causing the problem.
I have tried not having the height css in the code, but it still won't expand vertically.
In order to get the backgrounds to even show up I have to manually set the height.
This is the page: http://www.repipespecialists.com/landing/google/repiping.html
This is the CSS code:
#top_container {
width:100%;
height:1040px;
background-image:url(../images/top_bg_repeat.jpg);
background-repeat:repeat-x;
background-color:#83b4e9;
}
#top_header {
width:1200px;
height:1040px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-color:#83b4e9;
margin: 0 auto;
}
I agree with WDan in that the issue you are having is due to your use of float: left and float: right on the left_content and right_content div elements.
When you use float on an element, you are basically removing it from the normal flow of the document. By default, elements will appear on the page in whatever order you specify in the markup. Using float (or things like position: absolute) will remove the element from this "order", or "document flow", such that the floated element will be ignored when placing other elements in their default position on the page.
Since the space used by these floated elements are ignored, the top_header div does not take the floated element's size into account when determining its own size. This is why your div is not automatically expanding.
Another alternative to float is to use display: inline-block. Here are some links you can read to learn more about the differences:
http://www.ternstyle.us/blog/float-vs-inline-block
http://www.onderhond.com/blog/work/inline-block-vs-float/
http://designshack.net/articles/css/whats-the-deal-with-display-inline-block/
http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I think the problem is you use float in 'left_content' and 'right_content'
Use “overflow: hidden” in the wrapper div.
My page looks like this: http://ink-12.terc.edu/index.cfm
I want to get the picture (kids' drawings) on the left to follow the rest of the centered content, when the window expands:
Per the suggestions I found in other answers, I added an outer div (#maincontent) to hold my two divs that I want to scroll instead of wrap (#tbltframe and #drawings), and some additional coding (overflow:auto; display:inline-block; white-space:nowrap).
Now my page looks like this:
http://ink-12.web5test.terc.edu/index.cfm
So now it doesn't wrap (great!), but it cut off my drop shadow on the right side (you can still see it on the bottom). And I need to get the main content centered again (following the centered header and footer)--similar to the first webpage I listed. After the changes, the main content aligns left. I tried adding margin-right and margin-left:auto, as well as text-align:center, but neither did it. I also added a min-width, which doesn't seem to do it either. I can see the drop shadow again when I change the min-width to something significantly larger (74em), then but I don't know why, because #tbltframe (50em) and #drawings (14em) = 64em total.
Any help would be very much appreciated. Suggestions to move forward with the code on either webpage I listed would be fine. Thank you!
Please try the below css on skeleton.css line 64
#maincontent {
display: inline-block;
overflow: auto;
white-space: nowrap;
width: 1169px;
}
It will increase the width of the main content div so the images will not cut from sides..
Found a solution: http://www.search-this.com/2008/08/28/lets-all-get-inline-in-a-block-in-a-block/
Have to:
Create a min-width or width on the outer div (#maincontent)
Make #maincontent a block element with display:block
Center #maincontent with text-align:center
Make the inside divs (#drawings and #tbltframe)not wrap in #maincontent with white-space:nowrap;
Make the inside divs inline block elements with display:inline-block
Then make the text inside wrap again (if you want) with white-space:normal
I use <span> tags in my module titles,
e.g.
<span>Categories</span>.
I specify the span's background color/image, width and height in css.
But the span's width depends on its content/text.
So, if I do <span></span>, with just a background image/color in css, nothing appears.
Of course, I want something to appear.
How can I resolve this?
spans default to inline style, which you can't specify the width of.
display: inline-block;
would be a good way, except IE doesn't support it
you can, however, hack a multiple browser solution
You could explicitly set the display property to "block" so it behaves like a block level element, but in that case you should probably just use a div instead.
<span style="display:block; background-color:red; width:100px;"></span>
You can't specify the width of an element with display inline. You could put something in it like a non-breaking space ( ) and then set the padding to give it some more width but you can't control it directly.
You could use display inline-block but that isn't widely supported.
A real hack would be to put an image inside and then set the width of that. Something like a transparent 1 pixel GIF. Not the recommended approach however.
Like in other answers, start your span attributes with this:
display:inline-block;
Now you can use padding more than width:
padding-left:6%;
padding-right:6%;
When you use padding, your color expands to both side (right and left), not just right (like in widht).
You could try width: fit-content
source: https://developer.mozilla.org/en-US/docs/Web/CSS/fit-content
I would use the padding attribute. This will allow you add a set number of pixels to either side of the element without the element loosing its span qualities:
It won't become a block
It will float as you expect
This method will only add to the padding however, so if you change the length of the content (from Categories to Tags, for example) the size of the content will change and the overall size of the element will change as well. But if you really want to set a rigid size, you should do as mentioned above and use a div.
See the box model for more details about the box model, content, padding, margin, etc.
Use the attribute 'display' as in the example:
<span style="background: gray; width: 100px; display:block;">hello</span>
<span style="background: gray; width: 200px; display:block;">world</span>
Having fixed the height and width you sholud tell the how to bahave if the text inside it overflows its area. So add in the css
overflow: auto;