I have a tabbedpanel declared like so :
<%# taglib prefix="sj" uri="/struts-jquery-tags"%>
<sj:tabbedpanel id="mytabs2" selectedTab="0">
<sj:tab id="tab1" href="one.jsp" label="Tagged"/>
<sj:tab id="tab2" href="two.jsp" label="Search"/>
<sj:tab id="tab3" href="three.jsp" label="Add"/>
</sj:tabbedpanel>
I'm using the struts2 jquery plugin - http://code.google.com/p/struts2-jquery/
How can I resize and center the tab on screen ?
The tab should be 70% in width and appear in the center.
I've tried wrapping the tabbedpanel in a dev element and then using :
<style>
div { width:80%; text-align:center; }
</style>
But its not working too well. The width resizes but messes up my formatting within the tab elements. Is there another way ?
Thanks
Centering a div can be done by setting it's width to the desired value and setting margin to auto. Text-align only affects inline elements inside the div. (This is why your design gets messed up.)
div.yours { width: 70%; margin-left: auto; margin-right: auto }
div { width:80%; margin: 0 auto 0 auto}
Related
I have mat-toolbar, so here i want the scrolling on the page to happen after mat-toolbar. so that mat-toolbar remains as fixed header. So that even if i scroll down i see the toolbar.
<mat-toolbar style="flex: 0 0 128px;" color="primary">
<button mat-icon-button aria-label="Back" routerLink="/reports">
<mat-icon>arrow_back</mat-icon>
</button>
<mat-card-title>Upload Report</mat-card-title>
</mat-toolbar>
<div>
//other form elements
</div>
Wrapping the toolbar and the other content in a CSS grid - having 100% height - will work, making both a grid row where the toolbar has auto height and the other content has overflow:auto.
<div class="container">
<mat-toolbar>
<h1>
Fixed Angular Material toolbar
</h1>
</mat-toolbar>
<main>
<p>
This is the main content which is scrollable because the main content has 'overflow-y: auto' and is a grid row
with a height of 1fr (the container is a CSS grid). This only works when the container div has a height of 100%.
</p>
</main>
</div>
.container {
height: 100%;
display: grid;
grid-template-rows: auto 1fr; // mat-toolbar main
}
/* Grid row 1 */
mat-toolbar {
}
/* Grid row 2 */
main {
overflow-y: auto;
padding: 1rem;
}
Here is a working example: https://www.jitblox.com/design/MdTqMjv9Pr
I have an element that is fixed to the top of the page, and scrolls with you when you scroll horizontally.
But in ios width of menu are not a 100% width of viewport. Width of menu is a 900px.
What's a problem? I can set width with JS, but it not true way. At the android devices it's ok, and work great.
body
{
padding: 0;
margin: 0;
}
.menu
{
position:fixed;
width: 100%;
top: 0;
left: 0;
background-color: grey;
color: #fff;
}
.content800
{
width: 800px;
height: 200px;
background: green;
}
.content900
{
width: 900px;
height: 200px;
background: blue;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div class='menu'>Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2</div>
<div class="content800"></div>
<div class="content900"></div>
</body>
</html>
How can I set width of fixed menu by 100% of device screen?
Most likely because you are causing the page to overflow due to .content800 and .content900, when using responsive design you should avoid setting any 'fixed' widths that exceed the devices resolution in either portrait or landscape. You have the viewport set in the HTML but you don't have any media queries in your CSS.
You really need to make use of the media queries using something like this:
#media screen and (max-width: 63.9375em) {
.content800, .content900 {
width:100%;
}
}
You may need to change 63.9375em to your liking as its all small devices in both landscapes, portraits and also tablets in portrait mode. If that doesn't fix your problem then it'll something else that you have failed to attach, like the rest of your CSS or HTML.
What you could do is set right: 0; to .menu, to make sure the menu covers the whole screen width.
Is it possible to accomplish the following in jquery mobile?
I've got a grid
<div class="ui-grid-a" >
<div class="ui-block-a" >
navigationtree
</div>
<div class="ui-block-b">
datatable with 50+ rows
</div>
</div>
when the table has too much data a scrollbar should appear and
block-b should be scrollable where block-a should be sticky at all times
so that the navigation stays in place.
is it possible to accomplish such a behaviour in jquery mobile?
Because 2 grid blocks share a width of 50% each its easy to achieve by setting block a to a fixed position and block b to float right.
Demo
http://jsfiddle.net/59v0gy6w/
<div class="ui-block-a" style="position:fixed">
<div class="ui-block-b" style="float:right">
cytasos has given a good answer! if you actually want just the ui-block-b to be scrollable, you can do it this way:
First scale the ui-content div to fill the device/screen height:
function ScaleContentToDevice() {
scroll(0, 0);
var content = $.mobile.getScreenHeight() - $(".ui-header").outerHeight() - $(".ui-footer").outerHeight() - $(".ui-content").outerHeight() + $(".ui-content").height();
$(".ui-content").height(content);
}
$(document).on("pagecontainershow", function () {
ScaleContentToDevice();
});
$(window).on("resize orientationchange", function () {
ScaleContentToDevice();
});
Next set the grid height to 100% and the block-b div to 100% height and overflow in CSS:
.ui-grid-a {
height: 100%;
}
.ui-block-b {
height: 100%;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
DEMO
I am having trouble resizing a SVG to fit inside a jQuery Mobile page.
This should work on mobile devices and also in a normal browser.
Please see this example.
<div data-role="content">
<object type="image/svg+xml" data="http://simonamby.dk/wdhtest/img/A_0.svg?id=1"></object>
CSS:
#map .ui-content {
position : absolute;
top : 40px;
right : 0;
bottom : 30px;
left : 0;
}
Bonus: How do I get the fading animation to work in Internet Explorer? Only works in Chrome right now.
You just need to apply the CSS to the object tag:
#map-page object {
position:absolute;
top:0%;
left:0%;
width:100%;
height:100%;
}
Updated FIDDLE
I would like to use jQuery UI tabs but I need the tabs aligned right … That's "easy" since I can modify the tabs container class and extend it.
But the thing is I want to add a "title" on the left, as shown in this screenshot:
http://cl.ly/400D0E3z0f272h1B3x3R
How can I do it in a clean way ?
(A dirty way could be to prepend/append a div to the tabs tag, adding the DOM on the fly … I'm looking a cleaner way :)
Thank you in advance
First there is nothing dirty adding elements to the dom on the fly :-)
Secondly, you could simply add an element in the markup, for instance a <h3> (let's be semantic (and assume you got other titles before)):
<div id="tabs">
<h3 class="ui-tab-title">My Title</h3>
<ul>
<li>Nunc tincidunt</li>
<li>Proin dolor</li>
<li>Aenean lacinia</li>
</ul>
<div id="tabs-1">
...
</div>
and position it with css:
/* float tab buttons to right */
.ui-tabs .ui-tabs-nav li { float: right !important; }
/* position:relative on container will make the title position:absolute relative to the container */
#tabs { position: relative; }
/* absolute position the title */
.ui-tab-title { position: absolute; left: 20px; top: 15px; }
Here's a jsfiddle to illustrate
Edit:
As you pointed out, floating right the <li> inverts their order.
You could invert the order of the list items in the markup itself but this will mess up the whole logic.
Here's a piece of css to right align the tab button while keeping the markup and the visual order in place:
/* align right the <ul> container */
.ui-tabs .ui-tabs-nav { height: 2.35em; text-align: right; }
/* jquery ui css floats-left the <li> so un-float them */
.ui-tabs .ui-tabs-nav li { display: inline-block; float: none; }
I've changed the fiddle accordingly.