I want to render a panel using existing HTML.
The idea is that I have a code like this :
<div id="widget" class="widget">
<div class="widget-content>
<span> blabla </span>
// some content here
</div>
</div>
And the idea is that I want to create a panel using the DIV "widget" and that the content of the panel is the div "widget-content".
To explain a little bit, I receive from an external source an HTML page, and I want to add some interactivity/functionality to this page using ExtJs.
Using renderTo, what I was able to do right now is something like that:
<div id="widget" class="widget">
<div class="widget-content>
<span> blabla </span>
// some content here
</div>
<div id="panel-1152" class="x-panel x-panel-default x-border-box" style="height: 36px;">
<div id="panel-1152_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel-header-horizontal-noborder x-panel-header-default-horizontal-noborder x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-noborder-trl" style="width: 1389px; right: auto; left: 0px; top: 0px;"> ... </div>
<div id="panel-1152-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="width: 1389px; left: 0px; top: 36px; height: 0px;"> ... </div>
</div>
Using render to after the load of my page.
But what I want to achieve is something like:
<div id="widget" class="widget x-panel x-panel-default x-border-box">
<div id="panel-1152_header" class="x-panel-header x-header x-header-horizontal x-docked x-unselectable x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-horizontal-noborder x-panel-header-horizontal-noborder x-panel-header-default-horizontal-noborder x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top x-noborder-trl" style="width: 1389px; right: auto; left: 0px; top: 0px;"> ... </div>
<div id="panel-1152-body" class="x-panel-body x-panel-body-default x-panel-body-default x-noborder-trbl" style="width: 1389px; left: 0px; top: 36px; height: 0px;">
<div class="widget-content>
<span> blabla </span>
// some content here
</div>
</div>
</div>
Thanks in advance
You could do this a couple of different ways.
If all you want is the html inside of the panel, just use the html config option http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.panel.Panel-cfg-html
If you want to dynamically add it use getCmp('selector').body.update(yourhtmlhere) http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.dom.Element-method-update
you could also use contentEl to specify an existing element in the html that you want to move into the panel http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.AbstractComponent-cfg-contentEl
hope this helps.
Related
I am creating a website in html & css through Django. But I am having some difficulties. Here is my code for the buggy element of the code:
detail.html
<div class="contact-info" style="float: right!important; position: sticky!important; margin-right: 25px!important; margin-left: 750px!important; width: 30%!important; height: 50px!important; padding-bottom: 195px!important; margin-top: -2200px!important;">
<div class="elements" style=" margin-bottom: 200px!important; padding-bottom: 20px!important;">
<div class="address">
<span class="icon-map-marker"></span>
<p> <a style="color:grey!important; border:none!important;" href="{{restraunt.address_link}}">{{restraunt.address}}</a></p>
</div>
<div class="address" >
<span class="icon-mobile-phone"></span>
<p style="color: grey!important; border: none!important;"><a style="color:grey!important; border: none!important;" href="tel:{{restraunt.phone}}" style="color: grey!important;">+{{restraunt.phone|phonenumber}}</a> </p>
</div>
<div class="address">
<span class="icon-link"></span>
<p><a style="color:grey!important; border: none!important;" href="{{restraunt.website}}">{{restraunt.website}}</a></p>
</div>
<div class="address">
<span style="" class="icon-time"></span>
<p>Mon - Sun, {{restraunt.opening_hour}} - {{restraunt.closing_hour}} <br>
</div>
</div>
</div>
The code seems to work fine until I enter a new review. Then, the element jumps down and keeps jumping as a new review is added. I don't know how to fix this as I tried postion: relative, postition: absolute and position: sticky but all seem to have failed. I will put some screenshots to explain it better.
Before new Review:
After a new Review:
I have been unable to solve this problem for a long time now. I would really appreciate any help. Thank you
Essentially, I'm making a tier-based pricing grid and it needs to look like this:
However, when my code is placed onto the web page (through Wordpress)
a random set of tags are above the '10+ Sessions" pricing box, which messes up the spacing. The tag has a 20px top padding.
It looks like this:
So, I inspected the element and found that there's a set of tags above the box with a top padding of 20px.
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
"><p></p>
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
"><p></p>
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p>
</div>
The tags after the opening of the div is the problem.
However, the tags aren't there in the original source code, which is this:
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
">
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
">
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p></div>
I just can't figure out why the tags are there.
Could anyone help with this?
Thanks
For anyone with a similar problem, install a plugin called Raw HTML for Wordpress. This prevents Wordpress from attempting to format your Raw HTML and adding random paragraph tags.
got an issue with updating partial views within my application.
Basically, after the login procedure the user will be redirected to a selection of archives to choose.
It should lead to a searchmask to enter some criterias to search for.
What I got is this:
#_Layout.cshtml
<div id="_pview">
<div class="container body-content">
<div class="_pviewcontent">
#RenderBody()
</div>
</div>
<footer class="footer">
<hr />
<a class="copyright">#Html.ActionLink($"© Copyright 2006 - {#DateTime.Now.Year} MyCopyright", "Index", "About")</a>
</footer>
<div id="loading_image" class="loading" style="display: none;"></div>
</div>
#ArchiveSelection/Index.cshtml
<div id="container">
<div id="_divpartialview">
#{Html.RenderPartial("_ArchiveSelection", Model);}
</div>
</div>
#ArchiveSelection/_ArchiveSelection.cshtml
<table class="table">
#{
if (Model != null) {
foreach (var item in Model.FileCabinetList) {
<tr>
<td>
#Ajax.ActionLink(item, "Index", "SearchMask", new {filecabinet = item}, new AjaxOptions {UpdateTargetId = "_divpartialview", LoadingElementId = "loading_image"})
</td>
</tr>
}
}
}
</table>
#RenderBody/RenderPartial() will show the list below the navigation bar.
After updating the div container with a partial view, it moves into the navigation bar.
#SearchMask/_SearchMask.cshtml
<div style="height: 500px;">
<div>
<div style="height: 500px; width: 330px; float: left; background-color: aqua"></div>
<div style="height: 500px; width: 330px; float: left; background-color: gray"></div>
<div style="clear: both;"></div>
</div>
</div>
As you can see the container div (_divpartialview) moves right into the navigation bar after updating it.
Any idea what I am missing or doing wrong?
Regards
Finally resolved it on my own.
I now feel pretty embarassed, because it was so simple. It was just a css template, that was colliding with bootstrap css.
Due to improper naming of some css classes this was the result.
Im kinda new to this, so don't laugh at me too hard :D
I want to change the middle view of the current view when the links are clicked. one link is to view the iphone and the other one is to view the tablet. Default view should be iphone. Other than that anything in the view should not be changed with the click. I don't want to toggle between the views. Just load the view with the click on the link.
Below is the html code which I tried.
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView= !iphoneView"></a>
<a href ng-click="tabletView = !tabletView" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone tmp-url="{{appTemplateUrl}}"></me-iphone>
</div>
</div>
</div>
<div class="mobile-preview" ng-class="{'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-tablet tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
Below is the css code.
.iphone {
position: relative;
background: url(../../../../images/iphone-bg.png) no-repeat;
width: 100%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
.tablet {
position: relative;
background: url(../../../../images/tablet.jpg) no-repeat;
width: 200%;
height: 100%;
padding-top: 58%;
border-radius: 1em;
float: none;
}
I tried different methods but nothing is working for me. Please tell me a way to load the views without toggling to the same html page.
Try this:
ng-class="tabletView ? 'tablet' : 'iphone'"
Default will be iphone. You don't need second iphoneView variable at all (if you have just these 2 views).
Try this?
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="iphoneView=true;tabletView=false"></a>
<a href ng-click="tabletView=true;iphoneView=false" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="{'iphone': iphoneView, 'tablet': tabletView}">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="iphoneView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
EDIT: according to karaxuna's answer, you can use just one variable
<div class="mobile-area">
<p>Mobile App</p>
<a class="mobile-icon current-device" href ng-click="tabletView=false"></a>
<a href ng-click="tabletView=true" class="tablet-icon"></a>
</div>
<div class="mobile-preview" ng-class="tabletView ? 'tablet' : 'iphone'">
<div class="mobile-wrapper">
<div class="mobile-simulator">
<me-iphone ng-show="!tabletView" tmp-url="{{appTemplateUrl}}"></me-iphone>
<me-tablet ng-show="tabletView" tmp-url="{{appTemplateUrl}}"></me-tablet>
</div>
</div>
</div>
I'm using the Angular-slider
http://ngmodules.org/modules/angular-slider.
Everything works with one exception - I cannot get the slider bar to conform to the margins.
My goal is to have the slider in the center of the page padded on each side with about 20% white space on each side.
<div style="text-align: center;">
....
<div style="margin: 40px 0 60px 0; font-size: 10pt;">
<div style="width:20px">
<a style="text-align: left; margin-left: 20%;margin-right: 20%">
<slider floor="0" ceiling="500" step="50" precision="2" ng-model="cost"></slider>
</a>
</div>
</div>
</div>
Not sure if it helps, but you can try to set:
position: relative;
left: 20%;
right: 20%;
I don't know why are you trying to do that and styling the <a> element, but from the code in Angular's page you should use something like this:
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
so, to adapt to your case:
<div class="container">
<ul>
<li ng-repeat="item in items">
<p>Name: </p>
<p>Cost: </p>
<slider floor="100" ceiling="1000" step="50" precision="2" ng-model="item.cost"></slider>
</li>
</ul>
</div>
Now, the CSS is as easy as this:
.container{text-align:center}
ul{width:60%; margin:20px auto} /* adjust vertical margins to your needs */
li{....}
Note that this example use a construction of UL and LI, but you can obviously replace it with DIV using the same logic. Not sure why you want an A, but try it out, maybe it works, I just don't understand teh need and probably need more information.