Hi there i am trying to put handsomtable in materialize collapsible divs but they render all completely wrong like so
As you can see the tables are over lapped. But when i click into the tables they fix them self's like so .
Here is where i load the tables
<ul class="collapsible" data-collapsible="accordion">
<li>
<div class="collapsible-header" id="global"><i class="material-icons">filter_drama</i>Global What Ifs</div>
<div class="collapsible-body">
{{>GlobalWhatIf}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Vat Details</div>
<div class="collapsible-body">
{{>Vat}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Bank</div>
<div class="collapsible-body">
{{>Bank}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">place</i>Dividends</div>
<div class="collapsible-body">
{{>Dividends tName="Dividends"}}
</div>
</li>
<li>
<div class="collapsible-header"><i class="material-icons">whatshot</i>Corporation Tax</div>
<div class="collapsible-body">
{{>Dividends tName="CorpTax"}}
</div>
</li>
</ul>
I was thinking of loading the table templates within each drop down div and rendering them when the header is active but i can get seem to get that working either any idea why this happens thanks
Related
This is very weird. I am getting end closing </p> tag after HTML element like <span> or <strong>. No opening tag.
Below is sample HTML code I write in classic editor
<div class="blck>
<div class="col-1">
<strong>Heading 1</strong>
<ul>
<li>list......</li>
<li>list......</li>
</ul>
</div>
<div class="col-1">
<strong>Heading 2</strong>
<ul>
<li>list......</li>
</ul>
</div>
</div>
And this is the output i get
<div class="blck>
<div class="col-1">
<strong>Heading 1</strong></p>
<ul>
<li>list......</li>
<li>list......</li>
</ul>
</div>
<div class="col-1">
<strong>Heading 2</strong></p>
<ul>
<li>list......</li>
</ul>
</div>
</div>
Note the </p> after </strong>
Same thing is happening for <span> element.
One solution is that I remove the WordPress filter wpautop. But then I have to manually add p tags for paragraphs. Which is very cumbersome problem because we I have lots of content to edit.
Any solution for this ?
You can just add a new line in between those html element
For example
<div class="col-1">
<strong>Heading 1</strong>
<ul>
<li>List here</li>
<li>List here</li>
</ul>
</div>
I am trying to place in the correct order the mega menu for every screen or at least for the most common pc / laptop screens, but however, it looks like this. I am using twitter bootstrap 4 for this task
I want to keep the mega menu below the dropdown carpet without getting out of place
<li class="header__el open">
<a href="#" class="header__link dropdown-toggle" data-toggle="dropdown"
aria-expanded="true">header__link<b class="caret"></b></a>
<ul class="dropdown-menu dropdown-menu-large row" x-placement="bottom-start"
style="position: absolute;will-change: transform;top: 3rem;left: 10rem;margin: 1em;margin-left: 37%;transform: translate3d(23px, 22px, 0px);">
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<div class="nav-group" style="margin-bottom:10px; border-bottom:none;">
<a href="#solutions-zero-trust-security?hsLang=en">
<h4>Zero Trust</h4>
</a>
<ul class="list-items space-0">
<li>Operationalize Zero Trust</li>
</ul>
</div>
<div class="nav-group" style="border-bottom:none;">
<h4>Industries</h4>
<ul class="list-items space-0">
<li>Financial Institutions</li>
<li>Law Firms</li>
<li>Retail/PCI</li>
<li>Federal</li>
<li>Airlines</li>
<li>Healthcare</li>
</ul>
</div>
</div>
<div class="col-sm-4" style="padding-right:0px;">
<div class="nav-group" style="border-bottom:none;">
<h4>Compliance & Risk</h4>
<ul class="list-items space-0">
<li>SWIFT</li>
<li>PCI</li>
</ul>
</div>
<div class="nav-group" style="border-bottom:none;">
<h4>Cloud</h4>
<ul class="list-items space-0">
<li>Amazon Web Services</li>
<li>Microsoft Azure</li>
<li>Google Cloud Platform</li>
<li>OpenStack</li>
<li>Multi-Cloud</li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="nav-group">
<h4>Initiatives</h4>
<ul class="list-items space-0">
<li>Container Segmentation</li>
<li>Environmental Separation</li>
<li>Application Segmentation</li>
<li>Securing Application Migration</li>
<li>User Segmentation</li>
<li>Encrypting Data in Motion</li>
<li>Securing Microsoft Applications</li>
<li>Secure a New Data Center</li>
</ul>
</div>
</div>
</div>
</div>
</ul>
</li>
i'm trying to get my wordpress site to do the animate scroll to id, by using the scroll to id by malihu
I can't get it to work. When i click the link it just jump down to the page.
it´s a one page site..
<div class="wrapper">
<nav>
<ul>
<li><a href="#et" rel='m_PageScroll2id'>Et</a></li>
<li><a href="#to" rel='m_PageScroll2id'>To</a></li>
<li><a href="#tre" rel='m_PageScroll2id'>Tre</a></li>
<li><a href="#fire" rel='m_PageScroll2id'>Fire</a></li>
</ul>
</nav>
<div class="side" id="et">
<h1 id="section-1">Et</h1>
</div>
<div class="side" id="to">
<h1 id="section-2">to</h1>
</div>
<div class="side" id="tre">
<h1 id="section-3">tre</h1>
</div>
<div class="side" id="fire">
<h1 id="section-4">fire</h1>
<h2 id="scrollto">Heading 2</h2>
</div>
If you are ok with an alternate method, take a look at this demo http://codepen.io/mattsince87/pen/exByn.
I am using simple css alignment of button on right hand side using pull right at http://www.inboundio.com/services, it is working for first block but it is not for second block. I am not sure what is going wrong, any help ?
You can see the code at the above url, I am also pasting it here too as per SO guidelines
<div class="span12 well">
<ul class="nav nav-list">
<li>
<h3 style="color:#495B67">Heading</h3>
</li>
<li><br>
<p>Sample Text</p><br>
</li>
</ul>
<div class="span8 pull-left">
<strong><b>Your personal consultation will include:</b></strong>
<p style="font-size: 17.5px">
</p><ol>
<li>How your current marketing strategy compares with your competitors</li>
</ol>
<p></p>
</div>
<div class="span4 pull-right">
<button class="btn btn-warning" type="button"><b>Contact Us</b></button>
</div>
because for first block you have set the css value :
.row-fluid [class*="span"]:first-child{margin-left: 0px;}
that only work for first child
do it like .row-fluid .well [class*="span"]{margin-left: 0px;}
There are some structure issues.
Replace the HTML part with the below code.
Explanations:
In previous box you have only two spans, but on second box, you have three spans without a wrap. So I added a wrap div with row-fluid class.
<div class="span12 well">
<div class="row-fluid">
<ul class="nav nav-list">
<li>
<h3 style="color:#495B67">Inbound Marketing Consulting and Analysis</h3>
</li>
<li>
<br>
<p>Request a personalized marketing assessment and receive a
one-on-one consultation that will provide you with quick tips and
valuable insights that will transform your current marketing strategy.
</p>
<br>
</li>
</ul>
</div>
<div class="row-fluid">
<div class="span8 pull-left">
<strong><b>Your personal consultation will include:</b></strong>
<p style="font-size: 17.5px">
</p>
<ol>
<li>How your current marketing strategy compares with your competitors</li>
<li>Full website analysis and opportunities to improve</li>
<li>SEO tips you can immediately implement into your website</li>
<li>How to generate more leads via your website</li>
<li>Blogging, email marketing, and social media strategy</li>
</ol>
<p></p>
</div>
<div class="span4 pull-right">
<button class="btn btn-warning" type="button"><b>Contact Us</b></button>
</div>
</div>
</div>
I'm laying out a navbar and it's coming out all wrong. I want to have a left and right component so I'm using two span6's. But I'm finding that the first span6 is centered on its own line. Chrome's dev tools show the centered div as having the correct dimensions and 20px left-margin -- it's just centered. As if the container is center it?
Here's the HTML for the navigation view:
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span12">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>
"I want to have a left and right component so I'm using two span6's."
...Except if your code is the same as the code you posted in your question, you are using one span12, and then one span6. Here's a version that uses two span6 classes.
http://jsfiddle.net/FtPZf/
<div id="group_and_date_controls" class="container">
<div class="row">
<div id="group_control" class="span6">
<ul>
<span id="new_group">New Group</span>
<li class="controlItem">hi</li>
<li class="controlItem">hi</li>
</ul>
</div>
<div id="date_control" class="span6 navbar pull-right">
<ul id="thing" class="nav pull-right">
<li>Jun 12th</li>
<li>Today, Jun 13th</li>
<li>Jun 14th</li>
</ul>
</div>
</div>
</div>