So I have a table in html, it has two cells. I would like for these cells, depending on the width of the browser, to be arranged either vertically or horizontally.
I have tried looking for a DOM function to get the job done, but came up with no solution so far.
Tables are bad juju for this exact reason. You should switch to a responsive layout. There are numerous libraries for this purpose; here are two that I have used extensively: http://www.responsivegridsystem.com/, http://getbootstrap.com/.
If you're not looking to use a library, check the possible dup
Here's how I would do it in bootstrap:
<div class='container-fluid'>
<div class='row'>
<div class='col-md-6'>
Half the page
</div>
<div class='col-md-6'>
Other half
</div>
</div>
</div>
Example JSFiddle
Don't use a table. Use div's or some other non-table element, styled as an inline-block with a fixed width.
<style type='text/css'>
.cell {
display: inline-block;
width: 200px; /* or whatever */
}
</style>
<div class='cell'>something</div>
<div class='cell'>else</div>
If that doesn't suit you, start looking for other responsive design strategies.
You can use bootstrap responsive tables for this.
http://getbootstrap.com/css/#tables-responsive
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Just add plugin, add simple code like above and voila.
Related
I am developing a web application using AngularJS.
I have a problem: in an HTML page I needed to show a table that dynamically show the number of rows based on a user's choice. I achieved this effect using a script and bootstrap rules.
I won't go into details, but I just show you the high-level code and a screenshot of the result:
HTML code:
<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<!-- Code of the element drop down menu.....-->
</ul>
</script>
<div>
<ng-form >
<div class="panel panel-default table-panel noborder">
<div class="table-responsive">
<table ng-table-dynamic="$ctrl.tableParams with $ctrl.cols" class="table" template-pagination="custom/pager">
<!-- Code of the table.......-->
</table>
</div>
</div>
</ng-form>
</div>
The result is something like that:
My problem is that no type of CSS code seems to work to move the dropdown menu position to this position:
I tried to use position (relative, absolute, fixed) and also to encapsulate the <script> element inside <div> or <span> and refer it with CSS rules. But nothing seems to work! The dropdown menu always remains at the bottom and center of the page. I guess it's bootstrap's fault. Can you tell me how I can resolve this issue?
The pagination buttons are working. If the css should also work. You can place the below code into the codepen to see the effect.
Codepen
.table{
position:relative;
}
.ng-table-counts{
position:absolute;
top:0;
right:0;
}
This is what my webpage looks like on my computer
What I am trying to do is:
move my content (buttons, table, dropdown) to the center of the webpage (dynamically and automatically depending on the screen size).
Have the webpage fit properly on mobile browsers.(i.e. have the content take up the majority of the screen space)
I am a bootstrap and css noob. The following is a jsFiddle with similar code to what my webpage has: https://jsfiddle.net/zpvrspaq/18/
How would I go about just centering one of the rows, such as:
<div class="row no-gutter">
<div class="col-xs-1"><h5 class="text-center">Your grade</h5></div>
<div class="col-xs-1"> <h5 class="text-center">% of grade</h5</div>
</div>
<div class="row no-gutter">
<div class="col-xs-1"><input type="text" class="marks form-control"></div>
<div class="col-xs-1"> <input type="text" class="grades form-control"></div>
</div>
Anything to point me in the right direction would be great.
Try not to rely too much on Bootstrap's rows and columns for sizing things like tables. col-xs-[number] should really be limited to determining the way elements line up or break onto new lines when the viewport is expanded or shrunk.
I've given #table-of-grades a display type of table and auto margins to center it, and added a new class, .table-cell, to float the cells of the table within the width of #table-of-grades
#table-of-grades {
display: table;
margin: auto;
}
.table-cell {
width:50%;
float:left;
}
I also moved everything within the #table-of-grades container, so they will fill the width of that element when the viewport is shrunk or expanded. Also notice the change in markup, i.e. I removed the rows and columns in the table itself to create a layout that doesn't rely on bootstrap's rows and columns.
https://jsfiddle.net/Lzvz60u1/
Try putting the container in a and then use a margin-left:auto; and margin-right:auto; to center the div
DEMO
It would be very simple using flex box.
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>
I am having an problem where I have to center two security seals at the bottom of a responsive payment form, and one of them works fine but the other, that contains a tag, does not
<div class="container">
<div class="row text-center">
<div class="footer">
<div class="col-md-12 col-sm-12" >
<script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?code=<?= $this->model->getTWKey() ?>"></script>
</div>
<div class="col-md-12 col-sm-12" >
<span id="cdSiteSeal2" >
<script type="text/javascript" src="//tracedseals.starfieldtech.com/siteseal/get?scriptId=cdSiteSeal2&cdSealType=Seal2&sealId=55e4ye7y7mb73952743bf753a95b7cfvma3y7mb7355e4ye734fda9346a2ed18a"></script>
</span>
</div>
</div>
</div>
</div>
You can see the page here. I've tried several different things (ie offsets and creating a centering class ala)
.img-center {margin:0 auto;}
But nothing has worked.
Since the first javascript widget centers fine, I can only conclude that the is doing something to prevent it from working.
I am pretty sure I am not doing this the totally correct way, but I am a backend developer not a UI designer and I'm just trying to get something to my client.
By inspecting the element that the javascript inserts, you can see it's a div that needs centering, not an image.
Try adding this CSS rule:
#siteSealFauxBadge > div {
margin: 0 auto;
}
add css
#siteSealFauxBadge div:first-child {
margin: 0 auto;
}
You will get the result as shown in picture
I have an application in which I am kind of stuck.
i have created a widget which needs to be placed in such a way that it needs to auto place itself.
Eg:
I have something like this on a page, now initially all these are arranged perfectly(horizontally aligned), but as soon as the size of one of the component changes
Eg:
It becomes like this. What I want is it auto adjust itself to consume the empty spaces.
I played around with the css to make it float :left and display: block, by which I am able to align each component horizontally, but still I am not able to utilize the space on my page.
Any help is appreciated
a CSS only solution:
taken you want to have 3 "connection" items per row this should be your CSS:
#wrapper{
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
column-count: 3;
column-gap: 1em;
}
.itm{
display:inline-block;
width:100%;
border-top:1px solid red;
border-bottom:1px solid red;
margin-bottom:1em;
}
.itm:nth-child(3n+1){
clear:left;
}
and this your HTML
<div id="wrapper">
<div class="itm">
<h1>connections a</h1>
<div class="info">
<span class="label">server</span>
<span class="value">100</span>
</div>
</div>
[... copy paste as many "itm"s as you need]
</div>
See here a fiddle with "add more items on click" to see the result -- old -- http://jsfiddle.net/5FsLm/ -- old --
UPDATED fiddle http://jsfiddle.net/c2nkn/
This is definitely a perfect case for jQuery Masonry. The plugin can automatically arrange columns so they can fit together. Something like this:
html
<div id="wrapper">
<div id="list">
<div class="item"> ... </div>
<div class="item"> ... </div>
<div class="item"> ... </div>
<!-- ... -->
</div>
</div>
jquery
$(window).load(function(){
$('#list').masonry({
itemSelector: '.item'
});
});
P.S.: At the moment, the official website is down for some reason, I will put a temporary link here.
UPDATE: Temporary link for jQuery Masonry (actually from cutestpaw.com which has a local copy of it, so if you want to test it, you should copy the file instead of linking to it)
If you dont want much animations and need a script that very easy to understand and satisfies your purpose try jquery.popbild.js.
You can download the project from :http://funscripts.popbild.com/jquery_popbild/
Its mainly created to arrange element in the pinterest style for three columns(uses three divisions)
If I'm understanding you correctly, it looks like what you really want is a three column structure for these widgets. In which case it would look something like this.
HTML
<div class='three-column'>
<div class="widget">...</div>
<div class="widget">...</div>
<div class="widget">...</div>
</div>
<div class='three-column'>
...
</div>
<div class='three-column'>
...
</div>
CSS
.three-column {
width: 30%;
padding-right: 3%;
float: left;
}
UPDATED: http://jsfiddle.net/cBgj4
I have
<div class='line'>
<div class='chord_line'>
<span class='chord_block'></span>
<span class='chord_block'>E</span>
<span class='chord_block'>B</span>
<span class='chord_block'>C#m</span>
<span class='chord_block'>A</span>
</div>
<div class='lyric_line'>
<span class='lyric_block'></span>
<span class='lyric_block'>Just a</span>
<span class='lyric_block'>small-town girl</span>
<span class='lyric_block'>living in a</span>
<span class='lyric_block'>lonely world</span>
</div>
</div>
(Excuse me for not being too familiar with proper css conventions for when to use div/spans)
I want to be able to display them so that each chord_block span and lyric_block span is aligned vertically, as if they were left-aligned and on the same row of a table. For example:
E B C#m A
Just a small-town girl living in a lonely world
(There will often be cases where an empty chord block is matched up to non-empty lyric block, and vice-versa.)
I'm completely new to using CSS to align things, and have had no real understanding/experience of CSS aside from changing background colors and link styles. Is this possible in CSS? If not, how could the div/class nesting structure be revised to make this possible? I could change the spans to divs if necessary.
Some things I cannot use:
I can't change the structure to group things by a chord_and_lyric_block div (and have their width stretch to the length of the lyric, and stack them horizontally), because I couldn't really copy/select the lyrical lines continuously in their entirety, which is extremely critical.
I'm trying to avoid a table-like solution, because this data is not tabular at all. The chord line and the lyric line are meant to be read as one continuous line, not a set of cells. Also, apart from the design philosophy reasons, I think it might have the same problems as the previous thing bullet point.
If this is possible, what div/span attributes should I be using? Can you provide sample css?
If this is not possible, can it be done with javascript?
EDIT: I'm sorry I wasn't clear at the start, but I would like a solution that allows both the chord line and the lyric line to be "selectable" and continuous.
Original Attempt... ---> CSS Tables Demonstration
div.line {
display:table;
}
div.line > div {
display:table-row;
}
div.line > div span {
display:table-cell;
vertical-align:middle;
}
For empty blocks, place html entity for non-breaking space as their contents. This should do what you want, if not, then I may have misunderstood.
SPECIAL NOTE: Compatibility for display:table-* is limited. More information
NEW EXAMPLE: Quite sure this is what you are looking for. --->
Demonstration
CSS
.block {
margin-top:1.5em;
position:relative;
display:inline-block;
}
.block .chord {
font-weight:bold;
font-size:0.8em;
position:absolute;
top:-1em;
}
HTML
<div class="block">
<div class="chord"></div>
<div class="lyric"></div>
</div>
<div class="block">
<div class="chord">E</div>
<div class="lyric">Just a</div>
</div>
<div class="block">
<div class="chord">B</div>
<div class="lyric">small-town girl</div>
</div>
<div class="block">
<div class="chord">C#m</div>
<div class="lyric">living in a</div>
</div>
<div class="block">
<div class="chord">A</div>
<div class="lyric">lonely world</div>
</div>
It looks interesting to me so I just searched over it and find following article that is discussing similar problem:
Create a table using CSS
I checked it here:
http://jsfiddle.net/MdzDp/
I think you need to use DIVs and SPANs instead of ULs and LIs here.
A similar question was asked once, and the only workable solution was indeed a combined "chords and lyrics" block (with the chords having a combination of position: absolute and position: relative). It's the only way I can think of if you want this to work reliably and in edge cases like different font sizes and so on.
JSFiddle example
Now this doesn't do exactly what you need: It doesn't allow continuous selection of lyrics. But I can think of two general directions to extend it.
A) Chords as background images: If the Chord symbols
C# E# Em Am
could be background images instead of actual text, you could use my code example and give the chord_block class a background-image of whatever Chord is in question. The image would have to contain the Chord (e.g. Em) as text. The upside is that this keeps the "lyrics line" intact. The downside is that this is not accessible, not resizable, and possibly problematic in print because many browsers don't show background images when printing.
B) Using jQuery: Using the approach shown in the JSFiddle, you have elements of the class chord_block that are already in the correct position. It should be half-way easy to use jQuery to create a new element on the fly, and add it to the document at the x/y position of each chord_block but outside the line, so you can still select the whole lyrics line without interference.
here's a crappy way to do it... i'd try more, but christmas dinner is served :)
<head>
<style type="text/css">
div.line {width:100%;}
div.line div.chord_line div.chord_block, div.line div.lyric_line div.lyric_block {width:20%; float:left;}
div.lyric_line {clear:left;}
</style>
</head>
<body>
<div class='line'>
<div class='chord_line'>
<div class='chord_block'>...</div>
<div class='chord_block'>E</div>
<div class='chord_block'>B</div>
<div class='chord_block'>C#m</div>
<div class='chord_block'>A</div>
</div>
<div class='lyric_line'>
<div class='lyric_block'>...</div>
<div class='lyric_block'>Just a</div>
<div class='lyric_block'>small-town girl</div>
<div class='lyric_block'>living in a</div>
<div class='lyric_block'>lonely world</div>
</div>
</div>
</body>
EDIT:
if you're open to structural changes, here you go:
<head>
<style type="text/css">
#chord_block {float:left; padding:2px; text-align:left;}
</style>
</head>
<body>
<div id="chord_block">
<div id="chord"></div>
<div id="lyric"></div>
</div>
<div id="chord_block">
<div id="chord">E</div>
<div id="lyric">Just a</div>
</div>
<div id="chord_block">
<div id="chord">B</div>
<div id="lyric">small-town girl</div>
</div>
<div id="chord_block">
<div id="chord">C#m</div>
<div id="lyric">living in a</div>
</div>
<div id="chord_block">
<div id="chord">A</div>
<div id="lyric">lonely world</div>
</div>
</body>
let the down-voting begin ...
as much as I love css, sometimes tables are worth using.
let me clarify, if you can pull it off with css and div's, it's all good; but if you have to spend hours trying to figure the simplest (with tables) layout out -- I think you're wasting your (and your client's) time and money.