Set margin between col-md-* div classes without harming responsiveness of page - javascript

I want to generate html code automatically getting input as list of html controls with set of properties such as x,y,value etc (getting those values from hand made sketch of the html page). I have used bootstrap row classes and col-md-* classes for each control by using set of algorithms. Therefore I have added margin-left style for each col-md-* div based on x value of control. Then I could not get responsibility of the page when it is varying screen size. Please help me to solve this problem.

Don't use margin. Use padding.
Also if all fails, just add an inner container.

Related

Test simulated html element width with javascript

Use case
I want to detect if html tables get too wide, and if so, I want to flip the table header cells to become vertical (e.g. with writing-mode: vertical-lr;).
I want to update this on resize: If the viewport gets bigger, the text in the cells might become horizontal again.
The flip condition is whether the original table with horizontal labels would be wider than its container.
Question
How do I determine the width a table would have with horizontal labels, without changing the table itself?
Thoughts
My current idea would be to make an invisible copy of the table with horizontal labels, and use it as a "sensor". But I am afraid this will pollute the DOM and cause side effects somewhere. Also I would need to keep this copy updated all the time.
Is there a "best practice" or a known pattern to solve this problem?
It is actually quite simple:
We can change the css on the table during the script run. Once we query a property like element.width, this will cause a reflow during the script execution, but it won't cause a repaint. So this means we can do the test without the need for a cloned DOM element, and without visible changes.
See https://developers.google.com/speed/docs/insights/browser-reflow

extending a form's height to fit the content in the form

This is a simple CSS question but I just cannot find it anywhere and the methods I've used on similar questions just never work. How do I a automatically/dynamically change a form's height when content is added in the form in HTML, CSS or JavaScript? And please, I'm not saying putting a scroll bar on the form using overflow: auto; I want it to scroll using the browser's main window. I don't want the content in the form to get out of the boundary of the form. But it would be a relief if only CSS did this. But suggestion is welcome at thus point.
Form is a block element. Don't give it an explicit height and it should adjust accordingly to its contents. However, if you are adamant that it should have a certain minimum height then use the min-height property and set it to the minimum height.
However, if any of its child elements are have its float property set, then give the form a clearfix class.

CSS3 transition z-index

Here is the website I've been working on: Comotional - test site
I am using flipping cards within "Who we are" section and have problems with z-index. Whichever z-index and css combination I tried (even added additional divs on the back side), I can't fix the flipped content appearing below other cards. If you hover over these, you will see what happens and will see where the problems happens. Is there anyway to get this working via js?
It's limited by your container height, not the z-index. Set the height auto and find another way to set up the grid - perhaps making something like a row container along with a clear div while setting height to the front side of the card.
i think the problem is that you have lots of nested elements so changing the z-index of a nested element does not make them appear above on the stack unless until you make the z-index of the parent container greater than other parent containers that are blocking the view.
you can use hover event to change/increase the z-index of parent container on mouse-in and default on mouse-out
link to justify what I am saying

Push down all elements including those who use position:fixed

I'm trying to build fixed html toolbar for my sites network. i'm using css's position:fixed and top:0 and push all elements using body:margin-top.
problem is when a specific site already have a fixed to top element.
is there a way (using css or js) to push down all elements including the fixed ones by a given value of pixels, considering that i don't know if there is one or what is its id/class/top value.
for example, if one site is using HelloBar (www.hellobar.com), i need my bar to push it and all the page content down instead of float over it.
Hope my question is clear enough.
Thanks in advance.
You need to get the height of the toolbar with jquery. Then give the container which is holding the content a margin-top = height of the toolbar.
var toolbar_height = $('.toolbar').height();
$('.container').css({'margin-top':toolbar_height});

get div current (rendered) width with javascript

Hey, Ive got an php script dragging some images from a database and displaying them using float:left; so they go left to right.
However unless in the css i define i width for the container they jump down onto a 2nd line.
So the question IS!
How for the life of me could I get it to figure out the width of the content and then set the width attribute via javascript all on the one load.
I did have a slight worry that this wouldnt be easily possible as it wud have had to render the images/layout first to get a width before then adjusting it.
Ideas please people!! x
Your question has to do with how the flows of floats work...
If two images are floated and the sum of their widths is wider than the containing element, they will wrap (similar to the way words in a paragraph wrap).
Visual references describing the flow of "float"ed elements (way too difficult to describe in a few words):
http://css.maxdesign.com.au/floatutorial/introduction.htm

Categories