I have a Windows Phone app using HTML5 and Javascript.
I am using WinJS.Utilities.empty(); to clear the DIV element and then WinJS.UI.Pages.render(); to load pages in to the same DIV:
On one of the pages that is loaded in, I am trying to use a Pivot Control, I am using it declaritively like this:
<div id="MyAccountPivot" data-win-control="WinJS.UI.Pivot" data-win-options="{title: 'MyAccount'}">
<div data-win-control="WinJS.UI.PivotItem"
data-win-options="{ header: 'current' }">
<div id="current">
Lorum Ipsum...
</div>
</div>
</div>
When the page is loaded in, the Pivot control loads and renders, and the PivotItem headers render correctly. But when the content has been rendered, it is not visible. I have used the DOM explorer in Visual Studio to interrogate the markup and styling to find the issue. It appears that the container DIV elements for the PivotItem contents are out of place and are hidden behind the DIV that contains the PivotItem headers...
When I have tried using this markup in the parent page (rendered without using the WinJS.UI.Pages.render();) it works exactly as expected.
I have also tried creating the Pivot and its Items programmatically, but this produces the same results.
Any help would be greatly appreciated.
Getting me same issue while showing content without template, make some changes in css and it's works for me.
HTML
<div class="myPivot">
<div data-win-control="WinJS.UI.Pivot">
<div data-win-control="WinJS.UI.PivotItem" data-win-options="{ 'header': 'one' }">
-- item content---
</div>
</div>
</div>
CSS
.myPivot {
}
.myPivot div.win-pivot-item {
left:0px !important;
visibility: visible;
width:100%;
}
.myPivot .win-pivot .win-pivot-surface {
width: 100%;
position: fixed;
}
Related
Hi I have 3 divs inside my row class.
<div class="row">
<div class="col-3">some content</div>
<div class="col-9">
<div class="col-4">
<div class="col-12">
<div class="col-6">conetnt</div>
<div class="col-6">conetnt</div>
</div>
</div>
<div class="col-8"> content </div>
</div>
</div>
How can I modify this HTML so that, all the content inside floats right and auto adjust its width based on the content? Now the width is fixed, so even if the data in my 3rd div very little it still consumes loads of space. Any idea guys? bit newbie to CSS
Solution :
If your content is occupying space less than width of your bootstrap column. You better put it without bootstrap column classes and give it simply float:left to your content inside the simple div.
It will automatically be resized according to your content. You may need to give display:inline to your div to display that div inline.
Update :
You can use flexbox. display: flex to container and can use flex-direction attribute according to your need.
Reference :
First you need to study the behavior of bootstrap grid systems. This official bootstrap documentation is all about grid system of bootstrap (Latest version).
https://getbootstrap.com/docs/4.0/layout/grid/
It will help you to understand content management inside bootstrap rows and columns.
You can use float: right to move content on right and try using display: table
Have a look here: https://v4-alpha.getbootstrap.com/layout/grid/
I've implemented the ng-pageslide directive in my project. It works great in Chrome when I allow its default behavior and allow it to attach to the body tag. However, it causes layout issues in Firefox for a page that uses UI Bootstrap tabs. It basically shifts everything to the right.
The styles that ng-pageslide adds to the body tag are:
position: absolute; transition-duration: 0.5s; transition-property: top, bottom, left, right; right: 0px;
I've tried removing these manually when transition to a page that doesn't use pageslide, but that seems like a bad solution.
I've also tried using the ps-container attribute and structuring my HTML like this:
<div id="tasks">
<!-- table using ng-repeat -->
<pageslide ps-open="project.sidebar" ps-auto-close="true" ps-squeeze="true" ps-body-class="true" ps-container="tasks">
</div>
This HTML template is included by a ui-tabset using:
<uib-tabset justified="true">
<uib-tab ng-repeat="tab in project.tabs" active="tab.active" select="$state.go(tab.route)" disable="tab.disabled">
<uib-tab-heading>
<i class="fa fa-{{tab.icon}}"></i>
<span translate="{{tab.titleKey}}">{{tab.title}}</span>
</uib-tab-heading>
<div ng-include="tab.content" class="m-t-sm"></div>
</uib-tab>
</uib-tabset>
When I use this setup, I experience two issues:
The table is initially squished to the right side of the page.
When I open the page slider, it slides over 300px from the right and ends up covering my table, instead of squeezing it.
The panel that slides out seems to cut off its contents. I've noticed I can fix this by adding style="height: 100%" to the "tasks" element.
Screenshots:
What do I need to do to make ps-container work like adding pageslide to the body tag?
I am using Django CMS 3.0.3. I've written a cms plugin with 2 CMSPluginBase derived classes, one adds a slider to a placeholder and another one is for adding slides as children to the slider.
In live mode everything works fine, but when I am editing content, I can't use the slider. The reason is that django-cms is decorating the html code with additional elements like this:
<div class="slider">
<div class="cms_plugin cms_plugin-2" style="width: 0px; overflow: hidden; position: absolute; left: 0px; display: block;">
<!-- Slider Item -->
<div class="slider-item"> [MY SLIDER CONTENT] </div>
<!-- /Slider Item -->
</div>
</div>
I got the HTML/CSS/JS from somebody else and I would preferable not use another slider. What options do I have to work around this problem?
Is there a way in django-cms to switch off the wrapping of plugins in "content mode" only, but to have the placeholder <div> included in "structure mode"? That would not be super convenient, but a workaround that I can live with.
Is there something else, I could do? I don't want to touch the slider itself. It might get an update and then I'd have to adjust it to adjust the slider to my needs again.
django-cms is need to wrap your plugin with <div class="cms_plugin cms_plugin-2"> for relation with "structure mode". There are no other variants.
I want to create a simple website page that allows my users to flip through a few different sets of data (kind of like mini-pages) but without reloading the page. The data could all be preloaded or requested with Ajax for each selection.
I tried using Bootstrap to create Tabs, but the first screen would never disappear.
I'm not aware of any other way to do this, other than with complicated Javascript that sets visibility to invisible.
Are there any clean, convenient, HTML/CSS-only ways to go about this?
Below, are some prototype screenshots of what the page would look like, and how it changes with each sidebar selection.
You could do it without the use of JavaScript if you are willing to make the data sets change upon hovering the menu, instead of clicking it.
Here's a JSFiddle: http://jsfiddle.net/n8wF4/. It's quite ugly, but it works...
HTML:
<div class="menu">
<div class="menu-item-1">item 1
<div class="content data-set-1">Content 1</div>
</div>
<div class="menu-item-2">item 2
<div class="content data-set-2">Content 2</div>
</div>
<div class="menu-item-3">item 3
<div class="content data-set-3">Content 3</div>
</div>
</div>
CSS:
.menu {
position: relative;
}
.content {
display: none;
position: absolute;
right: 0;
top: 0;
}
.menu-item-1:hover .data-set-1,
.menu-item-2:hover .data-set-2,
.menu-item-3:hover .data-set-3 {
display: block;
}
no need to have complicated javascript.
Have a look at jquery ui tabs.
I believe you can't do the same thing in pure CSS. There are no click events in CSS.
I just finished a website, everything was working fine (what I thought)
Until I discover a huge BUG that couldn't fix:
I have a navigation BAR (png file) and added on it buttons (simple DIVs elements), When the page is openned 1st, all is fine, but if you scroll the page a bit, the buttons aren't working as they should.
Please check this link: (scroll the page a bit down and you'll notice that button aren't interacting anymore)
http://www.genius-solutions.net/GSIS/index.html
But if you move the cursor a bit above the buttons, you'll find them:
(HTML - JavaScript)
here the CSS part:
#btn {position:absolute;left:0px;top:0px;z-index:4;}
#btn1 {position:absolute;left:80px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn2 {position:absolute;left:230px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0.0;cursor:pointer;}
#btn3 {position:absolute;left:380px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn4 {position:absolute;left:530px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn5 {position:absolute;left:680px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#btn6 {position:absolute;left:830px;top:280px;width:140px;height:35px;background:#DDE6E3;opacity:0;cursor:pointer;}
#html, body {
background:#002a4c;
overflow:scroll;
width:1024px;
height:768px;
margin: 20px auto; /* center */ padding: 20px;
}
and here the HTML part:
<body >
<div id = 'applet' home='579' services='1437' solutions='1192' partners='100' aboutus='654' contacts='216'>
<div id='applet_t'>
<div id='btn'>
<div id='btn1'></div>
<div id='btn2'></div>
<div id='btn3'></div>
<div id='btn4'></div>
<div id='btn5'></div>
<div id='btn6'></div>
</div>
</div>
<div id='inf'></div>
</div>
</body>
Your issue lies in IMO very improper use of absolute positioning of your elements. As soon as you scroll the page the location of the actual "hit" placeholder moves with the page but not your background.
Test case: try to move your page up a little bit and you will be able to "click" above the actual buttons.
Unless you have a good reason for absolutely positioned element use static == default positioning for most of your elements.