I have this code. In android work very good, in IOS I can't change map.
<GridLayout class="page">
<GridLayout columns="*" rows="*,auto,auto">
<StackLayout col='0' row='0'>
<MapView class="map" (mapReady)="onMapReady1($event)" (markerSelect)="onMarkerSelect($event)"
(cameraChanged)="onCameraChanged($event)"></MapView>
</StackLayout>
<StackLayout class="input-field" col='0' row='0' style="margin-top: 10">
<GridLayout columns="*,*" rows="*">
<StackLayout col='0' row='0'>
<DropDown itemsTextAlignment="center" itemsPadding="10" title="Comune di:" hint="Comune di:"
[items]="citiess" (selectedIndexChanged)="onchangecity($event)" (opened)="onopen()"
(closed)="onclose()"
style="background-color: rgba(255, 255, 255, 0.918); border-color:slategray; padding: 3%;
font-size: 18; color: rgb(70, 70, 70); size: 14px; margin-left: 6%; margin-top: 0.7%; border-style: solid; text-align: center;">
</DropDown>
</StackLayout>
</GridLayout>
</StackLayout>
</GridLayout>
</GridLayout>
When I put DropDown outside GridLayout, I can change map, but I want to put over map a button that call dropdown.
Have you any idea please?
Your StackLayout is overlaying on the whole of MapView. In iOS all topmost views block events from propagating below. So only the topmost StackLayout after MapView receives your click/drag event even though you are not explicitly listening for it.
You can just have the DropDown element with exact width and height it needs to occupy and align it by using margins. This will prevent anything else overlaying on the MapView.
On a sidenote: If you just want to overlay other elements while keeping the bottom element interactable you can add isUserInteractionEnabled="false" to the overlay element.
Related
I used card component from ant ui, I changed the color of the background and text color in it, but the divider color inside the card is not changing, is there a way to change the color of the divider inside the card component?
here is the code for card
<div>
<Card
title={
<Title level={5} style={{ color: 'white' }}>
Avi-Todo - 1
</Title>}
bordered={false}
style={{ width: 600, margin: '10px 0px', background: '#292929', color: 'white' }}
extra={<Title level={5} style={{ color: 'white' }}>16-April-22 10:25 AM</Title>}>
<p>{this.props.ptodo}</p>
</Card>
</div>
here is how it looks
How to change the divider color inside that card component?
Create a css file and add the following
.ant-card-head {
border-bottom: 1px solid #f41d1d;
}
I am creating a chat UI interface in Nativescript and I almost have everything working, but I am having a few issues in iOS that I cannot figure out. Everything in Android works correctly.
Problem 1:
When I focus on the TextView and the keyboard opens up I cannot no longer scroll to the top of the chat. All the content seems to shift up (even without using IQKeyboardManager interestly enough).
Problem 2:
When I start typing in the TextView it instantly shifts to the bottom of the screen, hidden behind the keyboard and I cannot see what I am typing.
Here is a demo project I created on Playground that shows the problem. Playground Demo Project
Below is a GIF showing both of the issues.
Any help is appreciated. Thanks!
Problem 1:
This is because IQKeyboardManager hosts a ScrollView on top of the ViewController (Page) and RadListView has its own scrollable region. The solution would be adjusting the insets when keyboard is active.
The code below takes keyboard height and caches it in application object when its first shown.
import * as application from "#nativescript/core/application";
let observer = application.ios.addNotificationObserver(
UIKeyboardDidShowNotification,
notification => {
application.ios.removeNotificationObserver(
observer,
UIKeyboardDidShowNotification
);
(application as any)._keyboardHeight = notification.userInfo.valueForKey(
UIKeyboardFrameBeginUserInfoKey
).CGRectValue.size.height;
}
);
When text field is focused adjust the insets of list view
textFieldFocus() {
console.log("Focus on TextField");
(this
.radList as any)._originalContentInset = this.radList.ios.contentInset;
if ((application as any)._keyboardHeight) {
this.radList.ios.contentInset = UIEdgeInsetsMake(
(application as any)._keyboardHeight,
0,
0,
0
);
} else {
setTimeout(() => this.textFieldFocus(), 100);
}
}
Problem 2:
This is because the text view layouts itself when text is updated. Preventing that may keep the scroll position intact. The override below checks if the field is focused and ignores layout calls.
import { TextView } from "#nativescript/core/ui/text-view";
TextView.prototype.requestLayout = function() {
if (
!arguments[0] &&
this.nativeViewProtected &&
this.nativeViewProtected.isFirstResponder
) {
this.nativeViewProtected.setNeedsLayout();
IQKeyboardManager.sharedManager().reloadLayoutIfNeeded();
} else {
View.prototype.requestLayout.call(this);
}
};
Updated Playground
The above solution did not work for me. This might seems counter-intuitive, but actually the solution is to add a wrapping ScrollView around the main layout (in my case, the direct and only child of my Page).
Take the following example:
<GridLayout rows="*, auto" width="100%" height="100%">
<ScrollView row="0">
<StackLayout orientation="vertical">
<StackLayout *ngFor="let m of messages" [horizontalAlignment]="m.incoming ? 'left' : 'right'">
<Label class="message" [text]="m.message" [class.incoming]="m.incoming" textWrap="true"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
<GridLayout row="1" columns="*, auto" class="input-layout">
<TextView class="text-view" [(ngModel)]="message"></TextView>
<Button column="1" text="Send"></Button>
</GridLayout>
</GridLayout>
It will become:
<ScrollView>
<GridLayout rows="*, auto" width="100%" height="100%">
<ScrollView row="0">
<StackLayout orientation="vertical">
<StackLayout *ngFor="let m of messages" [horizontalAlignment]="m.incoming ? 'left' : 'right'">
<Label class="message" [text]="m.message" [class.incoming]="m.incoming" textWrap="true"></Label>
</StackLayout>
</StackLayout>
</ScrollView>
<GridLayout row="1" columns="*, auto" class="input-layout">
<TextView class="text-view" [(ngModel)]="message"></TextView>
<Button column="1" text="Send"></Button>
</GridLayout>
</GridLayout>
</ScrollView>
So yes, you will have a nested ScrollView, ListView or RadListView 🤷
Kudos to #beeman and his nativescript-chat-ui sample: https://github.com/beeman/nativescript-chat-ui/blob/master/src/app/messages/containers/message-detail/message-detail.component.html
so I'm using the Twitter Bootstrap plugin for Grails and I'm having trouble centering modals. When I remove the class="modal" part from the div that contains the modal, my centering function works properly, but when I put it back (which is necessary for it to have the functionality of a modal it gets stuck halfway off the page). Any help would be very nice :D
Here's my code:
<a style="position: relative; top: 2px;" data-toggle="modal" href="#myModal${instanceType.id}"
id="${instanceType.id}"> ${message} </a>
<div class="modal" style="background: black; overflow: hidden; top: 0px; left: 0px; display: none; border: 2px solid white; float: center; position: absolute"
id="myModal${instanceType.id}">
<div style="border:none" class="modal-header">
<a style="color:white;" class="close" data-dismiss="modal">X</a>
</div>
<iframe id="iFrame" style="border: none;"width=800px height=675px src="${action}/${instanceType.id}">
</iframe>
<div class="modal-body" style="background: black;"></div>
<div style="border:none; background: black;" class="modal-footer">
<a "="#" class="btn" data-dismiss="modal">Close</a>
</div>
</div>
<script>
jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}
$(myModal${instanceType.id}).css({
'width' : $(window).width()*.75,
'height' : $(window).height()*.75
})
$(myModal${instanceType.id}).center()
$('#modal-footer').append('${saveName}')
function submitFunction(){
$("iFrame").contents().find("#submit").click()
}
function changePre(){
$("iFrame").contents().find(".buttonNew").submit()
alert('hi')
}
</script>
If you're using the default modal styling centers the modal by absolute positioning. So when you customize a modal windows, and you change the size of it, you shall adjust relevant elements also. Like the modal-body and modal header and the .modal class.
And to answer your question, and if I got your question right, that is you were trying to position your modal VERTICALLY.
Open bootstrap.css , then find and edit .modal.fade.in
The default value is 50%. Try to play with it until you achieve your desired position. Increase it to move the modal to the bottom, decrease it and it will do the opposite.
Default modal size modal window positions Horizontal centre of the screen, once the modal customizes(width changes), need to position it with script.
sample script:
$('#myModal').modal({
backdrop: true,
keyboard: true
}).css({
width: '800',// custom width
'margin-left': function () {
return -($(this).width() / 2);
}
});
I am using jquery Mobile 1.0.
I have this html code.
<label for="slider" class="ui-hidden-accessible">
Input slider:
</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
Its rendering like this:
But I want to remove the red marked part. I want to show only slider part.
How can this be done?
If you just want to get rid of the up/down arrows, you can wrap the input in an element with a specified width/height and overflow : hidden:
$(".ui-slider-input").wrap($('<div />').css({
position : 'relative',
display : 'inline-block',
height : '36px',
width : '45px',
overflow : 'hidden'
}));
Or as Frederic Hamidi stated, you can just hide the element all together and only a slider will be visible.
Here is a demo of the above code: http://jsfiddle.net/EWQ6n/1/
Also you can hide the input element with CSS (which is nice because you don't have to time the execution of the CSS like you do with JS):
.ui-slider-input {
display : none !important;
}
Here is a demo using CSS: http://jsfiddle.net/EWQ6n/2/
Update
Instead of using the !important keyword, you can also make a more specific CSS rule so it is used over the jQuery Mobile classes. An example would be:
.ui-mobile .ui-page .ui-slider-input,
.ui-mobile .ui-dialog .ui-slider-input {
display : none;
}
input.ui-slider-input {
display: none;
}
You could hide the input control manually:
$("#yourPage").live("pageinit", function() {
$(".ui-slider-input").hide();
});
If you only want to get rid of the up/down arrow use type="text" data-type="range"
<input type="text" data-type="range" name="slider" id="#(Model.QuestionNo)_slider" value="25" min="0" max="100" />
I wanted to do this too, but I also wanted the space to go away. I accomplished this this way (I'm using a range slider):
<div data-role="rangeslider" data-mini="true" class="no-number">
<input type="range" name="Morn" id="Morn" data-mini="true" value="720" min="0" max="1439">
<input type="range" name="Night" id="Night" data-mini="true" value="10800" min="0" max="1439">
</div>
Notice I added the .no-number to the div.
Then in css:
/* Used to remove the number next to the slider.*/
.no-number .ui-slider-input
{
display : none;
width: 0px;
}
/* Used to remove the space where the number was. */
.no-number .ui-rangeslider-sliders
{
margin: 0 5px; !important
}
I'm doing this all as part of a bigger issue, which is that I'm trying to use a range slider for time instead of numbers, so I replaced those elements with a heading I can change with a function to display the time.
This may not be the perfect choice, but I didn't see where to get the space back anywhere, so I thought I would post it here.
When you do it using CSS approach, you may break the input filed of other. So adding the class="ui-hidden-accessible" class to the input to hide it.
Remove this class="ui-hidden-accessible" from label.
Your approach is correct. But you need to add class="ui-hidden-accessible" to input not on the label.
Your code should be like this:
<label for="slider">Input slider:</label>
<input type="range" name="slider" id="#(Model.QuestionNo)_slider"
value="25" min="0" max="100" class="ui-hidden-accessible"/>
Check this SAMPLE DEMO
<input type="range" name="slider_sodio" id="slider_sodio" value="0" min="0" max="3" step="1" class="ui-hidden-accessible" />
but look that anoy offset
.ui-slider-track {
margin: 0 15px 0 68px; ----> change to 10
}
You Can Remove Input Slider As Below :
input.ui-slider-input {
display: none;
width: 0;
}
.ui-slider-track {
margin: 0 15px 0 15px !important;
}
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}