I'm trying to build an application with Quasar Framework.
I want to have 2 QRouteTabs in the QToolbar that is located inside QLayoutHeader. I have this code:
<template>
<q-layout view="lHh Lpr lFf">
<q-layout-header>
<q-toolbar color="primary" :inverted="$q.theme === 'ios'">
<q-tabs>
<div class="row">
<q-route-tab default="true" to="/" label="Найду еду"/>
<q-route-tab to="/contacts" label="Контакты"/>
</div>
</q-tabs>
</q-toolbar>
</q-layout-header>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
This is what I get:
As you see, there is an empty space above the QTabs. I want to get rid of it. How can I do this?
The proper way to do what you want is to remove the surrounding div and add slot="title" to the q-route-tab element.
This will stick the tab in the right place.
<q-tabs>
<q-route-tab slot="title" default="true" to="/" label="Найду еду"></q-route-tab>
<q-route-tab slot="title" to="/contacts" label="Контакты"></q-route-tab>
</q-tabs>
Codepen
I've looked at the page code in the browser and came up with the solution:
<style>
.q-tabs-head {
display: none;
}
</style>
Related
I'm currently developing an Angular 4 web application using Bootstrap 3 in which i have several text and select inputs. Select inputs are not a problem, they're working correctly, but in text input fields i have a problem with placeholders.
My input code is like this (just a standard input):
<input type="text" class="form-control" placeholder="Email">
I can see it as it's supposed to be in Chrome/Firefox in desktop and several Android devices with different versions, but in iOS 11+ devices (iPhone 6S,8,8 Plus,X) with different browsers it looks like the image:
If i remove the "form-control" class from the email field it looks like this image:
Does anybody knows a solution which doesn't involve removing "form-control" and changes styles in all text input fields in my app or change the webkit placeholder css position (as this solution could make the web style change in several browsers and not just in Safari)?
I can't see imgur pictures (corporate proxy), but if the vertical align of an input is your issue, the solution is using the line-height property. You can either fix the value, or get the height of the input and set the value dynamically.
Here is an example with a rather large input.
input.form-control {
margin: 24px;
width: 200px;
height: 100px;
line-height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<input type="text" class="form-control" placeholder="Email">
I am at: https://elements.polymer-project.org/elements/paper-dialog-behavior?active=Polymer.PaperDialogBehavior
and decided to create a dialog by doing something like:
<dom-module id="sample-dialog">
<template>
<paper-dialog-impl>
<h2>{{title}}</h2>
<div>
<content></content>
</div>
<div class="buttons">
<paper-button dialog-dismiss on-tap="cancel">Cancel</paper-button>
<paper-button dialog-confirm on-tap="submit">Accept</paper-button>
</div>
</paper-dialog-impl>
</template>
</dom-module>
it renders to the screen, but has no styles. I read: paper-dialog-shared-styles.html provide styles for a header, content area, and an action area for buttons but i don't know how to implement it. I was trying to use a link tag but that wasn't working. Specifically I tried inside the template: <link rel="import" href="polymer_elements/src/paper-dialog-behavior/paper-dialog-shared-styles.html" />
In my dart file, i imported these too, thinking it woudl be resolved.
import 'package:polymer_elements/paper_button.dart';
import 'package:polymer_elements/paper_dialog_behavior.dart';
Edit: Right now, I have the class Implementation extending Polymer Element, which makes sense. I just wasnt sure if it needed to extend something else as well.
Edit 2: Updated this to be a standard paper-dialog instead, except now it wont render the item at all, even after updating the import in the dart backend.
After updating it to a paper dialog, there is a property that needs to be applied to the paper-dialog for it to be visible or not. that is the opened attribute.
Adding that to the inner paper-dialog makes it visible.
So, therefore, passing it down to the paper dialog by way of an outer opened, will make it toggle open/closed.
//in the sample-dialog dart
#property bool opened = false;
in the markup:
<paper-dialog opened$="{{opened}}" ...>
then now i can say either:
<sample-dialog></sample-dialog>
<sample-dialog opened></sample-dialog>
http://view.jquerymobile.com/1.4.0/demos/controlgroup/#Textinputs
I followed the above link from jquery mobile. It doesn't work as expected !
Can someone help
Try setting the height too:
<div data-role="controlgroup" data-type="horizontal">
<input type="text" id="search-control-group" data-wrapper-class="controlgroup-textinput ui-btn">
<button>Submit</button>
</div>
.controlgroup-textinput{
height: 20px;
padding-top:.22em;
padding-bottom:.22em;
}
DEMO
To anyone having the same issue after using the code from the jquerymobile demos!
If you copy html or css content from the demos page, make sure to remove all leading whitespaces (indentation) first and add your own!
The demos page uses some other invisible non breakable spaces that prevent proper css parsing in most browsers!
I had the same issue and when looking into the css parsed by chrome it was marking
" padding-top: .22em;"
as invalid css, because of those non breakable spaces.
Say I have a custom component with
<head>
<link rel="stylesheet" src="...">
</head>
<body>
<element name="elem">
<template>
<ul class="foo">
...
where the referenced style sheet has an entry
ul .foo {
list-style-type: none;
}
The problem is that I can't get the style to apply to the ul. Nothing I tried works unless I put style attribute on the ul element itself. I have tried putting under with scoped attribute and that doesn't work either. It does a weird thing where the class of the ul becomes "elem_foo".
Thanks for the question! Here's how I do it:
In my main HTML:
<div is="x-click-counter">
In my custom element:
<element name="x-click-counter" constructor="CounterComponent" extends="div">
<template>
<button class="button1" on-click="increment()">Click me</button><br />
<span>(click count: {{count}})</span>
<style scoped>
div[is=x-click-counter] span {
color: red;
}
</style>
</template>
<script type="application/dart" src="xclickcounter.dart"></script>
</element>
There are two things going on here.
1) I use the form of <div is="x-foo"> instead of <x-foo>. I like how the first form is more backwards compatible, and it's more explicit with how I will find the element.
2) I put a <style scoped> inside my <template> tag.
Web UI will see the scope style tag, and generate a CSS file for you. It looks like this:
/* Auto-generated from components style tags. */
/* DO NOT EDIT. */
/* ====================================================
Component x-click-counter stylesheet
==================================================== */
div[is=x-click-counter] span {
color: #f00;
}
Web UI also adds a link to this generated CSS file to your main HTML file.
I've been trying to get modal windows working on a new site for some time now. I first tried jqmodal and had no issues displaying the modals, but the close buttons never worked - or at least they worked on some pages but not on others. I put a great deal of effort into debugging and couldn't find the issue.
I recently tried out greybox to see if I had better luck, but ran into a very similar issue. The close button at the top-right works fine, but I can't make a button within the modal that acts as a close. I've tried:
onclick="parent.parent.GB_hide();"
and similar variants but they just load whatever href is set to within the modal. However, if I do:
onclick="top.window.location.href='www.google.com'; parent.parent.GB_hide();"
this will close the modal and open Google, as intended. What I can't figure out is why I can't make a button that will just plain close it.
I feel like I'm missing something pretty fundamental since I keep running into similar issues. Incidentally the site is written in ASP.NET MVC with jquery and I'm primarily testing on Firefox right now.
I also realize this question is a bit vague, so I appreciate any thoughts and can supply more info if requested. Thanks in advance!
Edit: I still have no idea how to proceed. Nick's ideas were well taken but I see no Javascript errors on the page with either Firebug or Venkman. As far as I can tell the window should be closing.
Why would the second 'onclick' event above work, but not the second?
If I read your issue right, you simply are having problems closing the modal dialog.
I just put together an example using jqModal:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script src="Scripts/tmp/jqModal.js" type="text/javascript"></script>
<style type="text/css">
.jqmWindow
{
display: none;
position: fixed;
top: 17%;
left: 50%;
margin-left: -300px;
width: 600px;
background-color: #EEE;
color: #333;
border: 1px solid black;
padding: 12px;
}
.jqmOverlay
{
background-color: #000;
}
.jqmWindow
{
position: absolute;
}
</style>
<script type="text/javascript">
$().ready(function() {
$('#dialog').jqm();
$('#jqmOpen').click(function() {
$('#dialog').jqmShow();
return false;
});
});
</script>
</head>
<body>
Open
<div class="jqmWindow" id="dialog">
Close
<input type="button" class="jqmClose" value="Close" id="jqmCloseBtn" name="jqmCloseBtn" />
Some text in the modal dialog
</div>
</body>
</html>
I have put both a hyperlink and a button just for example. It appears that jqModal needs/looks for the class to attach the close trigger.
EDIT:
I just tried your exact code from above and I didn't get a JavaScript error but also nothing happened, which is to be expected as my code does not know what GB_hide() is. So this got me thinking.
Is the button your clicking on like:
<input type="button" value="Close" id="Button1" name="Button1" onclick="parent.parent.GB_hide();" />
If so what is parent.parent.GB_hide()? Could GB_hide() be a function your are not implementing on this page.
Firebug shows me that parent.parent is the Window, so after putting:
<script type="text/javascript">
function GB_hide() {
alert('Close');
}
</script>
on the page I now get an alert displayed.
rather then using google give page url where you want to redirect
OnClientClick="top.window.location.href='http://localhost/yourpagename.aspx'; parent.parent.GB_hide();"
is the code to close and redirect jquery grey box on button click.