I have two views in a Drupal page with the following structure:
<div>
<div>Some content</div>
<div> View 1 </div>
<div> View 2 </div>
</div>
Now I want a wrapper div covering the two views:
<div>
<div>Some content</div>
<div class="wrapper">
<div> View 1 </div>
<div> View 2 </div>
</div>
</div>
What is the best and easiest way to do this?
A cleaner way would be to use the views_embed_view function to get the output from the two views, which you then wrap in a div.
Where to put this code and how to do it, would depend on how you are doing things now. You could create a block for it and gain the flexibility of blocks.
You'll want to create a custom .tpl file for this. It would be something like, but not exactly:
views-view-viewname.tpl.php
To find the file name, edit the views then look under Basic Settings > Theme.
You can also use Views attachments (Google around to figure out how to make them). So make View 1 a normal view and attach View 2 to appear after View 1. You will get a wrapper div around both the views.
Related
I can see lots of answers for this but not quite the right solutions..
Essentially i'm displaying numerous emails in a thread (looks like iMessage a bit) on a page. The messages are looped within a repeated element, with the HTML email displayed inside it.
I have no control over the HTML in the email content as it could be from anywhere.. the problem is that the HTML in the email is inheriting CSS styling from the page style sheets.. this is making it all look weird..
I can't overrule the CSS with a more specific CSS, as there could be any classes or id's coming in the email that match those in the main style sheet..
I've tried adding all:initial to the wrapper div like this:
div.sentMsgBody *{
all: initial !important;
}
This however seems to override any styles that comes with the email and so looks really naff..
Anyone got any ideas how to display the email content with its own HTML without taking on the main styles?
Thanks!!
Addition:
I've been asked to show my code, though that's quite tricky...
there's loops of a certain div in the page like this:
<div id="page">
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
<div class="sentMsgBody"></div>
</div>
Of course each loop of this div could have any HTML at all as its showing emails...
eg:
<div id="page">
<div class="sentMsgBody">
<div class="Header">My Email</div>
<div class="Main">This is my email body</div>
<div class="Footer">Email Footer</div>
</div>
<div class="sentMsgBody"> ... ... </div>
<div class="sentMsgBody"> ... ... </div>
</div>
Here the Header and Footer etc may take css from the main page...
I thought about iFrames but they are messy, i don't know how big the content will be for each one, are a bugger with being responsive too, and there could be dozens that have to be created dynamically from the content of each div that is loaded by ajax from a handler.
I am working on a website using drupal. I have created a view with several fields. I want to set some if the field inline horizontally not not one after another vertically. Please help me in the context.
I want to set these ratings start , I'm interested button and Read More link in a row.
If you're familiar with html and css, you can create a new "Global: Custom Text" field.
Exclude the other fields from display, and use Replacement Patterns inside styled div-containers specified in the custom text field.
Little dirty example working with float:
<div style="width:50%;height:200px;float:left;">
<div style="width:100%;">Next div below me</div>
<div style="width:100%;">Previous div above me [somereplacementpattern]</div>
</div>
<div style="width:50%;height:200px;float:left;">
<div style="width:auto;float:left;">Next div on my right</div>
<div style="width:auto;float:left;">Previous div on my left<div>
</div>
I'm trying to adapt bootstrap's standard practices to speed up some of my development but have a quick question related to showing and hiding cols.
I have the following simple layout
<div class="row" id="contactGrid">
<div class="col-sm-2">Sidebar</div>
<div class="col-sm-10">Content</div>
</div>
When I use AngularJS to show/hide the Sidebar col I expect the Content col to stretch the entire width of the container but it doesn't it says at 'col-10'. Do I need to programmically change the class/width to col-sm-12 when I hide the sidebar?
Thanks for your help, I'm sure this is an easy one!
The element with the class col-sm-10 will always have 10/12 of the width of it's parent row. Therefore you need to update it on the fly, when your sidebar changes to hidden. As you already use AngularJS you might have a variable defining if your sidebar should be visible or not. This variable may also define your class conditionally for your content div.
<div class="row" id="contactGrid">
<div class="col-sm-2" ng-show="booleanVariable">Sidebar</div>
<div ng-class="{col-sm-10: booleanVariable, col-sm-12: !booleanVariable}">Content</div>
</div>
Daniel,
Your answer is the reason I'm trying to learn the BS/NG style of UI. It's just knowling where the shortcuts begin and end. To polish it off I used a ternary expression in the ng-class. showFilterSidebar is my hide/show variable. Thanks Again!
<div ng-class="showFilterSidebar ? 'col-sm-10' : 'col-sm-12'">
Yes you need to change class to col-sm-12 and hide for col-sm-2 to avoid problems with floatin .
This is an easy question. But what I want to know is: Is there a way to delete a div without removing its content USING bootstrap? I can also refactor the question to: Is there a way to delete a div CLASS dynamically with Bootstrap?
My code is simple:
<div class="container">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
GOOGLE MAP
</div>
<div class="col-md-2"></div>
</div>
</div>
I know there already exists a way to make it visible and or hide it (hidden-phone ..), but what I want to do is actually remove the container, the row and the cols and leave the google map to fill the whole width.
What I have right now is:
<div class="container hidden-phone">
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<div class="googleMap"> ... </div>
</div>
<div class="col-md-2"></div>
</div>
</div>
And then, right after that, I add the div of the google map again. But instead of hidden-phone, now:
<div class="googleMap visible-phone"> ... </div>
This way, when you switch to a phone, the container and separations of the map with the screen are none.
This is the easiest way, but it seems a little unpractical, because maybe I don't see one, but it is there, so I'm downloading the map into the client twice, I believe that is not clever.
I could always use JavaScript(jQuery) to listen to the event of resizing and remove it my self.. That is not a problem at all, but maybe bootstrap has a build-in functionality already, something like a data attribute like "data-hidden-phone-class='someClass'", or maybe a class that hides some classes when resizing like: "hidden-classes-phone" this way when the screen resizes to a phone one, boostrap would hide all the classes of that element? Or something.
I know the names for attributes and classes are not attractive, but is for the purpose of the question.
I hope I made myself clear enough, let me know if you don't understand something, thanks!
for example.
if i want to quickly wrap anything by this in once.
in dreamweaver or in any other free software where i can do this.
I want to select this
<p>anything can be here - content, other html tag etc.</p>
and in one shot want to wrap inside 2 divs with predefined classes
<div class="one">
<div class="two">
<p>anything can be here - content, other html tag etc.</p>
</div>
</div>
I have work with large amount of code and need to wrap random things in Divs with defined attributes.
I found my answer on my own after digging.
We can do this from Dreamweaver Snippet's "Insert before" and "Insert after" optiion
alt text http://shup.com/Shup/300767/11022382120-My-Desktop.png