In the below image I am getting a sprites-sheet? that is appearing in the background of my Like button? Any ideas on why this might be? You can see it live at http://MTGPeerTrader.com.
I have tried adding a style to disable this via:
background-image:none !important;
but it was without effect.
Ok I think I have it...
You have inline-style so, the <span style="height: .. px; width: .. px"> just before of the <iframe id="f3b93e80cc".. remove height and in your stylesheet #FaceBookGroupLink put margin-top: 68px;
I hope this help you...
Related
I would like to set my ion-select with 100% of width.
I have tried with css class like this:
.mySelect { width: 100% !important; }
But it is not working.
I did it.
For someone who wants the solution, here is the code:
.myCustomSelect{
max-width: 100% !important;
}
You must have to override the 'max-width' css property.
Increasing the specificity of the selector allows for doing it without the !important on it:
ion-select.myCustomSelect{
width: 100%;
max-width: 100%;
}
Which makes it a bit cleaner, since !important should be used as sparingly as possible, as noted in the Stack Overflow article here:
Should I avoid using !important in CSS?
You don't need !important at all! Ionic has specified a min-width of 45% (or whatever as per your version of ionic). All you have to do is over-ride it with a max-width of 100%. At the same time, the select, being an inline element, will only expand to fit its contents. So it won't fill the whole width. So to make this happen, you simply add width: 100% to it. So your final CSS class may look something like this:
.full-width-select {
width: 100%;
max-width: 100%;
}
I try the each solutions but found a perfect way to do this :)
just modify your sass file by adding this
ion-select{
max-width: 70% !important;// your choice :)
}
The answer from Luis Antonio Pestana is good if you associate it with the code of his initial question. So to be more clear, the complete code to get the ion-select to take 100% of its container is :
.your_ion_select {
max-width: 100% !important;
width: 100% !important;
}
This is what helped me. After perusing multiple articles, I've found in this stack overflow article ~ Styling ion-select with popover interface, that if you open the developer tools and use the inspect tool, you can see the class that directly affects the select option.
So now that we know that the classes are .alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md we can then add adjust this in our global.scss file
Like so
:root{
.alert-wrapper.ion-overlay-wrapper.sc-ion-alert-md{
max-width: 100% !important;
width: 100% !important;
}
I'm currently working with Ionicv4 and above, however I'm assuming this should still be of assistance
I am having a problem with my website ( based on Blogger). There are vertical scrollbars appearing eventhough there they are not needed and they don't even move up or down. Can you please help me figure out what is causing them to appear ?!
this is my website url to check it : http://gsalafi.blogspot.com/p/ar.html
and this is my blogger template code : http://pastebin.com/V9j9mu8J
Please tell me if you note any errors in the code.
You have to edit your css, or perhaps replace your <body></body> with <body style="overflow: hidden; width:1024px; margin:0px auto 0px auto;"></body>.
Remember:
overflow-x: hidden;
Would hide any horizontal overflow, and insuring any horizontal scroll bars disappear.
overflow-y: hidden;
Would hide any vertical overflow, and insuring any vertical scroll bars disappear.
overflow: hidden;
Would remove both scroll bars, and all overflow content.
Does anybody know how to change the size of the fonts appearing in tags of the tag-it plug in? I went over the stylesheet but it does not seam obvious to me how to do it.
It is in the color specifc css file, tagit-stylish-yellow.css for example.
Look for
ul.tagit { cursor: text; font-size: 14px; color: #333; }
and change the font-size.
I found this by going to the demo site in Chrome, start the inspector by pressing F12, selecting the tag and looking at the css directives that affect it.
I used the below code to get the Like button of Facebook. Now the things is, I would like to change the size of the Like button that is rendered.
I tried the width attribute which not not working at all. And I tried to override the CSS class that's used for the below code by facebook. But overriding the CSS class is also not working as well.
So tell me how can I increase the height and width of the Like button.
<div class="fb-like" data-href="http://www.xxxxx.com" data-send="true" data-width="450" data-show-faces="true"></div>
Or you could target the iframe with CSS and scale it by using CSS3. Something like this:
#fbiframe
{
transform: scale(1.5);
-ms-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-moz-transform: scale(1.5);
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left;
-moz-transform-origin: top left;
-webkit-transform-origin: top left;
}
Here's an example http://www.tinydesign.co.uk/like/
Facebook Like buttons are rendered in an iFrame by the Javascript snipped they provide, that iFrame is hosted by Facebook and the styles cannot be overridden.
Quite rightly so.... If you were able to change the size or style of a Like Button then we would see HUGE, bright red, flashing like buttons all over the internet - that would be awful. They're designed to be discreet, recognisable and non-obtrusive.
You can't change the style of this kind of Facebook buttons, but you can create your own ones if you use the JavaScript OpenGraph SDK, in this way you can use a div (with custom information) or use an image, basically customize it however you want it. The downside is that is not as straight forward as using the Facebook generated buttons, and that you require an App Id and that the user gives you some permissions, but aside of that you can use them as you please.
Create div class for iframe
<div class='like-btn'>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=105&layout=button_count&action=like&show_faces=false&share=false&height=35&appId=422608707941592" width="105" height="35" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true"></iframe>
</div>
now add this CSS
.like-btn iframe{margin:0 auto;float;none;border-radius:3px;display:block;max-width:105px;padding-top:2px;padding-left:2px;box-shadow:2px 2px 0px #222;height:35px;border:6px solid #3D58A4 !important;background: #3D58A4}
Result:
Facebook Like Demo
If you don't want button at center, you can use float insteed of margin
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}