so I have this issue which I feel like it should be simple enough, but for some reason I am stumped...
I have this select dropdown that looks like so:
When the screen size gets smaller, the content text is hidden the smaller the screen gets. Is there a way to make the text wrap, so that all of it displayed in the dropdown box?
The caret is a background image with absolute positioning, so I will need to add some padding between the caret and where the text ends, but I want to make the text wrap (and the select box will become taller) so that it all fits and is visible.
Thanks!
Related
When I have a webpage in HTML change window sizes, the text will remain at 50% and not just stay the same formatting, or will wrap around an image because it's not positioned correctly. How do I keep it in it's own little invisible box to stay that format even when the window size changes?
text that I want centered but not to change position when the window size changes
I hope I didn't misunderstand your question but if you want to keep that text in one place maybe try with "position:" property (for example: "position: absolute" etc.").
I've got a line of text that gets revealed when a dropdown arrow is clicked. However, certain pages of the site I'm building have divs that extend beyond the single line of text I'm hiding.
Here's an example:
The green div (ordinarily white) needs to overlap the div above (blue body with orange margins). My goal is to cover up a link that will sit 15px beneath the arrow under the word "Bukau", leaving the text to left unaffected.
I have a hunch the solution I'm looking for might involve making the 'green' div fixed/changing z-index values.
I also want to make sure the green block acts like an extension of the content below it, getting pulled up/down when a user clicks the arrow toggle.
Appreciate any advice/suggestions!
Solution: Simple as making the top-margin on the 'green' div -50 or so pixels, and setting its position to 'relative'
my goal is to add text inside the box below which is an image and depending on how much text I enter, I would like to have the middle part of the image extend to accommodate for the increase of text inside. I do understand that one method is to "chop" the top part, a small section of the middle part, and the bottom part, and have the middle part repeat numerous times. I was wondering if someone could suggest how one goes about doing this, or, if there is a better option to take instead. Thank you in advance.
I've hosted the pictures through Flickr
You could make the image the background of the div then set "background-size: cover". The image would then grow to fill the div as the div grows.
Can anyone help me troubleshoot my website?
http://www.andrewstonyer.co.uk/test/
My problem:
On IE8/7 if you click on a thumbnail (only 'Pulse' and 'Time Within The Hour' are wired in right now) an overlay appears with detail of that piece.
What should happen, and does in Gecko/Webkit, is that the overlay contains a table with a heading, a scaled, centered image, and a nav menu. There is a toggle for text, which pushes up the image cell and makes the image smaller, keeping proportion. I know the overlay looks like ass right now- those are just placeholder colours :)
On IE, the image doesn't fit perfectly in the table cell, which means that everything is pushed down outside the window. I can't see the nav menu. It appears to render the image at actual pixel size (in the CSS, the img class element is set to 100% height).
The text cell is toggled with jquery, when toggled on in IE, it doesn't appear to 'squeeze' the above cell, which is what I want to happen.
Could any experts help?
Regards,
Jon
Adding width:100% to the ov-image class in your CSS fixes this. I guess the other browsers honor display:block even for image scaling, but on IE, you have to declare the width for it to scale.
Additionally remove height:100% from the same class.
I'm pretty sure I'm having a CSS issue, but I just can't figure out how to correct it. Currently, I have these accordions working perfectly, they collapse, expand, expand again when told to etc.
The problem I'm having is aligning the content within these accordion divs. Ideally, when everything is default (collapsed) all I want seen is the thumbnail image and the Headline. Then if the user wishes, they click on the headline and it expands and if they want to make a comment or view comments, they can click once again to expand that.
Here's the thing, I have to make the height 62px so everything will fit in and just not float all over the place. This creates a problem with the "View Comments" to "Text Here" area, as you can tell it has outrageous space between the two.
The other issue is, as I currently have it I'm forcefully indenting the article text so that it doesn't TEXT WRAP underneath the thumbnail image. Basically, I want it split into 2 columns so nothing ever goes beneath the image, but working with this accordion and divs inside the divs it's proving to be difficult for me.
You can define this in your CSS to set the height:
.acc2 { height: auto !important; }
Since your child accordions have an acc2 class on their header, this will override, restoring a default height to match the text.