I am not able to view font awosom icon in options. It will display when I select it but not displayed in options.
I have implement code as:
HTML
<select id="dropdownview" class="rounded ps-3 pe-2">
<option value="classic" id="classic"> Classic</option>
<option value="compact" id="compact"> Compact</option>
<option value="table" id="Table1"> Table</option>
</select>
CSS
#font-face {
font-family: "FontAwesome";
font-weight: 600;
font-style : normal;
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot");
src : url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.eot") format("embedded-opentype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2") format("woff2"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff") format("woff"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.ttf") format("truetype"),
url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.svg") format("svg");
}
#dropdownview {
font-family: FontAwesome;
}
Related
I am trying to change the font family of the placeholder of an <ion-input>.
In docs, there is no way to do it, since the only possible options for placeholders are --placeholder-color, --placeholder-font-style, --placeholder-font-weight and --placeholder-opacity.
This is the HTML:
<ion-input required
type="text"
maxlength="30"
placeholder="Your username">
</ion-input>
What I already tried without success:
ion-input::placeholder {
font-family: 'My-font', sans-serif;
--ion-font-family: 'My-font', sans-serif;
}
and I tried to replace the ::placeholder with ::-webkit-input-placeholder, :-ms-input-placeholder, :-moz-placeholder.
What I'd like to achieve:
ion-input {
--placeholder-font-family: 'My-font', sans-serif;
}
Placeholder font just inherits from the input font. If your input font and placeholder font can be the same, then just apply the css style to your input element.
ion-input {
--ion-font-family: 'My-font', sans-serif;
}
Been trying to change footer background but I cant get it right. I have a color for each tag but only the last tag is changed (blue - #0000ff) . How does one do styling in Ionic 4?
<template>
<ion-footer>
<ion-toolbar>
<ion-title v-if="loggedIn">
<a href="https://www.facebook.com/" target="_blank">
<ion-icon name="logo-facebook"></ion-icon>
</a>
<a href="https://www.instagram.com/" target="_blank">
<ion-icon name="logo-instagram"></ion-icon>
</a>
</ion-title>
</ion-toolbar>
</ion-footer>
</template>
<script>
export default {
name: "pageFooter",
computed: {
loggedIn() {
return this.$store.getters.loggedIn;
}
}
};
</script>
<style lang="scss">
ion-footer {
background-color: #ff0000;
ion-toolbar {
background-color: #00FF00;
ion-title {
background-color: #0000ff;
a {
font-size: 25px;
color: #000;
}
}
}
}
</style>
It has something to do with "shadow dom" concept which I dont fully undersrtand yet . This DOM structure for the footer.
Ionic 4 uses web components, so the way to style components in Ionic 4 is to use the CSS variables that Ionic provides.
In your case, set the --background property of the component:
ion-footer {
--background: #ff0000;
}
In Ionic 4, I know that for some things I'm supposed to use shadow dom, and modify components like this:
ion-button {
--ion-font-family: 'Montserrat', sans-serif;
--border-radius: 8px;
}
But what if I want to change the font weight of the button?
If you look at the css for the button, you'll see that there's no shadowdom css variable for weight like there is for padding or font-family:
.sc-ion-buttons-md-s ion-button {
--padding-top: 0;
--padding-bottom: 0;
--padding-start: 8px;
--padding-end: 8px;
--box-shadow: none;
height: 32px;
font-size: 14px;
font-weight: 500;
}
The only way I can do it as far as I can tell is to do inline styling like this:
<ion-button color="primary" fill="solid" shape="round">
<p class="ion-padding-horizontal" style="font-weight: 700;">Get Started</p>
</ion-button>
But now I feel like its 1996 all over again. What's a clean way to do this?
i added:
ion-button {
font-weight: 700;
}
to one of my random projects and it works as expected.
i then added the <p> </p> tags like you have in your example code inside my button with the text for the button and the font-weight no longer effected the text.
maybe remove the <p> </p> tags if you are using them then try again.
I have an Ionic 3 mobile app that I have developed, where I have form fields that I setup in a grid.
There are 3 columns that should appear side-by-side.
In most models it looks fine, but when I view it on an iPhone 5s or even on 6s, the fields do not appear side-by-side.
Instead, the input field drops a line and fills out 100% of the width, with the other columns at the top.
Here is my code:
<ion-grid fixed *ngIf="showPhone">
<ion-row class="edit-field">
<ion-col col-auto class="field-icon">
<ion-icon name="md-remove-circle"></ion-icon>
</ion-col>
<ion-col col-auto class="field-type">
<select name="phoneType" [(ngModel)]="phoneData.phone_type">
<option value="select"> -- Select -- </option>
<option value="home">home</option>
<option value="mobile">mobile</option>
<option value="business">business</option>
<option value="home fax">home fax</option>
<option value="work fax">work fax</option>
<option value="fax">fax</option>
</select>
</ion-col>
<ion-col class="field-input">
<input type="text"
[(ngModel)]="phoneData.phone_number"
(blur)="addPhone(phoneData)"
placeholder="Phone">
</ion-col>
</ion-row>
</ion-grid>
Howe can I make it so that it adapts when viewed on a smaller screen?
You can use media queries for fix it. Depending on the screen size you need to change the width.
ex:
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
//whatever in CSS.
}
If you Need to affect the CSS code only for IOS, You should check the platform in css.
Any queries please refer the link https://ionicframework.com/docs/theming/platform-specific-styles/
I am developing a webapp for ipad and have come across an issue using select option elements when moving divs with webkit-transform. Forgive the table layout but I'm trying to replicate the issue in the app as closely as possible.
Click on the green box and the panels move to the left and the select box is fine. Reload the page and click on the red box and the panels move to the left (using webkit-transform) and when you click on the select box, the list is displayed outside of the browser and the container box jumps.
Note that this is not an issue on the latest GA chrome builds.
<html>
<head>
<title>Select Testing</title>
<style>
.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}
</style>
<script type="text/javascript">
function leftBad() {
document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
document.getElementById("panels").className += ' leftGood';
}
</script>
</head>
<body>
<div id="moveBad" class="button" onclick="leftBad();"></div>
<div id="moveGood" class="button" onclick="leftGood()";></div>
<div id="panelContainer">
<div id="panels">
<table>
<tr>
<td>
<div id="page1" class="panel">
</div>
</td>
<td>
<div id="page2" class="panel">
<select>
<option value="volvo">
Volvo
</option>
<option value="saab">
Saab
</option>
<option value="mercedes">
Mercedes
</option>
<option value="audi">
Audi
</option>
</select>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Safari tries to be helpful when there's a select box partially out of view, if you see:
http://jsfiddle.net/H5J27/
The first example doesn't have -webkit-transform, but when you click on it, it will be displaced in order to reveal it fully.
Now, Safari apparently isn't aware that, once transformed, the select box is in full view. The engine still thinks it's partially obstructed and it will move the select box and it's parent container to a point where it thinks you can see it.
The workarounds are not very encouraging. I'm guessing you're doing this coupled with animation in order to enjoy the benefits of hardware acceleration, so I'd add an event listener and the end of the animation, remove the css transform and apply normal positioning. This will get complicated if you have to do it on several elements, but it's good enough for a one time thing.