Hi i need to wrap an array like this [TASK 1, TASK 2, TASK 3].
In HTML i want to display it like that TASK 1, TASK 2... and then with a tooltip the user can see the rest of the tasks.
I need that because i have little space in the col.
The piece of HTML is structured like that
EDIT:
<div class="col-2 border-right-yellow fw-bold">
<div class="row body-cells flex-center">
<div class="col-8">
<div class="row">
<div class="col">{{resource.resourcePlanDTO.cognome}}</div>
<div class="col">{{resource.resourcePlanDTO.nome}}</div>
</div>
</div>
<div class="col-4">
<div class="row">
<div class="col">
{{getTasks(resource)}}
</div>
</div>
</div>
</div>
</div>
getTasks is the method i use to take the string array from the back-end
I tried to use some flexbox classes but it didn't work :(
Now the array is displayed like you can see in the image in the column No.Task
Anyone can help? :)
Related
I'm using the following code to list all my products on a website. The problem is that on some lines the title is displayed over two lines, then the next 3 columns doesn't display properly. Please con someone quide me in correcting this.
So it will display
<div class="container">
<div class="row space">
<c7-products>
<div class="col-md-4 col-sm-4 text-center wine-post">
<p><c7-product-image size="small"></p>
<p><c7-product-title></p>
<p><c7-product-wine-vintage></p>
<c7-if !product-wine-vintage>
<p>NV</p>
</c7-if>
<p><c7-product-add-to-cart></p>
</div>
</c7-products>
</div>
</div>
My Problem
I am new to Bootstrap. My boss wants me to replicate the following screen ( or as close as possible ):
Desired Layout
I have tried to do this myself using:
<div class = "row">
and
<div class = "col-lg-x">
... but I can't get the rows and columns right! So frustrating. I have tried and tried and tried.
Does anyone have any ideas how I would replicate the following layout easily?
Thank you so much for looking at my problem.
Regards,
John
Not sure if it's the way that you have put your code on to SO however it should look something like this
<div class="row">
<div class="col-sm-4">
4
</div>
<div class="col-sm-8">
<div class="row">
<div class="col-12 col-sm-12">
12
<div class="row">
<div class-"col-sm-4">
4
</div>
<div class="col-sm-8">
8
</div>
</div>
</div>
Edit: You may also wish to take a look at nesting to help you achieve this https://getbootstrap.com/docs/4.0/layout/grid/
I want to know if there is any problem if we do the following using bootstrap 3 with the html structure?
After reading the documentation and some examples all of them recommend doing the following structure
<div class="row">
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
<div class="col-lg-4" ></div>
</div>
but we are using angular in our application and the sizes of each panel could change and also each panel have it's own controller that knows when to expand or not. I already thought about a controller or an state manager but i don't know at the moment the final ui definitions.
So my question is is any problem with the following structure?
<div class="row">
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
<div>
<div class="col-lg-4" ></div>
</div>
</div>
That structure is fine. However there is a mistake in your class names. It should be 'col-lg-4'.
It may also pay to use some other col-- classes to handle what happens on smaller devices/screen sizes
EDIT:
After re-reading the question I see that they won't have fixed sizes. Perhaps consider implementing a function to assign different sizes to different elements.
E.G.
<div class="row">
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>
</div>
Now you can reference the divs with the different id's and do something like this:
//if you want a large middle column with two smaller columns on the side
$('#one).addClass('col-lg-2');
$('#two').addClass('col-lg-8');
$('#three).addClass('col-lg-2');
note: I'm using jquery for that.
The grid class should be col-lg-4 instead of col-lg 4.
http://getbootstrap.com/examples/grid/
I started to use Twitter bootstrap for this application that I am working on.
I read the documentation about nesting rows in both fixed grid system and in fluid one.
Now, I want to do something like this
So of course I could do something like this
<div class="container">
<div class="row">
<div class="span 12">red</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
</div>
and I think I would get what I want. But I am wondering what are the consequences of doing
<div class="container">
<div class="row">
<div class="span 12">red</div>
</div>
<div class="row">
<div class="span 3">yellow</div>
<div class="span 9">green</div>
</div>
</div>
I don't see any difference now in my browser but I am wondering what will happen if I include multiple row elements in single container tag. Is the row-nesting the only proper way to create something like I showed? What is the difference between those two implementations of my design, so to speak?
The second version is more correct. But both work. The difference is how it responds when the page is re-sized. The second version will shrink and react better
However if you want the containers to match the above image you need to use class="container-fluid" and class="row-fluid"
Also remove the spaces between the spans and numbers
class="span 3"
Should say
class="span3"
I hope you can help me with this one.
I'm trying to transfer the layout of a PHP/SQL website currently using tables to CSS.
I already have the css working (thanks to Yahoo Grid Builder) but now I need to show it programmatically in my website after I have the info on an array (through $row = dbFetchAssoc($result))
I guess the solution is to use n%m to catch the condition I need but I'm struggling with It.
The css I need to replicate is this one, the two class="yui-g" create a row and each class="yui-u first" and class="yui-u" create a cell in that row, so this code gives you a table with 2 rows and 4 columns. I want to show a new item of my array in each "Item N" (cell).
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first">Item 1</div>
<div class="yui-u">Item 2</div>
</div>
<div class="yui-g">
<div class="yui-u first">Item 3</div>
<div class="yui-u">Item 4</div>
</div>
</div>
<div class="yui-g">
<div class="yui-g first">
<div class="yui-u first">Item 5</div>
<div class="yui-u">Item 6</div>
</div>
<div class="yui-g">
<div class="yui-u first">Item 7</div>
<div class="yui-u">Item 8</div>
</div>
</div>
Thanks for your help guys!
In general - HTML tables should be used to display tabular data, with CSS used to style those tables.
HTML + CSS should be used for layouts, rather than the old ways of using tables to position content.
Use <table> for tabular data (data that you would store in a table). Everything else should be using HTML with CSS. From the looks of your code you should be using tables.