I want to disable the scroll bar in the semantic page (master) and add a scroll to the list in semantic:content only, so my goal is to prevent scroll in the header of the semantic page.
enableScrolling="false" doesn't exist in sap.f.semantic.semantic page
checking the API there is no parameter for disabling thescrollbar.
I would try something like this:
limit content: if <content> doesn't exceed the full height, no scrollbar will be visible (try sap.ui.table.Table with visibleRowCount)
scroll: add scroll container (ScrollContainer) to the content
Example for scroll:
<semantic:SemanticPage
class="noScroll"
id="mySemanticPage"
headerPinnable="false"
toggleHeaderOnTitleClick="false"
preserveHeaderStateOnScroll="true"
showFooter="{/showFooter}">
<!-- Content -->
<semantic:content>
<ScrollContainer
class="myContainer"
height="100%"
width="100%"
horizontal="true"
vertical="true"
focusable="true">
css:
.noScroll .sapFDynamicPageContent {
padding: 0;
height: 100%;
}
.noScroll .sapFDynamicPageContent > div {
padding: 0;
height: 100%;
}
Related
I make modal page that like a alert.
I want modal page height set dynamically
but modal height fixed and made to scroll.
this is my code.
global.scss
.custom-modal-alert .modal-wrapper{
width: 70%;
min-height: 178px;
--max-height:1000px;
height: auto;
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.3);
border-radius: 10px;
}
What can I do for this problem....
You can achieve this by swapping out the <ion-content> tag in your modal page.
<div class="modal-container">
<!-- modal contents go here -->
</div>
then add this style to your global sass file:
.custom-modal-alert .modal-wrapper .ion-page {
position: relative;
display: contents;
}
NB. This won't work with an ion-content tag in your page component. The rest of the styles you have should work
I am trying to make a responsive header/navigation form that has the following properties:
Has some type of label that is inline and vertically centered with the input box when the viewport is above a certain width.
At small viewport sizes, the label should center itself vertically above the input & button and the input/button combo should be 100% of the screen width.
Have a visually combined input and button, like the ones used in Bootstrap that won't split into separate lines
Either fill the width of the screen or be centered as the whole unit (header+input+button) when they're all on the same line
I have used this JS fiddle as a the starting point for the form to break the labels into a separate line on small widths and have successfully gotten it to work and for the label to center above the input at small viewports as well.
My code so far is
CSS
form > div {
clear: both;
overflow: hidden;
padding: 1px;
margin: 0 0 10px 0;
}
form > div > fieldset > div > div {
margin: 0 0 5px 0;
}
form > div > label,
legend {
width: 25%;
float: left;
padding-right: 10px;
text-align: right;
vertical-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 75%;
float: right;
}
form > div > fieldset label {
font-size: 90%;
}
fieldset {
border: 0;
padding: 0;
}
#media (max-width: 600px) {
form > div {
margin: 0 0 15px 0;
}
form > div > label,
legend {
width: 100%;
float: none;
margin: 0 0 5px 0;
text-align: center;
}
form > div > div,
form > div > fieldset > div {
width: 100%;
float: none;
}
input[type=text],
input[type=numeric],
textarea,
select {
width: 100%;
}
}
HTML
1st Attempt
<header class="page-header row center-block">
<div class="center-xs">
<form class="main-form input-group" action="/caulcuate" method="post">
<label for="number" class="control-label"><h1 class="h1">BIG Label Header</h1></label>
<input type="number" name="number" min="10" max="6856" step="1" id="number" class="main-input"
placeholder="number goes here" required autofocus>
<span class="input-group-btn">
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
</span>
</form>
</div>
</header>
Attempt 2
<header class="page-header">
<form action="#">
<div>
<label class="desc" id="title1" for="numberhere"><h1>BIG Label Header</h1></label>
<div>
<input type="number" name="numberhere" min="10" max="6856" step="1" id="numberhere" class="main-input"
placeholder="number goes here" required autofocus>
<!--<span class="input-group-btn">-->
<button id="calculate" class="btn btn-lg btn-primary" type="submit">
100?
</button>
<!--</span>-->
</div>
</div>
</form>
</header>
Specific problems I'm having
In Attempt 2, I commented out the <span> that Bootstrap uses to group the button and input field because it will otherwise always put the button on a separate line.
In both attempts, the header label is not vertically centered with respect to the input box. I had it centered in an earlier iteration of Attempt 1, but I can't seem to get it back.
Attempt 1 just isn't centered properly at any size where the header row isn't taking up the full screen width. Attempt 2 does center consistently but the label header is too far from the input box at large screen sizes, so it's only centered in that there is roughly equal whitespace between the page border and the contents of the header.
Ideas for solution
Currently, the HTML in Attempt 1 seems like it is closer to what I want in terms of the label header and the button both being smooshed right up against the input box. Attempt 2, however, actually is responsive at small screen sizes.
It seems that maybe if I nest enough <div>s and am clever with their classes, I'll eventually get something that works about right, but would probably be fragile.
The other solution I thought of is to create two separate <header>s and wrap them in a pair of <div>s and use a #media query to change between which <div> is visible. This seems less fragile than using a ton of nested tags but also requires some code duplication. However, it seems like it might be the simplest option so far.
Somewhat related to switching between which <div> to display depending on the screensize, I suppose there probably is some jQuery way to do this and maybe CSS is currently the wrong tool for the heavy lifting in this case.
P.S. I wish I knew more about vector illustration so I could give an example of exactly what I'd want without all the descriptive text.
I am using percentage to define the width of all elements. I am also hiding (display: none;) some elements only for handheld, including iphone.
html structure:
<header>
<!-- ... -->
</header>
<nav>
<!-- ... -->
</nav>
<div id="search">
<!-- ... -->
</div>
CSS:
* {
margin: 0;
padding: 0;
}
/* ... */
header {
width: 100%;
height: 80px;
/* ... */
}
/* ... */
nav {
float: left;
width: 76%;
height: 20px;
padding: 5px 2%;
}
#search {
float: right;
width: 16%;
height: 20px;
padding: 5px 2%;
}
#media only screen and (max-device-width: 480px), handheld {
/* ... */
header {
height: 50px;
}
nav {
width: 96%; /*plus padding 2% each = 100%*/
}
#search {
display: none;
}
}
So, I am hiding the search and increasing the nav to fill the space (100%). However, there is a small white space on the right side.
screen view:
iphone view:
Does anyone know how to remove the small white space in the iphone view?
The full code: http://jsfiddle.net/AWGk2/
Remove the padding from your NAV and SEARCH elements.
Make the width of your NAV element 80% and the width of your SEARCH element 20%.
Add a new DIV element inside your NAV and SEARCH elements and apply your padding to those elements. Don't bother specifying a width on these new inner elements.
In your media query section make the NAV width 100%.
I'd also consider adding to your viewport rule.
Here's the one I use myself:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I'm using jQuery UI "sortable" plugin to be able to select and sort items.
I set up the plugin to have two lists, one for "available" items, the second for "selected" items.
The plugin works as expected, I can move items from one list to the other.
However, when I remove one item from the list, the height of the list is lowered. Is there any way to fix it?
In fact, i'd like to set the outer border of both list to the initial height of the left items (at the beginning, all items are in the first list)
This picture describe what I want to do:
The red lines are what I'd like. I want both lists to have this size, fixed.
Here is my code (generated from an asp.net webpage actually) :
<script type="text/javascript">
$(function () {
$("#sourceItems").sortable({
connectWith: "#targetItems",
update: function (event, ui) {
$("#selectedUserIDs").val(
$("#targetItems").sortable('toArray')
);
},
placeholder: "ui-state-highlight"
});
$("#targetItems").sortable({
connectWith: "#sourceItems",
placeholder: "ui-state-highlight"
});
$("#sourceItems, #targetItems").disableSelection();
});
</script>
<style type="text/css">
#sourceItems, #targetItems { list-style-type: none; margin: 0; padding: 0; margin-right: 10px; background: #eee; padding: 5px; width: 230px; border:solid 1px black; }
#sourceItems li, #targetItems li { margin: 5px; padding: 5px; width: 200px; height: 12px; }
</style>
<div style="float: left; display: inline-block; width:fill-available">
<p>Available :</p>
<ul id="sourceItems" class="droptrue">
<li class="ui-state-default" id='i1'>item1</li>
<li class="ui-state-default" id='i32'>item2</li>
<li class="ui-state-default" id='i47'>item3</li>
<li class="ui-state-default" id='i46'>item4</li>
</ul>
</div>
<div style="float: left; display: inline-block;">
<p>Selected :</p>
<ul id="targetItems" class="droptrue">
</ul>
</div>
<div style="display: none">
<input name="selectedUserIDs" type="text" id="selectedUserIDs" />
</div>
The hidden input field is my container for storing selected items (posted with the form).
I've tried by adding .height($("#sourceItems).outerHeight()); to both lists, but this does not works.
I came here looking for a similar, but more generalized solution to the same problem. The solution here didn't help me, but I figured it out on my own and thought it might be helpful to share it.
I didn't want the two sortable lists to be fixed, I just wanted them to stay the same height. When you are dealing with a large number of items, having two dynamically sized boxes around the list can make it hard to work with, as the one box is so much smaller than the other. Making both boxes a fixed height is also less than optimal, as then you end up with scrollbars once your number of items in one list exceeds that height. I wanted both boxes to dynamically expand using the built-in functionality of the JQuery sortable, connectWith code, but I also wanted them to both just be set to the larger of the two. To do this I found that you can modify the padding on the lists, and that area will still be an interactable area for purposes of drag-and-drop.
So, to make two connectWith, sortable lists keep the same height, you can add the following handler for the over event:
over: function(event, ui) {
var heightDiff = $("#sourceItems").height() - $("#targetItems").height();
$("#sourceItems").css('padding-bottom', (Math.abs(heightDiff) - heightDiff) / 2 + 'px');
$("#targetItems").css('padding-bottom', (Math.abs(heightDiff) + heightDiff) / 2 + 'px');
}
Here's a fiddler example extending the other example with this event handler: http://jsfiddle.net/TLrn7/
Edit:
$(document).ready(function(){
$("#targetItems").height($("#sourceItems").height());
$("#sourceItems").height($("#sourceItems").height());
});
http://jsfiddle.net/JEY4U/1/
Old Answer:
Use a 'helper' function, which makes sure the dragged elements have proper width and height.
Something like this:
helper: function(event, ui) {
$(ui).width($(ui).width());
$(ui).height($(ui).height());
ui.children().each(function() {
$(this).width($(this).width());
});
return ui;
}
You use it like this:
$(SOME_OBJECT).sortable({
connectWith: ...,
placeholder: ...,
......
helper: function....
});
Of course you can write any costume helper function you'd like.
The jQuery UI list height is set to a specific height using CSS. Example for 300px height.
.ui-autocomplete {
max-height: 300px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
}
/* IE 6 doesn't support max-height
* we use height instead, but this forces the menu to always be this tall
*/
* html .ui-autocomplete {
height: 300px;
}
Read the documentation here: https://jqueryui.com/autocomplete/#maxheight
My footer is perfectly positioned on every computer screen.
But, when I test it on an Iphone, the footer get stuck in the middle of the page and is not repeating itself in a horizontal way.
What can I do, so the footer also stays on the bottom of an Iphone screen and other smartphones?
This is the CSS of my footer:
#footer {
position:absolute;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
Change the position to fixed, hope that can solve this question.
#footer {
position:fixed;
bottom:0;
width:100%;
height:270px;
background-image:url(images/footer.png);
}
First, I hope it's for a static page, as dynamic pages could give you even more troubles.
Anyway, it's not a good idea to put the footer at 0 to the bottom, if I had bigger fonts or small resolution (like using a notebook or a smartphone), the content will go below the footer, which is what probably happens to your page. There is a lot of code around the web answering that specific question. And it's called 'sticky footer'.
This is a copy/paste of that page. I hope no one get's offended, there's no need to rewrite it all if it's already out there. If you are not satisfied, just google 'Sticky footer':
How to use the CSS Sticky Footer on your website
Add the following lines of CSS to your stylesheet. The negative value for the margin in .wrapper is the same number as the height of .footer and .push. The negative margin should always equal to the full height of the footer (including any padding or borders you may add).
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.footer, .push {
height: 4em;
}
Follow this HTML structure. No content can be outside of the .wrapper and .footer div tags unless it is absolutely positioned with CSS. There should also be no content inside the .push div as it is a hidden element that "pushes" down the footer so it doesn't overlap anything.
<html>
<head>
<link rel="stylesheet" href="layout.css" ... />
</head>
<body>
<div class="wrapper">
<p>Your website content here.</p>
<div class="push"></div>
</div>
<div class="footer">
<p>Copyright (c) 2008</p>
</div>
</body>
</html>
EDIT: It has exactly the behavior I stated. If you zoom your page (Control + '+'), you'll see how the content goes below the footer.