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.
Related
I have a button with shape round as follows:
<ion-button expand="full" class="shadow-red" shape="round">Signup with</ion-button>
The class shadow-red is:
.shadow-red{
box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
border-radius: 5px;
}
And the result is:
So I tried many different ways to change the round shape but since it isn't a css class doing the following didn't work.
.round{
border-radius:5px!important;
}
I tried adding border-radius:5px!important; to ion-button class, button, .btn, and many other combinations but none of them worked.
I have also tried to add to variables.css the following lines and none of them worked:
--ion-button-round-border-radius: 5px;
--ion-button-border-radius: 5px;
--ion-border-radius: 5px;
--border-radius: 5px;
....
Don't use the shape attribute, now you can change the look of the button to your wishes. One thing to change is the expand attribute. If you set it to full, you remove the left and right borders (see in docs). And so you can't set or change the border-radius. Set it to block and you will still have a full-width button.
<ion-button expand="block" class="shadow-red">Signup with</ion-button>
Use the following CSS custom properties as described in the Ionic 4 docs.
.shadow-red{
--border-radius: 5px;
--box-shadow: 0px 14px 25px rgba(182, 30, 30, 0.59);
}
Result:
Following code worked for me. As per your need change the height and width value to meet your requirement.
<ion-button slot="end" shape = "round" style="height: 3rem; width : 3rem">
<ion-icon name="create-outline" slot="icon-only"></ion-icon>
</ion-button>
Posting here for future references.
If you want to change the ionic button radius we can use following css. it is working on expand="block" attribute
ion-button {
--border-radius: 20px;
border-radius: 20px;
}
But in ionic button, when we use expand="full" attribute it does not work. so to overcome this limitation we can use CSS Pseudo-elements.
to add a border radius to the bellow button
<ion-button fill="solid" type="submit" color="primary" expand="full" >Login</ion-button>
as bellow image we need to select the native element within the shadow DOM
we can use below Pseudo-elements selector
ion-button::part(native) {
--border-radius: 20px;
border-radius: 20px;
}
above will add the radius on the ionic button with expand="full" attribute
I am using a <textarea> with Ionic 3 but when I type in, only the first character is displayed, not the rest.
Only wait to display them is to close the keyboard, scroll the page and come back.
Here is my code:
//view
<textarea class="textarea" spellcheck="true" autoComplete="true" autocorrect="true" placeholder="Message" [(ngModel)]="message"></textarea>
//css
textarea.textarea {
width: 100%;
background-color: #fff;
border: 0.55px solid #c8c7cc;
border-radius: 5px;
padding: 4px 45px 4px 4px;
-webkit-appearance: none;
}
I guess it is a refreshing issue but don't know how to solve it.
Ionic has its own version of textarea called ion-textarea:
https://ionicframework.com/docs/api/components/input/Input/
It is normally used in the context of a list to structure the content:
<ion-list>
<ion-item>
<ion-textarea placeholder="Enter a description"></ion-textarea>
</ion-item>
</ion-list>
This should also avoid your input problem.
if you can use , use this code.
I think textarea doesn't work in ionic well.
I'm trying to figure out how a form like this is constructed/styled (CSS? Javascript?):
It can be found at the very bottom of http://www.masterdynamic.com/
I want to say it's made through some sort of Javascript library, but could be totally wrong. I tried inspecting with Chrome Dev Tools, but couldn't really get a clear idea. Not really sure where to start with styling something like this (or even what to search for, all efforts have brought me to normal forms).
Any and all help would be greatly appreciated.
Thank you!
Here is the HTML and CSS:
<input type="text" name="email" placeholder="Enter Email"
dir="auto" aria-label="Email " title="" autocomplete="off">
form input[type=text] {
width: 80%;
color: #b1aca1;
padding: 10px 10px 10px 0;
font-family: blenderthin,Verdana,sans-serif;
font-weight: lighter;
font-size: 3rem;
border: 0;
background-color: transparent;
outline: 0;
display: inline-block;
vertical-align: bottom;
}
I have a website (http://ukchina-trading.com/) with the following header:
HTML
<div class='leftImage'>
<img src='image/unionjack.png'>
</div>
<div class='title'>
<h1>J Plus Trading</h1>
<h2>Briding the gap between China and the UK</h2>
</div>
<div class='rightImage'>
<img src='image/chinawings.png'>
</div>
CSS
.title h1 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
font-size: 68px;
line-height: 65px;
padding-top: 60px;
margin-bottom: 80px;
}
.title h2 {
font-family: 'Droid Serif', Georgia, Times, serif;
text-align: center;
position:relative;
top:-88px;
left:3px;
font-size: 16px;
color: #FF3300;
}
.rightImage {
position:absolute;
right: 150px;
top: 2px;
}
.leftImage {
position:absolute;
left: 150px;
top: 2px;
}
When the website is view on a computer the header is fine, but when viewed on the iphone screen the images are pushed over the title, hiding it.
What is the best way to redo the header to stop this?
I'd suggest the best thing to do would be to bring the flags inside the 900px width of the website.
Keep them to the left and right of the "J Plus Trading" text but just use floats rather than absolute positioning.
your problem is the absolute positioning you are using, as this causes the images to be in the same position regardless of anything else on the page. instead of absolute try using float:left; and float:right on your left and right images, and this way the text will not be pushed over it. you may have to create extra containing divs with margins or padding so that the images are positioned how you want them
I'm using CSS to style the input buttons on my website, but on IOS devices the styling is replaced by Mac's default buttons. Is there a way to style buttons for iOS, or a way to maybe make a hyperlink that behaves like a submit button?
You may be looking for
-webkit-appearance: none;
Safari CSS notes on -webkit-appearance
Mozilla Developer Network's -moz-appearance
Please add this css code
input {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
I recently came across this problem myself.
<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->
Hope that helps.
Use the below css
input[type="submit"] {
font-size: 20px;
background: pink;
border: none;
padding: 10px 20px;
}
.flat-btn {
-webkit-appearance: none; /*For Chrome*/
-moz-appearance: none;/*For Mozilla*/
appearance: none;
border-radius: 0;
}
h2 {
margin: 25px 0 10px;
font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />
<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />
I had the same issue today using primefaces (primeng) and angular 7.
Add the following to your style.css
p-button {
-webkit-appearance: none !important;
}
i am also using a bit of bootstrap which has a reboot.css, that overrides it with (thats why i had to add !important)
button {
-webkit-appearance: button;
}
-webkit-appearance: none;
Note : use bootstrap to style a button.Its common for responsive.