Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

Infusion/Panel with 3 tabs

I didn't intend to offend you.
V9 uses Bootstrap so for simple things like this you can just copy few lines of HTML from Bootstrap docs and paste em to panel. No need additional addon.

CodeDownload  
<div>
 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
 <li><a href="#settings" data-toggle="tab">Settings</a></li>
 </ul>

 <div class="tab-content">
 <div class="tab-pane active" id="home">...</div>
 <div class="tab-pane" id="profile">...</div>
 <div class="tab-pane" id="messages">...</div>
 <div class="tab-pane" id="settings">...</div>
 </div>
</div>

Hmm. I actually get the concept of that. But I got a question.

How would this work, if I only wanted 1 container with no tabs, and I want to do something like this.

Image - Text Area----------Image - Text Area----------Image - Text Area

Equal spacing for each area for use say in a below header panel

or even something in this form.

Image - Text Area----------------------------------------------Image - Text Area

Image - Text Area----------------------------------------------Image - Text Area

Image - Text Area----------------------------------------------Image - Text Area

Just really curious, because I think I could do a lot with this.
Ok here is what I did. But I have a few problems I can't figure out.

CodeDownload  
 <!-- Table -->
 <table align="center" class="table">
 <td><div class="row">
 <div class="col-sm-1 col-md-3 col-lg-11">
 <div class="thumbnail">
 <img src="..." alt="..." width="242" height="200">
 <div class="caption">
 <h3>Thumbnail label</h3>
 <p>...</p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
 </div>
 </div>
</div></td>
 <td><div class="row">
 <div class="col-sm-1 col-md-3 col-lg-11">
 <div class="thumbnail">
 <img src="..." alt="..." width="242" height="200">
 <div class="caption">
 <h3>Thumbnail label</h3>
 <p>...</p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
 </div>
 </div>
</div></td>
 <td><div class="row">
<div class="col-sm-1 col-md-3 col-lg-11">
 <div class="thumbnail">
 <img src="..." alt="..." width="242" height="200">
 <div class="caption">
 <h3>Thumbnail label</h3>
 <p>...</p>
 <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
 </div>
 </div>
 </div>
</div>
 </table>
</div>]



To start with, I did what they said about a table to make them line up in a row. That's fine, but my issue is even though I set sm to 1, it goes way past my phone screen, and i have to slide left to see all of it.

Next I have that stupid gray matter background. Don't know where to fix that, since it still shows in my polls. I got rid of the gray background of the panel itself, but other areas still have it.

If I could fix just these 2 issues, the panel would be perfect.
First, drop the <table>. In modern times, <table> is for data display, like statistics, accounting display, administration list etc. Never use it for UI because table is worst of the worst when it comes to "mobile" view, and chromium browser especially hates that.

Next, just look at this part for Bootstrap 3.4 CSS grid implementation. I have guessed you have not done that in full yet before start asking questions. We all don't mind answering but we get no where when you don't understand what we tell you.

Address the problem, spacing.

Quote

Image - Text Area----------------------------------------------Image - Text Area


1. To start drawing up a row.
CodeDownload  
<div class='row'></div>



2. Then we need the columns. They are made of a maximum unit of "12" by design. Since you have 4 columns. We'll start with the number on desktop, 2,4,2,4. They add up to 12 in total. So
CodeDownload  

<div class='row'>
   <div class='col-lg-2'>image</div>
   <div class='col-lg-4'>textarea</div>
   <div class='col-lg-2'>image</div>
   <div class='col-lg-4'>textarea</div>
</div>



Now for mobile, it is controlled by .col-xs-* class, and smaller devices, .col-sm-* , and tablets .col-md-* . They stack up so you just add accordingly like this:
CodeDownload  

<div class='row'>
   <div class='col-xs-12 col-lg-2'>image</div>
   <div class='col-xs-12 col-lg-4'>textarea</div>
   <div class='col-xs-12 col-lg-2'>image</div>
   <div class='col-xs-12 col-lg-4'>textarea</div>
</div>



Please read up bootstrap 3.4. Mind that Bootstrap is now already 4+ and soon v5. The one v9 is using is v3.4
Just so you know, I did read the section for indentation, but I have to be doing something wrong. The code in the post is without indentation. Reason I am trying to indent the lines is, that it sits right on the edge of the panel. Just trying to push it over a little. I guess I'm just not understanding the indentation part.

CodeDownload  
<div>
 <ul class="nav nav-tabs">
 <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
 <li><a href="#profile" data-toggle="tab">Profile</a></li>
 <li><a href="#messages" data-toggle="tab">Messages</a></li>
 </ul>

 <div class="tab-content">
 <div class="tab-pane active" id="home"><div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
<div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
<div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
<div class="media">
 <div class="media-left media-middle">
 <a href="#">
 <img class="media-object" src="..." alt="...">
 </a>
 </div>
 <div class="media-body">
 <h5 class="media-heading">Middle aligned media</h5>
 ...
 </div>
</div>
</div>
 <div class="tab-pane" id="profile">...</div>
 <div class="tab-pane" id="messages">...</div>
 </div>
</div>
<hr/>



Also if I add this to the panel, It takes over and shows on the entire left side. It will enclose all my panels in one single panel.

CodeDownload  
<div class="panel panel-default">
 <div class="panel-heading">
 <h3 class="panel-title">Panel title</h3>
 </div>

Thread Information
Author
Replies
27 posts
Views
708 times
Last Post
Last updated on 3 months ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Falk, Wanabo, Chan, Grimloch, Vyper69, RobiNN