I'm trying to adjust the gap between lines in an actionButton() rendered in a Shiny App, as illustrated below and per the MWE code at the bottom. How can the line spacing be adjusted?
Only for this action button and not throughout the entire App. I am not very familiar with HTML or CSS but if I recall there is a way to apply HTML/CSS formats to either all objects in an App or only to specified objects in the App: I am interested in applying this only to specified objects.
MWE code:
library(shiny)
ui <- fluidPage(
br(),
actionButton(
"add",
HTML("Add <br/> column"),
width = '80px',
style='padding:0px; font-size:100%')
)
server <- function(input,output,session)({})
shinyApp(ui, server)
You can override the default line-height css rules from shiny.
actionButton(
"add",
HTML("Add <br/> column"),
width = '80px',
style='padding:0px; font-size:100%; line-height:1;') // notice addition of 'line-height:1;'
)
/*this is default styling aplied by shiny*/
button {
color: #333;
background-color: #fff;
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
border: 1px solid #ccc;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
-webkit-appearance: button;
text-transform: none;
}
<button width="80px" style='padding:0px; font-size:100%; line-height:1;'>
Add <br/> column
</button>
Related
I am trying to add a CSS button to my code, but the background colour of the button is not changing.
Here is my CSS code for the button:
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
Here is the HTML code I currently have:
<div>
Click here
</div>
The background of the button remains the standard white colour no matter what I set the background-color to. This is the current button, but I would like to change the background.
This is exactly your code. How you can see it works.
I think in your project is another CSS which overwrites your background-color.
You can use the developer tools (F12) to check which part of your CSS is responsible for the background-color.
chrome dev tools (inspecting html)
chrome dev tools (inspecting css)
.button {
background-color: red;
border: solid;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
Override other css:
.button{
background: red! important
}
Either your CSS is being overridden by another class that you haven't showed us or your browser is caching the incorrect result. If you are using Chrome:
Right click your page and click "Inspect"
In Inspector there should be a "Network" tab listed. Click it.
Inside of that tab, there should be a checkbox for "Disable Cache". Check it
Refresh your page with this option checked.
If that doesn't work then it is likely being overridden somewhere.
Yes. There's nothing wrong with the code. Maybe you shouldn't have rendered your css properly or used the same class name for lot of elements. I've also tried it with your code. It's good.
.button {
background-color: blue;
border: 2px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline;
font-size: 16px;
-moz-appearance: button;
-webkit-appearance: button;
text-decoration: none;
}
<div>
Click here
</div>
I would like to be able to access my google form by simply pressing a button.
I have drawn a button and the hyperlink I would like to link it to is - https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform","https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform
Any help writing this code would be brilliant
Thank you
<form action="link-to-google-form" method="POST">
<input type="submit" value="Go" style="width:65%;height:40;" />
</form>
Change the width/height/other style options to your liking.
easily you can use (a) tag in css :
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform" >
Text to show in your link
</a>
and if you want your link seems like buttons you can use this code with styles:
<a style="display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px;color: #333;background-color: #fff;border-color: #ccc;" href="https://docs.google.com/forms/d/e/1FAIpQLSdupUHV2uO6q69BHXvPzE1DgJu32HYQ31zPdyZ5uflmOftXRw/viewform" >
Text to show in your link
</a>
Its better to copy <a> style content in to your css file.
If you want change color of button just change background-color and color in <a> style.
I've a select box with some options, I need to apply styles specific to select control option.
Styles I want apply are :
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
I've given class .taskpanel-select-control to my select control,
and added css
.taskpanel-select-control option{
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}
Css for my select control is:
border-radius: 3px;border: 1px solid #757575;-webkit-appearance:none; -moz-appearance:none; appearance: none; background: url(images/caret_down.svg) no-repeat;background-repeat: no-repeat;background-size:1em;background-position: 96%;min-width: 5em;height: 1.75em;padding-left: 0.5em;padding-right: 2em;
But these are not respected in the select options, is there any way to make this happen.
Image of Select Box
I figured out solution for this issue.
Applying css styles for select options is not possible in chrome, where as it is possible in firefox.
To make it work in both firefox and chrome I constructed select or drop down using ul and li.
Through which I could able to apply whatever styles I wanted to my select options which are nothing but list items (li).
Found one issue with this approach, auto suggestion are not coming in my constructed drop down where as it is by default behavior of normal html select box.
It should be as straightforward to apply styles to your <options> as to any other element:
.taskpanel-select-control option {
color: #333333;
font-size: 14px;
min-height: 2em;
padding: 0px 16px 0px 16px;
margin-top: 0.125em;
cursor: pointer;
}
p {
font-weight: bold;
}
<p><select> containing unstyled <option> elements:</p>
<select>
<option>Registration</option>
<option>Completion</option>
<option>State</option>
<option>Archive</option>
</select>
<p><select> containing styled <option> elements:</p>
<select class="taskpanel-select-control">
<option>Registration</option>
<option>Completion</option>
<option>State</option>
<option>Archive</option>
</select>
Having problem with extra padding on a <button> element in iOS safari browser.
The markup is like this, using font-awesome icons:
<button type="submit" class="btn-class">
<i class="fa fa-plus"></i>
</button>
This is the CSS for the class in the button element:
background: #000;
width: 25px;
height: 25px;
border-radius: 100%;
border: none;
color: #fff;
font-size: 1em;
line-height: 25px;
text-align: center;
On a computer with Chrome as the browser I get this output.
But when using iPhone iOS 8.1.2 and Safari there is a strange padding to the left of the plus sign:
Any ideas on what the problem is?
EDIT
here is a fiddle on the code.
http://jsfiddle.net/qpvat7xv/
Simply add padding: 0 to your <button> style:
button {
-webkit-appearance: button;
cursor: pointer;
font: inherit;
overflow: visible;
text-transform: none;
padding:0;
}
This will solve the bug with Button tag which creates the padding in iOS.
If you look at this example: http://bl.ocks.org/mbostock/4063269
When you mouseover the circle text, there is an html tooltip that pops up. Is there any way to disable this?
I thought using css would resolve the issue:
body {
font-family: Trebuchet, sans-serif;
color: black;
font-size: 14px;
font-weight: normal;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
but no luck.
The tooltip is shown by the browser based on the title attribute. If you remove the line of JavaScript that adds this, the tooltip will no longer appear.