Hi i have the following html
<div>
<div class='brother1'>
HELLO
<div class='item'>One</div>
<div class='item'>Two</div>
<div class='item'>Three</div>
<div class='item'>Seven</div>
</div>
<div class='brother2 button'>
BUTTON
</div>
</div>
I want to set button to be invisible if the amount of items(One,Two,Three...) is bigger that 3.
But if the amount is less then 3 i want the button to be visible.
Is this possible using css only?
If this is not possible how would you change the html structure to achieve the same behavior?
Thanks.
Related
I want to create a faq page like Twitter's FAQ. The left column stays on that position even though the user keep scrolling.
So far here's what I made but it doesn't work.
<template>
<div>header here</div>
<div class="container">
<div class="row">
<div class="col-lg-4">
<div style="position: sticky;">
1 of 2
</div>
</div>
<div class="col-lg-8">
2 of 2
</div>
</div>
</div>
</template>
According to this, we should add sticky property, but it doesn't work.
edit: I think it's because the two columns have the same height, so adding sticky property does not work. Any solutions on how to make the column height fit to the content only?
Any solution? Thank you!!
Position Sticky is not working on col-sm-4 because its parent class row has display:flex property. if you change
display:flex
to
display:block
then position Sticky property will work but it will change your design
I know Bootstrap is design mobile first. I wonder if the possible layout is possible with just Bootstrap's CSS classes?
Figure A on size col-md or larger
And when screen is col-sm or col-xs, go to B or C. (2 different solutions).
I'm looking for the correct div layouts for A->B and A->C.
The heights for each section are random because the content generated in them will be dynamic. I added heights in the divs just for filler, but they will be dynamic and can't be set.
The following DOES NOT work...
Fiddle ... https://jsfiddle.net/s4jj30wf/
<div class="row">
<div style="background:blue" class="col-xs-12 col-md-4">
<div style="height:100px"></div>
</div>
<div style="background:yellow" class="col-md-8 col-xs-12">
<div class="row">
<div style="background:green" class="col-md-12 col-xs-12">
<div style="height:20px"></div>
</div>
<div style="background:pink" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
<div style="background:red" class="col-md-12 col-xs-12">
<div style="height:100px"></div>
</div>
</div>
</div>
<div style="background:orange" class="col-md-4 col-md-pull-4 col-xs-12">
<div style="height:50px"></div>
</div>
</div>
Solution: There are 2 ways based on if the columns have static height or dynamic height. If they have static height then we have a pure css solution using the float and clear property as well as margin-top property to achieve this.
Sample pure css with fixed height of columns:
http://codepen.io/Nasir_T/pen/ZBOgoe
If the height is not fixed and dynamic then we will need use of jquery to adjust the margin-top property in order to dynamically kill the gap between the mis-aligned 2 elements based on A->B and A->C scenario. We will be using the default jquery and modernizr js for this simple solution.
Sample jQuery & css solution with dynamic column height:
http://codepen.io/Nasir_T/pen/VmjoPd
Hope this helps.
I think what you maybe looking for is column ordering where you can .push-md- and .pull-md-
In document there is some flow of elements, you can't just mix them as you like unless you position them absolutely.
Using only bootstrap classes, I think the only way how to do that is to duplicate the content - you will have all A, B and C in the page and based on screen size display the one you want - using classes visible-xs, hidden-sm etc.
But duplicating content is usually not wise idea.
I have this:
<div class="block3">
<div class="surround">
<div class="s_title">
<h3>Title</h3>
</div>
<div class="block_content">
<div class="content"> </div>
</div>
</div>
</div>
In my example I can't add content directly in HTML (blocks rendered by default in PHP), so I need to add in CSS.
The hard part of this is that I need to add text only in block3 element, after <h3> (.s_title:after will affect all s_title, so it will not work for me.)
Is there any way to do this?
Just add .block3 in front of your selector like how you would limit selection of any other element to some container element:
.block3 .s_title:after
I am making a presentation website, with slides. Each slide is a div.
I've made classes like: 'layout-50', 'layout-70', to serve as templates for the slides. It looks something like this:
<!----------- SLIDE 1 ----------->
<!------------------------------->
<div data-scroll-index="0" class="slide">
<div class="layout-100"></div>
</div>
<!----------- SLIDE 2 ----------->
<!------------------------------->
<div data-scroll-index="1" class="slide">
<div class="layout-70">
</div>
</div>
<!----------- SLIDE 3 ----------->
<!------------------------------->
<div data-scroll-index="2" class="slide">
<div class="layout-100">
</div>
</div>
In the CSS, I'm calling to these classes with child selectors. The problem is, I can't use nth:child(2) to select the second 'layout-100' for example. Is there anyway I could do this?
if it is not dynamic, you can check the index of the parent
.slide:nth-child(3) .layout-100 {
}
The problem in your code is there is only one child element inside the slide class div
But using nth-child will have a problem in lower than ie9 browsers
I am using the isotope plugin on my site which is in local development. I'm running into a css problem which i'm hoping someone will be able to help me with. Here's the situation.
<div class="wrapper"> //* Position is relative
<div class="portfolio1"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio2"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio3"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
<div class="portfolio4"> //* Position is absolute
<div class="inner-wrapper">
<div class="portfolio-container">
<div class="portfolio-header"></div>
<div class="portfolio-content"></div>
<div class="portfolio-footer">
<div class="comments"></div>
</div>
</div>
</div>
</div>
</div>
This pretty much lays the portfolio items out in a grid. My problem is that I have a comment system inside which adds the comments inline. When this happens the ".portfolio" class slides underneath the remaining items on the page. Is there a way either through css or jquery that can remedy this problem? I understand that you can position the elements with relative and float them to keep them from running underneath, but as soon as you do that then the isotope plugin breaks down. Here's a screen shot of the problem as well.
Screen Shot
Cheers,
Mike
I'm guessing the comments are inserted with Ajax? Maybe there's some CSS attached to them that could be overridden to position them differently and keep them within their divs.
Just as likely, though, you shouldn't use Isotope for this. If you're using isotope just to create grid there are simpler ways to do that (you might only need to use float). Isotope does some very fancy footwork, does it differently in different browsers and really likes to work on elements with a nice, specific size. If the comments are getting added with javascript, changing the divs at the same as as Isotope is trying to calculate how it's going to move things around for the layout, you're going to run into trouble.