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.
Related
I have a custom bootstrap tooltip that my customer really likes. It works great on various elements. I added it to a datafield of a gridview table, and it Worked (ed) great -- "until" I added an overflow:hidden div to keep the gridview header row fixed.
Now the the tooltip gets occluded by this header row div. I poked around and saw various workarounds - the only one which kind of worked was to use data-container="body" (attribute) or various derivations of that using javascript which placed the tooltip on top of the header row div (when hovering the datafield of the first row in the gridview).
The problem I have with data-container="body" or { container:'body' }is that it overrides the custom style of the tooltip.
I set the width to 500px and I use !important, ... but when I use data-container="body" the width becomes 200px and the background color changes. I played around with z-index:1000; position:relative; in the css which helped the opacity which I have set to 1 but the width/background color still going to bootstrap default.
What is a workaround for this so I can keep my custom tooltip style?
Well, I came up with one -- non-programmatic workaround (which the client is sort of living with) and that is to add two blank rows to the beginning of the gridview and two more rows to the end of the gridview, and that way the rows with data content the popover tooltip doesn't get clipped now by the hidden div. One other thing I tried was to make the overflow div visible. This also worked to prevent clipping the tooltip, but I lost scrollability of the gridview. Is there a workaround for that?
Let's take the following div for example. The div is this small because I intend to add a scrollbar to it.
<div id='main' style='height:300px; overflow-y: auto;'>
<!-- Content that is long enough to require a scrollbar... -->
</div>
Let's say I initialize a custom scrollbar on this div (malihu or jscrollpane) for example, with the following command:
jQuery("#main").jScrollPane(); // for jscrollpane
jQuery("#main").mCustomScrollbar(); // for malihu
This works just fine for the moment being, but when I add data to the div dynamically, it doesn't appear in the div, and the scrollbar is not adjusted:
jQuery("#main").append("Add this data to the div...");
What could be the problem?
Found out the solution. When creating any of the above scrollbars, they add two containers to the div which is attached to. You must append the content to these containers, and not to the basic div.
For example, to add content to jscrollpane scrollbar, you use:
jQuery("#main").find(".jspPane").html("Data to be added...");
For malihu you would use:
jQuery("#main").find(".mCSB_container").html("Data to be added...");
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 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 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.