I am attempting to style a bootstrap panel on a page for a small checklist app. Users can input as many 'to do' items as they so choose and see their list grow and grow.
In order to prevent the entire page from scrolling, I'd like to allow the list to scroll, inside the panel element.
I have set a max-height: 350px, but to me, this feels a little "hacktastic". I can't seem to find a solid solution using flexbox and I'm unsure if % values are the way to go either.
Is there a sure fire, silver bullet solution for this problem (my gut feeling is no, but I'll remain positive)?
HTML:
<div class="ChecklistContainer">
{{ input loop to handle user input }}
<div>
CSS:
.ChecklistContainer {
max-height: 350px;
overflow: auto;
}
I think it's fine to use a max-height in order to achieve the desired look and feel. We use it all the time in our production softwares.
Related
I wanted to use a span element to style some text, but for some reason when I enter that code it will on the right side of the page show that scroll bar. It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
I don't know how to fix that. I have tried reducing the padding, adding <br> at the end, etc.
This is the code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
I have restricted my text to a border on the page, so it looks better, but it can't have anything to do with my problem since I haven't had it before and I've been using this border tactic for a while now. And as well I know the button "My other articles" isn't linked to anything--I'll add the link later. I just need help with this one problem.
Thanks to whomever helps me out with this in advance.
It seems to be rendering correctly for me (Chrome on Linux):
I'd suggest you update your answer with a screenshot of what's happening.
The best thing to try in this scenario is to add the following CSS to your code if it's not working for you:
span {
overflow: visible;
}
Since you're doing inline CSS (you don't appear to have a linked stylesheet), you probably want something like this as your full code:
<p>And that's it! You can play around a bit more with CSS and then move to <span style="background-color: orange; color: #fff; padding: 2px; overflow: visible;">Day 4 - Text Areas & Input Fields</span> for further lessons!</p>
overflow: visible; ensures that the element doesn't show scrollbars. In most cases (such as if this rule is applied to a <div>), then text inside the element will visually overflow if the element is a fixed size. The <span> isn't a fixed size (it grows as text is added), and so text won't appear as overflowing. Hopefully, though, it should solve the scrollbar problem.
Alternatively, you could try using overflow: hidden; which will hide the overflow entirely. Try experimenting with either visible or hidden and see if your code works!
More info about overflow: overflow - CSS: Cascading Style Sheets | MDN
It's not like that default scroll bar you will find on Google Chrome; it's really short, and when I move it it moves my text up and down for some reason.
Try also applying the CSS to the <p> element as well/instead, or even the <body>. The <span> may or may not be the element that's experiencing the overflow issue, after all. Your question is admittedly worded quite vaguely for us to tell how the problem manifests.
I've been trying unsuccessfully to set an HTML "select" field size in Bootstrap 3(latest) to normal (not 100% width). Do you know an elegant way of doing this, without hacks like tables around fields.
I also don't want to put a select field in a bootstrap column since then I'll have indent due to borders.
Custom styles with specific sizes is also not pretty in my opinion, because all I want is for the field to be only as long as the longest content (default behavior of a select)
Perhaps there is a really easy way to circumvent this since Bootstrap decided to make all selects (using form-control class) stretch all the way, looking forward to your illuminating suggestions )
Try setting the width to auto or initial?
width: auto;
or
width:initial;
http://www.w3schools.com/cssref/pr_dim_width.asp
select
{
width: auto;
width: inherit;
}
Having seen advice seemingly change over the years regarding use of empty DIVs (ie. <DIV CLASS="somediv"></DIV>) I'm confused as to the current thinking over whether or not to use when a DIV will have no inner HTML.
I can find no definitive confirmation over whether we can rely on all modern browsers to display background color and image correctly at the specified width & height when there is no inner HTML, so I'm thinking maybe we can't rely on it - yet it's such a seemingly basic area.
I have even seen suggestions that empty DIVs should never be used - but do specs really state it is 'wrong' to have empty DIVs, or is it just unreliable? (I've tried finding reference to them, but maybe I'm using the wrong terms).
To illustrate, here are 5 areas where I would normally use an empty DIV, in the absence of any recommended alternative:
as a placeholder for content which will subsequently be fetched by XHR calls
as a way to manually create space in a layout
where an image is defined in CSS (as a background image, but will effectively be foreground)
where the text will come from the CSS using .somediv:after{content:SOMETEXT}
where CSS is used to display graph bars etc using solid background color
Maybe there are different answers for each of these, which might explain the complexity over this issue.
I have, of course, tried discovering already, but for example the SO question Is necessary to show an empty <div>? suggests to me there is a huge amount of "IMHO", "probably", "seems to work" in this area. I would expect that by now that some official consensus has been reached on best practice.
So.. should I use and if so should I set font-size to the same as the smaller of DIV width/height to ensure that space is filled in all browsers? Are there any other CSS tricks to ensure this will work in all browsers?
The browser is not going to discard or forget your container just because it does not have any contents (yet).
If you want the container to have a specific placeholder shape, then you might give it min-height, min-width, height and width and make sure it's display: block;.
If you are still unsure, you can fill it with a spacer.gif/png without padding and margin.
http://jsfiddle.net/APxNF/1/
Short answer. Yes, browsers will render the div even if there is no content.
Long answer, That might now always be the case. I have worked in the web for 8 years now and never had to use these, but here they are anyway.
jsFiddle demo
HTML
<div class="empty1"></div>
<div class="empty2"></div>
<div class="empty3"></div>
CSS
.empty1 {
background: #FBB829;
height: 100px;
width: 100px;
}
.empty2:before {
content: "\00a0";
}
.empty2 {
background: #FF0066;
height: 100px;
width: 100px;
}
.empty3 {
background: #F02311;
min-height: 1px;
height: 100px;
width: 100px;
}
Sources:
Experience
Empty div with 2px width and background color doesnt show with height as 100%
http://csscreator.com/node/36023
I have a small image that i need to repeat along the x direction, a specific number of times.
The 'row' of images should be scrollable, and i want to avoid tables if possible.
Is this possible to do with Html + Css? The html code will be dynamic generated using PHP.
Any extra-ideas?
Thanks!
I wonder if ajax has the best looking solutions for you, but you haven't really explained your scenario too well, why are you repeating the same image and making it scrollable? That doesn't sound like valid functionality for anything. Are you trying to scale a background image or something? IF so, what's with the scroll bar???
Anyways here you go:
http://wowslider.com/rq/ajax-image-scroller/
Garry's answer is good. If you just want regular scrollbars, however, wrap the dynamic area (into which you will be loading your images) with a div (or canvas, probably works the same way), and add a class to it. Then you can target all of the images with CSS and have them float, which will line them up, regardless of how many you load dynamically. (Just don't forget to put a width on the container.)
It would look something like this (short-hand, but you get the idea):
div.image-container {
width: 400px;
overflow: scroll;
}
div.image-loader img {
float: left;
}
<div class="image-loader">
<img/>
<img/>
</div>
I have a two column layout, with a gray sidebar on the right. I need the sidebar's height to expand when the height of the left column is increased (due to content being dynamically expanded). I can make the sidebar fit a static page, but I cannot get it to increase in size with the rest of the page. Did some Googling, but couldn't find a work-around that worked for me.
Does anyone know how to do this?
This is a common problem when using DIVS for this type of layout.
If you google 'Faux column' you should get some answers.
eg. http://www.alistapart.com/articles/fauxcolumns/
This may be slightly off but if you use jQuery on your site you can perform a quick calculation and resize all DIVs sharing a similar class to the maximum height:
$('.elements').height(Math.max($('#div1').height(), $('#div2').height()));
I have been haunted by this problem for a while and I wrote an article about this issue: Done with faux columns. Here is what I argued:
JavaScript based solution for this
problem is not worse than any other
solution. In fact if you are using
JavaScript, you may save a few hours
of frustration of trying to get things
working. People will warn you against
this by saying “What will happen if
the user turned off JavaScript?“.
Believe me, if the user has turned off
JavaScript, most of the web is broken
for him anyway. Your sidebar does not
matter to him.
As cballou mentioned, the simplest way to do this thing is to use JQuery code:
$(".sidebar").height(Math.max($(".content").height(),$(".sidebar").height()));
I changed the background-color to the same color as my sidebar, on that specific page, although I do have backgrounds for all my sections rather than one overall background. But that might not work for everyone.
In my stylesheet,
.sidec
{
background-color:#123456;
}
In my HTML page,
<body class="sidec">
content....
</body>
I recently saw a quite creative solution to this problem using the CSS properties position:absolute and border.
Definitely worth checking out to see if it works for you.
Link: http://woorkup.com/2009/10/11/really-simple-css-trick-for-equal-height-columns/
I'm not sure if this will help, as I'm a newbie. However, when struggling with getting my sidebar to show the whole content when I doubled it's size I did the following. I was changing my height and width with no response until I changed the class. My class was listed SB frame SB width. So when I changed my class to read SB height SB width it fit to my content instead of the original frame size. I also tried SB max sb width with worked too, but it took out my footer menu bar (meaning it wouldn't show it anymore). I went back to SB height SB width, and all is well. That's super duper elementary for all of you I'm sure, but just in case there is another newbie reading this that doesn't understand much about html code like myself... I hope this helps =)
Happy Holidays Everyone!
hugs, tara
I'm guessing you want to apply certain effect to your layout such that it will require both columns to resize together. If you want to dynamically change the values of the height of the columns, I doubt it will work simply with css unless you implement some javascript to control the style.
As Dal suggested, do look at the link on faux columns. As the name suggests, the solution isn't much about modifying the columns height. Instead, it gives the "illusion" that both columns appear to be of the same height when in reality they are not -- and is with the use of tiles of background image.
The idea is there isn't a need to complicate the mark-up. Simple structure with a touch of "illusion" with images is a common practice in web design.
Regards,
Jonah
With the poor attitude towards new members on here I expect to be barracked for this answer, here goes.
I got around this problem by creating a background image 960px wide 1px high with the two colors I needed for the columns in their respective widths (780px and 180px). I then used this as the background image for my container repeated on the y axis and made the content and the right sidebar background-color: transparent.
.container {
width: 960px;
background-color: #FFFFFF;
margin: 0 auto;
background-image: url(../images/bgs/conbg.jpg);
background-repeat: repeat-y;
}
.sidebar1 {
float: right;
width: 180px;
height:auto;
background-color:transparent;
padding-bottom: 10px;
}
.content {
padding: 10px 0;
width: 780px;
background-color:transparent;
float: right;
}
I am sure that this method has its limitations but it works perfectly on all my pages.
It is possible that I have not explained this very well, if so, be nice about it will you please. I will endevour to expand on my method(which is probably already common knowledge).