I have two fields in one row and another fields that is conditional. However, I want them to fit in one row.
For example:
and
So how do I make the fields fit in one row, regardless whether it has two or three fields?
1)<div class="row">
<div class="col-md-*"></div>
<div class="col-md-*"></div>
<div class="col-md-*"></div>
</div>
2)<div class="row">
<div class="col-md-*"></div>
<div class="col-md-*"></div>
</div>
Is there a way that both of those will fit in one row equally so that in the first case, the asterisk will be equal to 4 and the second case, it will be 6?
Related
I have a card component that I would like to show in rows and columns, I haven't been able to figure it out, I would want to do it without using any dependencies if possible. I want a simple grid like 4 or 5 per row and adding a new row when necessary.
These components are to display the categories created by the user, the amount will change because on this page is where the user can create more, update them or delete the categories.
Right now I'm displaying them simply like this but they're all just one on top of the other
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category" v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
Is there a simple way to display them a certain number per row dynamically?
Edit:
I added some flex parameters as suggested like this
<div class="category-container">
<div v-for="(category, index) in categories" :key="index">
<category_component :category="category"
v-on:delete="confirmDelete" v-on:edit="editItem"/>
</div>
</div>
.category-container {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
Now it is displaying in rows but is there a way to limit the amount per row? It's displaying 6 but they are really pushed together and then the row below they are far apart. Ignore the new button.
Im making responsive table and I want it be fully accessible for every people. But in this case i'm not sure where i should use rowheader and where to use columheader.
Here is my code (ofcourse it is just example, there is not actual data):
<div role="grid">
<div class="row" role="row">
<div class="hidden-xs col-sm-offset-4 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://blogmedia.whoishostingthis.com/wp-content/uploads/2013/04/free-hosting.jpg" alt="Vendor 1">
</div>
<div class="hidden-xs col-sm-offset-1 col-sm-3 " role="columnheader">
<img class="img-responsive" style="width:200px;" src="http://jennmoney.biz/assets/free.gif" alt="Vendor 2">
</div>
</div>
<hr class="line">
<div class="raty-table" role="row">
<span class="col-xs-12 col-sm-4" role="rowheader">
Title 1
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 1
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
<span class="visible-xs-block col-xs-4" role="rowheader">
Vendor 2
</span>
<span class="col-xs-8 col-sm-4" role="gridcell">
Content
</span>
</div>
</div>
Here is a fiddle:
For vendors should I use rowheader or columnheader? And how I should tag "How long can I sing?" Once it is rowheader and on different screen size it can be columnheader.
I see, it is hard to undestand what I mean, so I made two mocks, but thanks to StackOverflow I can't post it, becouse I have to low reputation...
I must post it as a link: http://postimg.org/gallery/j2elhzmc/ - first picture shows how it looks on desktop, second how it looks at smartphone (if you have the same order as me).
Your grid must be defined as non editable
A grid is considered editable unless otherwise specified. To make a grid read-only, set the aria-readonly attribute of the grid to true.
You should explicitly indicate relationships
If relevant headers cannot be determined from the DOM structure, authors SHOULD explicitly indicate which header cells are relevant to the cell by referencing elements with role rowheader or columnheader using the aria-describedby attribute.
Note that you might reference a "display:none" element in the aria-describedby attribute. I will say that the more semantic choice will then be to set aria-hidden attribute on your rowheader elements.
TL;DR:
Set aria-readonly=true on the grid
Set aria-describedby attribute on your "gridcell" cells referencing each one of your "not always visible" columnheader
Remove role="rowheader" and set aria-hidden="true"
Sorry if I'm missing something obvious but columnheader should be used at the top of each column. (You could have a columnheader in the middle of the table, but that's not typical, although I could see it used as a repeating header if it split across pages.)
A rowheader is usually the first cell in the table for that row. You can have multiple rowheaders but it's not common unless you're showing a multi-dimensional table (eg, a sales report that has a year header for all rows, then quarter headers for every three months, then month headers).
You start getting unreliable results (from screen readers) if you have row headers spread across several non-contiguous cells.
I'm assuming you don't want to use <table> and <th scope='row|col'>
I´m a Bootstrap guy, and find Semantic UI, i think it´s awesome. So i´m in the basic learning process, and most of all the GRID SYSTEM.
I read and experiment my own excercise with the grid, and find that works with 16 columns grid, columns size can be definied in the row:
<div class="ui grid">
<div class="five column row">
<div class="column">1</div>
...
</div>
... and in the column itself:
<div class="eight wide column"></div>
And learn about stackable and doubling columns, and learn that you can specify colums sizes for each three devices ( mobile, tablet, computer ).
<div class="six wide tablet eight wide computer column"></div>
My question is, since it´s a 16 columns based grid, it´s not divisible in 3 with equal values how do i get 3 columns in a specific device? Maybe this can be done with doubling but i need a solid solution, i mean, don´t depend in the other devices sizes.
In Bootstrap it would be as simple as ( example of small screen, 12 columns grid ):
<div class="col-sm-4">Content here</div>
Thanks!
Sebastián.
<div class="ui equal width three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
If I understand your question right this should work for you.
Grid Example - Semantic UI
In Bootstrap3, we can further divide a column into multiple columns by inserting a row. e.g
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-6></div>
<div class="col-md-6></div>
</div>
</div>
<div class="col-md-6"> </div>
</div>
</div>
My question is, do we need to have the nested row to be wrapped in a container class, becuase documentation says, container contains the rows. I also want to know whether having more than one container class on a page is fine and syntactically correct? If yes, what will be the difference in above example if I include the nested row in a container.
do we need to have the nested row to be wrapped in a container class
No.
also want to know whether having more than one container class on a page is fine and syntactically correct?
Yes, although you cannot nest containers.
If yes, what will be the difference in above example if I include the nested row in a container.
That would involve nesting containers, which as I said above is invalid.
Sidenote: Bootlint can point out most container-related usage errors.
I am relatively new to programming and am making a website using bootstrap 3.0.
I want to make two rows that center in the middle of the page. For the first row I used div class="col-md-4 col-md-offset-2" and for the second row div class="col-md-4".
My first question is if it is ok that this adds up to 10 rows instead of 12 or if I need to specify the 2 rows on the right also? If so, how can this be done?
Also I would like to increase the horizontal spacing between the columns. I did a bit of research on that and came across mixins but its quit hard for me to grasp. If anybody here can provide me with a simple way to increase the horizontal spacing between two columns that would be great.
Thanks in advance.
looks like this is what you want
<div class="container">
<div class="row">
<div class="col-md-4 col-md-offset-2">col-md-4-offset</div>
<div class="col-md-4">col-md-4</div>
</div>
</div>
its perfectly fine to have column not add up to 12
here is a bootply
and if you want to pad your rows just add padding to .row class, by default there is no padding or margins between rows
Question 1: Yes, it's fine to leave dangling space after your columns, but good practice to tie it off by closing the .row after it.
Question 2: You can add margin to left and right of the column. But that throws off the offset column, so get around that by putting an empty .col-md-2 before them.
<div class="container">
<div class="row">
<div class="col-md-2"></div><!-- empty -->
<div class="col-md-4 margin">col-md-4</div>
<div class="col-md-4 margin">col-md-4</div>
</div>
</div>
CSS:
.margin {
margin-left:10px;
margin-right:10px;
}
Demo: http://www.bootply.com/OS6FX9sie8#
Also, you'll notice in my demo I put the custom class in a media-query. Do that if you want that margin adjustment to only apply on large screen devices, so the columns reach the screen edge on phones.