I am trying to re-position div based on the visibility of other divs. When the screen size is reduced, they stack up and hiding/showing any div automatically makes the stacked up divs to show/hide without any blank area, but not in normal screen size (laptop/desktop).
Take a look at this jsbin
Now, uncheck any checkbox. If a row has only one div shown, then I want it resized so that it occupies the hidden div too.
I am using a col-md-6 class for the 2x2 divs in the page.
<div class="col-md-6 column" id="1col"> </div>
Try this: First, add a class name to your .row class so you don't affect it in other places, then you use the following CSS
.row{display:flex; justify-content:space-around}
.column{display:inline-flex; height:100%; width:auto;}
of course you'll replace .row with (say) .row.myColumns but in the meanwhile you can use just this code to test in your jsbin. I don't have an account there and don't plan to signup just to test so I couldn't fork it, but I played with your code using 2, 3 and then moving all four columns inside a single row and it works perfectly, so try it by yourself.
Related
I am using bootstrap 4.0.0 collapse to hide and reveal a bootstrap "row". The row contains four columns - "col-md-3" - of buttons. This row is laying out just as I want it too until I add the "collapse" class, which then causes all the cols inside the row to stack like block elements.
Is this a known thing, that you can't put a row, or complex elements to be collapsed?
Below are two screenshots of before and after - with the element html visible on the :Before
After:bad
well the col-- css is a flexible container, that has padding and margin settings that change with screen size. There will be some elements that will be blank depending on screen size. When I build a menu I use fixed elements inside the collapse using ul and li tags like you would a nav bar. I have used the navbar code, then override colors inline by setting style attributes in the html tag. Also, you can dynamically insert display:none in an element via jquery or java might give you a better effect (which I use from time to time instead of the collapse routine bootstrap has set up.. ). You can also play with inserting offset-md-* class in if you just need to offset a div container. But I use that for centering a responsive div like a login screen.
I have the following scenario on JSFiddle: http://jsfiddle.net/psax3fge/
D FIDDLE: http://jsfiddle.net/psax3fge/1/
Basically its a div that has some info in it. The info is 3 separate divs that are inline block, they will be next to each other if there is enough room but will stack underneath each other when the Windows is made smaller
I want this div to be hidden until a button is clicked where the div slides down. I know not setting the height property will make the div have a fluid height (height gets bigger as things stack underneath each other). However, when I animate it with jQuery, I have to set a height.
Is there a way to do this without losing the fluidity of the div? An alternative is to not animate the div and just make it visible/hidden on button click, but I'd really like to use the animation
Update 4: http://jsfiddle.net/psax3fge/4/
Leave the .container div height to auto and remove the overflow from it.
Now you can use the slideToggle function of the jQuery to show and hide the .container.
P.S you can set display:none to container in initialization.
I implemented a function which is able to show/hide the content of a table row or column with a sliding animation.
What the code does:
Retrieve all cells of the column (th, td)
Wrap the content of each cell in a <div class="wrapper" />
Animate the width of the wrapper div with jQuery.animate();
After finishing, unwrap the cell contents (remove the div)
The reason why I need the wrapping div is because jQuery can't perform a slide animation on table cells directly - see How to Use slideDown (or show) function on a table row?
See this codepen for the code and demonstration. I removed as much JS code as possible to demonstrate my problem. (You can ignore the html and css, they don't contain relevant information)
Everything works perfectly for rows and columns, in except of one (two?) problems:
When a column is shrinked, the content eventually starts wrapping when there's not enough space left. When this happens, the cell height suddenly increases, resulting in an ugly jump.
When a cell content doesn't need the whole space of it's cell, the show-animation for this content is faster, resulting in ugly output.
What I want to achive is a constantly changing width without affecting the layout. The other columns must not be affected.
Any ideas how I can achieve that?
You could nest your div in another div with overflow hidden:
.crop {
overflow:hidden;
width:100px
}
.inner {
min-width:300px;
width:auto;
}
http://jsfiddle.net/mikatalk/7xwLjp2e/
I have a table using:
<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>
The layout of the table looks like this:
When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:
The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.
If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.
The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.
I am struggling to use dojox.mobile.ScrollableView for scrolling horizontally: I have a
<div data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">
which contains several div elements which float left. However, in this case the elements are not displayed in one single row:
http://jsfiddle.net/wf6NZ/
I could place another div in the ScrollableView with a width set to the sum of all widths plus margins:
http://jsfiddle.net/N7MrD/
However, this requires calculation of the resulting width of all elements which I want to avoid.
So the question is: Is it possible to achieve the results of the second link without the helper div?
Try to define the style 'white-space: nowrap' in any container div.
For example,
<div id="view" style="white-space:nowrap" data-dojo-type="dojox.mobile.ScrollableView" scrollDir="h">