I am trying to move the ion-tab-button a bit up putting position absolute, top -30px and overflow visible but none of this works. I tried already putting contain none on ion-tabs (a solution for a user here in stack overflow) and didnt work either.
PS1. Even if I try to create a new Ionic 4 project an implement this doesnt work.
PS2. I had success on Ionic 3
Can anyone help me please?
I could solve the issue by simply putting ion-tab-button elements outside ion-tab-bar and adding below css.
ion-tab-button{
position: absolute !important;
bottom: 0.5vh;
z-index: 999;
height: auto;
}
.tab-1 {
left: 5%;
}
.tab-2 {
left: 31%;
}
.tab-3 {
left: 54%;
}
.tab-4 {
left: 79%;
}
Thanks
You can not do it simply by just updating CSS because Ionic provides web component.
Ionic web components base a lot of their styles on the values of CSS4 variables, we can change the values of those variables to modify the internal styling of the web component only.
Please read this article :
https://www.joshmorony.com/shadow-dom-usage-in-ionic-web-components/
you can make changes into below css variables:
-padding-top: -30px;
--padding-bottom: 6px;
--padding-start: 0px;
on Ionic 5 we need to manipulate de shadow DOM...
I put my solution in this post:
https://stackoverflow.com/a/63301631/4320596
Related
Im currently in the process of creating a legal document automation program for the company i work for, however i have run into one issue on possibly one the last step of completing this web app.
I am using the default angular Dashboard layout and set-up, as you can see below.
The document in the dashboard scrolls a little as it is a full document, however it only prints one page worth of the scrollable content. as shown below.
I can show code if any one thinks it will help however in terms of printing using angular and components i haven't found anything yet, so it's all based around window.print() currently with a lot of CSS changes to get it to look right.
I will however show the css code here(its a bit overkill with me trying to figure out how to accomplish this):
#media print{
.documentView{
position: fixed;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
margin-top: 20px;
margin-bottom: 20px;
width: 100%;
overflow: visible !important;
z-index: 10;
display: block;
width: auto;
height: auto;
overflow: visible;
}}
if anyone has done something like this before or has any tips regarding this, would be much appreciated.
You can try this css property :
https://developer.mozilla.org/fr/docs/Web/CSS/break-inside[break-inside][1]
I created a starry night animation but was wondering if anyone had a better way to place divs "randomly" with only CSS ??? Also, I'm having difficulty with responsiveness as well. Thank you for your time! just trying to learn.
check the complete code at http://codepen.io/anon/pen/MeeYWO?editors=1100
#star-bl:nth-of-type(5) {
left: -350px;
top: 225px;
}
#star-bl:nth-of-type(6) {
left: 750px;
top: 250px;
}
#star-bl:nth-of-type(7) {
left: -450px;
}
#star-sm:nth-of-type(8) {
left: -225px;
}
#star-sm:nth-of-type(9) {
left: 500px;
}
#star-sm:nth-of-type(10) {
left: -100px;
}
It's not possible in pure CSS at the moment (I'm hoping for calc(rand) to become a thing). The solution you are using is as good as any, you may want to consider using percentages if you want the stars to cluster on a smaller screen type.
Unfortunately that is not possible at the moment in CSS.
However, if you would be willing to change from CSS to LESS, you could give your stars random values. It's possible to insert JavaScript into LESS by wrapping the JavaScript expression with back-ticks as shown in this post.
Here's an example for giving your div #star-bl a random left value from 1 to 100.
#star-bl {
#random-margin: `Math.random() * 100`;
left: #random-margin * 1px;
}
You would still need to give every star a separate block inside the LESS file, but it would give your stars different positions every time you visit the page.
Here's a link to a guide for using LESS.
Not with vanila CSS but you can use a CSS pre-processor such as Less or Sass to generate random numbers for you at compile time.
Here's how you could do it in Sass using its random instance method.
#import compass
body
background: black
.star
width: 10px
height: 10px
position: absolute
font-size: 10px
color: white
#for $i from 1 through 500
.star:nth-child(#{$i})
top: random(1000) + px
left: random(1000) + px
DEMO: http://codepen.io/moob/pen/dXXGdy
I'm creating this site using the dazzling theme and everything seems to work fine except the header.
Have added these code lines to my css and it works fine for the homepage as you can see.
position: fixed;
z-index: 99;
width: 100%;
However, when you visit any other page or blog post, the header is messed up. Can you please provide a solution.
Another problem is, on the home page carousal, I need to add a few more lines to the blog excerpt (Art brings faith to life. This blog....). Can it be done via CSS?
Solved both the problems:
Adding a single line top:0; did the trick. Thanks to the community for helping out.
It seems, the problem was with the default WP excerpt which is 55. Used a single function in the functions.php file which did the trick. Have mentioned it below if it might be a help for others.
/* New excerpt length of 120 words*/
function my_excerpt_length($length) {
return 70;
}
add_filter('excerpt_length', 'my_excerpt_length');
You can change the 70 to anything you like :)
For your first problem The menu having the problem because you set margin-top for your content id.
Keep this as it is if you need to have, make change in you css
style.css line 612
you have to
.navbar.navbar-default
{
leave other css as it is and change only
position: fixed;
top: 0; /* This one you miss*/
and remove margin
}
For second thing you can increase the width or give height to your blog excerpt div.
in flexslider.css at line 98
just add top:0 in this css rule .navbar.navbar-default
.
navbar.navbar-default {
background-color: #fff;
border-bottom: 1px solid #eee;
font-weight: 200;
margin-bottom: 0;
margin-top: -2px;
position: fixed;
top: 0;
width: 100%;
z-index: 99;
}
Just like the Title says, "How to use text as a background instead of an image?"
I'm making a little application, that I personally think is cool but will probably be a waste of peoples time, and am altering the button in the drop down button to an upside down triangle using this html code ▼ . I'm not talking about setting the z-index or anything just simply placing a character for the little arrow. I thought about leaving it blank but I don't think users would understand that they are supposed to use the menu if I did so. Therefore I'm going to use the upside down triangle.
My CSS for the drop-down list is set up like this
select {
border: none;
overflow: hidden;
background: no-repeat right #ffffff;
-moz-appearance: none;
-webkit-appearance: none;
text-indent: 0.01px;
text-overflow: '';
}
Put the text inside an HTML tag with class .text-background, set CSS styles to
.text-background {
position: absolute;
z-index: 1;
}
and set z-index to the elements you want to be on top of the text with z-index higher than 1.
edit:
If you know what the size of the select element is, you probably want to position that text over the dropdown. This however will block the button.
JSFiddle
If you want better looks and functionality you can use a 3rd party libraries such as this or this.
edit 2:
I just found this CSS only solution given by Danield that's probably going to suite your needs better.
https://stackoverflow.com/a/13968900/1419575
Try This, as suggested by Paulo Bergantino:
JS Fiddle
Click Here
HTML
<div id="container">
<div id="background">
Text to have as background
</div>
Normal contents
</div>
CSS
#container{
position: relative;
}
#background{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
overflow: hidden;
}
I have a control that I am trying to highlight when it is selected. I'm achieving this using padding on a div and some positioning so that it surrounds the control. The problem I'm encountering is that the padding on the highlighter div renders differently in chrome and in firefox. Everything I've read says that they render the same so this shouldn't be a problem.
Chrome:
Firefox:
Here's a fiddle that has the problem on it:
http://jsfiddle.net/5fuGB/1/
.control{
position: absolute;
width: 100px;
height: 20px;
top: 30px;
left: 300px;
z-index: 1;
}
.highlighter{
background-color: orange;
position: absolute;
width: 100%;
height:100%;
left: -2px;
top: -2px;
padding-right: 8px;
padding-bottom: 10px;
z-index: -1;
}
input{
width: 100%;
height: 100%;
}
My Chrome Version:
Version 31.0.1650.63 m on Windows 7
My Firefox Version:
25.0 on Windows 7
Thanks for any help you guys can offer.
I believe the difference you are seeing is a difference which comes from the user agent stylesheet, browsers have their own default stylesheets which they use to render things like input elements. In your case it is probably a difference in the padding applied to the input element. You should specifically set eg: padding: 0px; or padding: 1px; on the input element, and then work out how to get it to look right for an input with the specified fixed padding. This will then override the styles set by the user agent style sheet.
Update
I moved to my Windows PC to have a go at fixing it. One way to fix this using one of the vendor specific prefixes from the answer linked in the comments is to add -moz-padding-end: 6px; to .highlighter to compensate for the differences in padding between browsers.
Here's a jsFiddle which fixes your issue, a footnote tho, I can already tell you that this probably won't fix it on Chrome for OSX, which was also rendering things the Firefox way.
Another way to fix this is by adding -moz-padding-start: 1px; -moz-padding-end: 1px; to input, but doing so somehow changes the bottom padding as well, which makes things look not as pretty in Firefox as with the other fix.
I'd go about it differently. Instead of using an extra div, I'd recommend using a combination of border-color and box-shadow on the input's :focus state to achieve the effect you're going for.
Check out this modified fiddle: http://jsfiddle.net/5fuGB/2/
Just experienced the same issue with my code, and fixed it too. The trick is if you use display: inline-block then line-height makes sense. Try it when debugging your code.
You're doing a little more than what's necessary. To get a highlight around that input you can use :focus
So it would be something like this:
CSS
input {
border: 1px solid white;
}
input:focus {
border: 1px solid orange;
}
That will give the input a white "invisible" border so it doesn't move the input when you click into it. It will simply change the border color to orange to get that highlight effect you're looking for.
EDIT
Just saw your comment. I dont have the rep to comment so I'll just add on to this.
If you aren't using the inputs as actual inputs, then I would just make them divs. Inputs render differently by default so that would mess with consistency across browsers.
I'd also recommend experimenting with those divs within one another and making the most outside div relative.
Outside Div <------ position:relative;
Middle Div <------- position: absolute;
Inner div <-------- position: absolute;
Also, if you need a selected state but don't want or are hindered by inputs then I'd recommend jQuery for modifying the css based on user interaction.