I am trying to build an interface with Bootstrap 3 which looks like this:
--------Fieldset-------- -----Fieldset-----
Col 1 Col 2 Some data
Some data Some data Some data
Some data Some data Some data
Some data Some data Some data
------------------------Fieldset------------------------
Some large <textarea>
I am not sure how to go about accomplishing this, though. My concerns are the multiple columns in one fieldset, and the bottom fieldset spanning the length of the two fieldsets above it. I know to make stacked fieldsets all I need to do is nest them, but that then restricts the length of the children fieldsets.
Is what I'm doing even possible? Is it going to get ugly like I feel like it will?
Thanks in advance for any assistance!
I should have provided this anyway - sorry about that. Here's some markup that (should) get you rolling.
HTML
<div class="row">
<div class="col-md-6">
<div class="mycol-1">
<p>Fieldset</p>
<div class="row">
<div class="col-md-6">
<p>Col 1</p>
<p>Some data</p>
<p>Some data</p>
<p>Some data</p>
</div>
<div class="col-md-6">
<p>Col 2</p>
<p>Some data</p>
<p>Some data</p>
<p>Some data</p>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mycol-2">
<p>Fieldset</p>
<p>Some data</p>
<p>Some data</p>
<p>Some data</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="mycol-3">
<p>Fieldset</p>
<p>Some large textarea</p>
</div>
</div>
</div>
CSS:
.mycol-1 { background-color: red; }
.mycol-2 { background-color: pink; }
.mycol-3 { background-color: orange; }
I only used the css as a way to show the boundires. You will probably want to at least rename the classes (or delete them all together). Hope this helps!
Related
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
In this example I use is-mobile class do make force classes inside to display in a row. The problem is this is forcing the <p class="heading"> and <p class="title"> to be displayed in a row to. Not even using <br> tag I am having success to display these two <p> in column. Is there anything I can do?
Are you trying to do something like the Mobile Level example on the Bulma docs? https://bulma.io/documentation/layout/level/#mobile-level
.level-item is set to display:flex, which makes the level items show in rows. In the example provided in the Bulma docs, there's an extra div wrapping the .heading and .title elements. Add that extra div and the text will show on two lines.
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css" rel="stylesheet"/>
<div class="level is-mobile name_logo">
<div class="level-left">
<div class="level-item has-text-centered">
<div>
<p class="heading">Example 1</p>
<p class="is-size-5 has-text-weight-bold title">Example 2</p>
</div>
</div>
</div>
</div>
This is really difficult to express in words so I made this quick diagram:
The outer parent is flex with align-items:stretch so that col 1 and col 2 are both the same height. In my case it's because I have some border or background image that will just look better extending the same length. However... as you can see I want to apply the same rules to the columns inside those two columns. In my case I have an announcements widget in one and a news feed in the other. So I can't really combine the two to just make a single combined feed. They pull from different sources and operate independently with differing time stamps and rules SO... they really need to be separate components but because they are nested separately they do not both "fill" the outer columns equally. When the announcements in col 1 are too small, I get dead/neg space with no border or background texture or whatever extending all the way down.
The way I have resolved this in the past is to use JS to watch for which columns are longer and match height as needed. But this seems REALLY anti-flexbox. It feels like one major reason flexbox exists is to allow more layout functionality without needing JS and although it's a minor thing from a functionality standpoint where I could leave it and just say it is what it is... I am left wondering if there is some hidden magic in flexbox that would allow me to say if the parent>parent is stretching, than at least match that.
Is this what you are looking for?
HTML:
<div class="outerContainer">
<div class="innerContainer">
<div class="col">
<h2>Column 1</h2>
<p>some stuff</p>
<p>some stuff</p>
<p>some stuff</p>
<p>some stuff</p>
<p>some stuff</p>
</div>
<div class="col">
<h2>Column 2</h2>
<p>some stuff</p>
<p>some stuff</p>
<p>some stuff</p>
<p>some stuff</p>
<p>some stuff</p>
</div>
</div>
<div class="innerContainer">
<div class="col">
<h2>Column 3</h2>
<p>some stuff</p>
<p>some stuff</p>
</div>
<div class="col">
<h2>Column 4</h2>
<p>some stuff</p>
<p>some stuff</p>
</div>
</div>
</div>
CSS:
.outerContainer {
display: flex;
justify-content: flex-start;
align-items: stretch;
}
.innerContainer {
display: flex;
align-items: stretch;
border: 1px solid red;
}
.col {
padding: 16px;
background-color: pink;
border: 1px solid black;
}
https://codepen.io/McHat/pen/QzZExp
I want to make Jade mixin which will output something like this
<div class="progress__graph">
<div class="progress__bar two">
<p>Web Design 80%</p>
</div>
</div>
<div class="progress__graph">
<div class="progress__bar three">
<p>Web Design 80% </p>
</div>
</div>
So far I have this but I can't figure out how to make it so I can add classes as well ( 'two', 'three' etc)
mixin progress(text)
.progress__graph
.progress__bar
p #{text}
You can use the following mixin in jade:
mixin progress(text, className)
.progress__graph
.progress__bar(class=className)
p #{text}
+progress('Text goes here', 'one')
+progress('More text here', 'two')
Which will render the following HTML:
<div class="progress__graph">
<div class="progress__bar one">
<p>Text goes here</p>
</div>
</div>
<div class="progress__graph">
<div class="progress__bar two">
<p>More text here</p>
</div>
</div>
Hope that helps. You can see an example of this here - http://codepen.io/AdamCCFC/pen/dXdWXy
I need to know how to display text in columns inside a horizontal scrolling box.
Basically I have a 600x300 box, and each bit of information is given inside a column, like;
Column 1... Column 2 .... Column 3
Para 1..... Para 2 ...... Para 3
Without the dots.
The thing then has to be contained within a horizontal box.
So how is this done?
I used something like the following to create the columns:
<style>
.column {
width:200px;
float:left
}
</style>
<div class="column">
<h2>header text</h2>
<p>paragraph text What if this is longer</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
But I cant' figure out how to contain this all within a box that can scroll horizontally
Add overflow-x: scroll to your CSS definition.
Put it in a container that has white-space:nowrap and make the columns display:inline-block
.column-container{
white-space:nowrap;
}
.column {
width: 200px;
display:inline-block;
vertical-align:top;
white-space:normal;
}
<div class="column-container">
<div class="column">
<h2>header text</h2>
<p>paragraph text What if this is longer</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
</div>
I am trying to access Foundation 4 sections by clicking a link on a page. Here's my problem explained in more detail. This is what sections in Foundation look like :
And here's the code for it.
<div class="section-container vertical-tabs" data-section="vertical-tabs">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 3</p>
<div class="content" data-section-content>
<p>Content of section 3.</p>
</div>
</section>
</div>
When you click on Section 1, it opens the content of section 1. The same thing for section 2 and 3. Now, is there a way to post a link somewhere on a site, for example link to Section 1, 2 and 3. When you click on one of them, it will go on the sections part and will open the right section content based on which linked we clicked on.
http://foundation.zurb.com/docs/components/section.html
Checkout deep linking section for examples of how to get this functionality working.
Here is a quick example;
<div class="section-container auto" data-section data-options="deep_linking: true">
<section>
<p class="title" data-section-title>Section 1</p>
<div class="content" data-slug="section1" data-section-content>
<p>Content of section 1.</p>
</div>
</section>
<section>
<p class="title" data-section-title>Section 2</p>
<div class="content" data-slug="section2" data-section-content>
<p>Content of section 2.</p>
</div>
</section>
</div>
To get the linking to work just add the ID to your URL. eg. http://someurl.com/#section2