I have a dynamically-created list div made using document.createElement(). The div is pulling elements from a database and displaying them. I noticed that when the list is long, the content is cut off despite having set overflow: auto in the body. I subsequently tried adding a large div directly in the HTML and it successfully triggers the scroll bar's appearance--so clearly there's an issue with the dynamic aspect of the div. Any help would be appreciated!
add a max-width
.Body__container--categories {
overflow: auto;
height: 100vh;
max-width: 18%;
}
Related
I am using a textarea inside which i am getting some values from local db. The problem is the height of textarea is not resizing to the content available and rather its shrinked and only displaying one line.
I tried adding CSS but it doesn't seems to work. Any help or suggestion will be appreciated.
XSL
<textarea id="post-text"><xsl:value-of select="$txn_desc"/></textarea>
CSS
textarea {
width: 100%;
height:100%;
}
try adding
textarea {
width: 100%;
height: auto;
overflow: hidden
}
and also make sure the parent html element have an appropriate height as well.
I am creating a site where i have given the elements static widths and heights. The website also includes images. When i resize the window, all the elements bundle up together (for example, in full window mode there are 3 images in a line whereas when I resize the window only 1 image is shown per line). Also all other elements get stacked up on each other. I wanted to know how can I prevent this and let all the elements in the same order as they are when in full window by giving it a side scroll bar on the bottom. For reference, see the Facebook login page: facebook login page. You might need to logout.
When you resize it, it simply gives a side scroll bar on the bottom and all elements remain in the same order. Is it possible to do this just with HTML or CSS or do I have to use JavaScript. Thanks a lot in advance!
By applying the following Css:
body {
min-width: 1280px;
overflow-x: scroll;
}
Just replace the pixel value with the required width.
you need to make the width of the body fixed to a specific px (the width of your window), for 1000px example
body {
min-width: 1000px;
max-width: 1000px;
overflow-x: auto;
}
If you add overflow-x: scroll; or overflow-x: auto; to the body, that should do the trick. Also don't forget to add a min-width and max-width as well to make it take effect.
So I'm working on a silly to do list app using mostly materialize and jquery.
Here is my codepen:
http://codepen.io/centraleft/pen/adWvPp
Basically the user enters text, my javascript takes that text and makes a new list element with a button inside of it. I want the button to always be on the far right of the list item regardless of the text inside the list element, so I float the button to the right however I run into a problem where I have an ugly little black sliver at the bottom of my list! Use the app once and you will see.
Is there another way to accomplish what I'm trying to do? Or a way to get rid of that black sliver with CSS?
Here is my current CSS for the button:
.orange {
bottom: 7px;
float: right;
height: 35px;
width: 35px;
}
The problem is your button is bleeding outside of your list. Set your lis to have a max height and overflow: hidden. See my fork.
The additions (CSS):
.collection-item {
height: 42px;
overflow: hidden;
}
Is there a way to set a max-height on a Bootstrap accordion in an AngularJS app, such that the whole accordion can be made to fit on screen and only the expanded pane scroll it's content if needed?
So far I've only been able to have the whole accordion scroll, rather than the content.
Edit to add:
A bare-bones plunk of what I've been working with: http://plnkr.co/edit/97fqbx1Wg84hcTpW24Yi?p=preview
To get the content of each panel to scroll properly I've tried variants of:
.content {
max-height: 100%;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
but since the parent elements are all full-height regardless of any CSS I've tried that doesn't do any good.
I've tried setting heights and max-heights on every combination of the relevant elements but nothing seems to get close, especially taking into account the fact that the accordion will hold an unknown number of items.
I won't post the code directly but you can see it here: http://markbrewerton.co.uk/work.html
I have links which load an iFrame into a DIV when they are clicked, however, as you will notice, the parent DIV is stretched and goes down really far. I'm pretty new to all this, so could you explain how I can fix it?
Cheers
The first part is the setup the bounds of the div by using the height and width styles.
After that set the overflow style.
Overflow has different values. Auto will likely get your the desired result. http://programming.top54u.com/post/HTML-Div-Tag-Overflow-CSS-Style-Scrollbars.aspx
Try this (if you want scrollbars):
#yourdiv {
height: 300px; /* fixed height */
overflow: scroll;
}
...or this (if you want to just clip the content):
#yourdiv {
height: 300px;
overflow: hidden;
}
Edit: You can also fix the height of the <iframe> itself:
#youriframe {
height: 300px;
}