I have added a newsletter subscription box to my website, however it is not displaying properly. I would like to have the subscribe button displayed next to the box where you enter the email. I have added the following css:
#mc_embed_signup_scroll, #mc-submit {
display:inline-block;
}
However its not working.
http://www.skinmade.com.au/ (see footer)
Thanks in advance :)
Claire
The inputs themselves are styled display:block by the mail chimp css, which prevents them being rendered in the same line. Also the mc_embed_signup_scroll div that contains them doesn't have a set width, so if its auto-width isn't wide enough for the inputs to appear side by side, the button will wrap to the next line.
To get them on the same line, override the display setting of the input elements, and set a minimum width on the containing div to make sure they fit on one line:
#mc_embed_signup input.email,
#mc_embed_signup input.button {
display: inline !important;
}
#mc_embed_signup_scroll{
min-width: 350px;
}
http://jsfiddle.net/pfwfsq2z/1/
Related
I have a component that renders Tabs component from Material UI 5.0.0-beta.5
There is a case when I set this components display to none.
But, then I get this error -
Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.
I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).
Is there a way to fix this error or maybe a better way to do what I am trying to do?
You could try to use visibility: hidden instead
And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.
visibility: hidden;
width: 0;
height: 0;
And when you want to show it back:
visibility: visible;
width: 100%;
height: 100%;
Is it possible to change the width of a row? I have some rows with JSON data. It would be best to display them in a <pre> tag so that the user can view it naturally, but this seems to be impossible.
So now I'm wondering is it possible to remove the default overflow-x: hidden? And to just let the user scroll to the end of a row? Instead of the text just having 3 dots at the end, because there's a max-width.
In the data-grid css api they show the necessary classes which could be overridden, and at the end they say:
You can override the style of the component thanks to one of these customization points
...
So you could add the following style rule to override the default one :
.MuiDataGrid-root .MuiDataGrid-cell {
text-overflow: initial;
overflow-x: auto;
}
Is there any way to enable text selection on an Ionic webview?
Use case: We show the user a news article rendered using in the app using the standard WebView. We want to give the user the ability to copy a selection of text from the screen, by press and holding the screen to show the text selection options...however this action is not available.
When using the InAppBrowser to show the same content, the text is selectable. But for other reasons, the InAppBrowser is not suitable for our requirements.
Try by adding
body {
-webkit-user-select: auto !important;
.scroll {
-webkit-user-select: inherit;
}
}
to your CSS.
I have a button in AngularJS. It's in a row of other buttons. How can I show and hide this button but still have it use space? I tried using ng-show but then when the button is hidden it uses no space and all the other buttons around it move.
In your CSS, target the element like this:
.my-element.ng-hide {
display: block!important;
visibility: hidden;
}
(You might want inline-block or something else for the display, the important part is to override the none default value of ng-hide)
You can then use ng-show="showMyElement" as an attribute as per usual
Hi I have built a site using a font-icon from icomoon as image alternatives. Everything is fine however in ie7 they display with a text-decoration underline.
I have used a class to stop this when used in links which works in all browsers except ie7.
I put the icon in as a data icon in the 'a' and the text for links in a span. And class like so..
a.{
text-decoration:none;
}
span{
text-decoration:underline;
}
This is fine in every browser except ie7???
Even in <i> elements it adds a random underline, so again I added a style
i{
text-decoration:none;
}
Still no joy.
Any help would be greatly appreciated.
I don't know exactly what you think the a. selector would do.
I suggest you use a descendant selector:
a i {
text-decoration: none;
}