I tried couple of work arounds to change the height of streamlit sidebar using css. One of my approach is the code below but yet it does not solve my problem. I found some suggested approaches in streamlit discussion forum and those didn't help either. Can some one help?.
import streamlit as st
st.markdown(
"""
<style>
[data-testid="stSidebar"][aria-expanded="true"] > div:first-child {
height: 80% ;
}
[data-testid="stSidebar"][aria-expanded="false"] > div:first-child {
height: 80%
}
</style>
""",
unsafe_allow_html=True,
)
st.sidebar.markdown("Adjust sidebar height")
Try this code to see if it solves your problem. I think it should. You have to pay close attention to the classes by using dev tools.
Note: by adding !important to your css rule will overwrite the default css. I think with this you should be good to go.
import streamlit as st
st.markdown("""
<style>
section[data-testid="stSidebar"][aria-expanded="true"]{
height: 80% !important;
}
section[data-testid="stSidebar"][aria-expanded="false"]{
height: 80% !important;
}
</style>""", unsafe_allow_html=True)
st.sidebar.markdown("Adjust sidebar height")
output:
Related
I'm new here and just started learning CSS. This is my first (question)post and maybe the format of my (question)post might not be appropriate.In that case I humbley ask your forgiveness. I'm not very successful in applying/editting css for my site.
I'm trying to center (image)content in the #media only screen and (max-width: 420px)viewport. Searched,found and tried a few solutions for this issue as mentioned in this forum but to no avail. One of the problems is that my wordpress 6.x theme has a load of different style sheets and i have no clue in which order they operate.
This is what i found browsing the style sheets; Beneath each code is the name of the css source file it came from. Can someone please point out which file i should edit and what code i should alter or apply?
If needed i can give access to my site (which is local only atm) or post screenshots!
*source: responsive.min.css :
#media only screen and (max-width:420px){body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,body.boxed.has_general_padding .wrapper .wrapper_inner,body.boxed footer,body.boxed .header_inner,body.boxed .full_width .parallax_content,body.boxed .carousel-inner,body.boxed .content_wrapper{width:320px}.header_bottom,footer .container_inner,nav.content_menu{padding:0 15px}.side_menu .close_side_menu_holder{right:12px}.pp_content{height:250px!important}.pp_hoverContainer{height:200px!important}nav.content_menu .nav_select_menu{border:0}
*source: responsive.css
#media only screen and (max-width: 420px){
body.boxed:not(.has_general_padding) .wrapper .wrapper_inner,
body.boxed.has_general_padding .wrapper .wrapper_inner,
body.boxed footer,
body.boxed .header_inner,
body.boxed .full_width .parallax_content,
body.boxed .carousel-inner,
body.boxed .content_wrapper{
width: 320px;
}
.header_bottom,
footer .container_inner,
nav.content_menu{
padding: 0 15px;
}
.side_menu .close_side_menu_holder{
right: 12px;
}
.pp_content {
height: 250px !important;
}
.pp_hoverContainer{
height: 200px !important;
}
nav.content_menu .nav_select_menu{
border: none;
}
}
The first file (responsive.min.css) is the minified version of the second file (responsive.css), that means that the minified version has no unuseful character like spaces, tabulations...
The minified version of assets like css, js and sometimes directly html page is used to avoid loading unuseful character and to make download faster. So your theme is probably using the minified version.
I really suggest you edit responsive.css and then, thanks to lots of tools you find on the Internet, create the minified version and replace the existing one.
To center the content you have 2 ways:
Setting a fixed width for your content and then setting a margin: auto; property;
Setting the container of your content to display:flex and then setting your content to justify-content: center;
You can check if certain input fields are not filled using the isset() function in PHP: For example:
if (isset($_POST['sku']) {
//exists
}
While to check if the product already exists you have to check if it exists in database so you must necessarily make a query.
Does anybody know how to force mdbook to use the whole content area? Currently there is a large margin left and right and the whole content (especially tables) are heavily compressed.
See https://github.com/rust-lang/mdBook/issues/1847
Full quote from the link:
There isn't a specific setting for the width. Something like this should work:
:root {
--content-max-width: 500px;
}
There are several css files and such that you can override. https://rust-lang.github.io/mdBook/format/theme/index.html discusses the files, and mdbook init --theme will give you a copy of the defaults.
The answer of sarema points exact to the correct solution, but there is still one detail which is important. So, for everyone else who is interessted in this problem, here the full solution:
In the main book.toml file you can specify a custom .css file:
[output.html]
additional-css = ["custom.css"]
In this custom.css file you can override all available css classes as sarema already has posted:
:root {
--content-max-width: 500px;
}
When you take a look to the page source within your web browser, you can examine all the available css classes. https://rust-lang.github.io/mdBook/format/theme/index.html gives an overview about the main .css files, but in order to get the details there is no other solution than to examine this files by hand. So in my case I have additionally changed some margins of .css classes I found in the page sources like this:
:root {
--content-max-width: 80%;
}
.chapter li.part-title {
color: var(--sidebar-fg);
margin-bottom: -5px;
margin-top: 11px;
font-weight: bold;
}
.chapter li.chapter-item {
line-height: 1.5em;
margin-left: 0.5em;
margin-top: 0.6em;
}
Hope, this description is helpful for some others who despair of the styling of their mdbook ;)
So I have a simple react component and I'm really new to the whole web world.
I have done the following...
CharacterForm.js
const segmentStyle = {
margin: "3% 3% 5% 3%",
padding: "3%",
}
<Segment style={segmentStyle}>
....
</Segment>
The Segment tag is from react semantic-ui
This worked fine. After some more lines of code I realized I want to do more "complex" styling and created a css which I import like this into my .js:
import "./CharacterForm.css";
So my Code is now like this...
CharacterForm.js:
import "./CharacterForm.css";
<Segment className="segment">
...
</Segment>
CharacterForm.css
.segment {
margin: 3% 3% 5% 3%;
padding: 3%;
}
But this move just removed the margin and padding and it is like it was unstyled. I was expecting to stay styled with the assigned margin and padding value.
I have also imported "semantic-ui-css/semantic.min.css" like mentioned in the official documentation. The object are rendering but without the imported css.
I have also done this (external css) with my navigation bar component and everything worked as expected with imported css.
Can anyone explain why this is happening?
What am I doing wrong here?
Thanks in advance.
We use modernize theme for our website.
I want to increase the size of main content area. I just want the background image (gray lines) to take mush less space.
I have tried changing theme's own css file & custom css file both. But it's not working.
pls see the website : www.gtctrust.com
or the picture below:
image
Don't use !important as someone just suggested. Just strenghten your selector here from:
body .container-wrapper, body .all-container-wrapper.boxed-layout{
width: 1060px;
}
to
body .container-wrapper, body .body-wrapper .all-container-wrapper.boxed-layout{
width: 1060px;
}
see if this works for you
body .container-wrapper, body .all-container-wrapper.boxed-layout{
width: 1060px;
}
I would like to know how can I edit CSS files(ex:Logo size, Logo path)
I am using Grantry v4.1.24 and Joomla 3.3.1
See the example of how to change Logo;
#rt-logo {
background: url("/qatarclean/joomla_gantry/images/logo.png") no-repeat scroll 50% 0 transparent !important;
}
#rt-logo {
height: 140px;
width: 267px;
}
How can I find the CSS location for this and how to edit this?
in Firebug it is only showing the only the folder path.
I have created gantry-custom.css file and inserted above data. It doesn't work.
See the attached picture;
Also I want to know how to remove some lines from selected CSS file;
Thanks in Advance,
Sameera Silva
The Gantry Framework uses compiled LESS files. Rather than editing these directly, it is recommended (as you have done) that a custom CSS or custom LESS file is created so that your changes are not overwritten by a template update.
The use of !important might be the reason your override is not working.
You can get around this using CSS specificity as explained by Henning on the RocketTheme Forums at: http://www.rockettheme.com/forum/configuration-and-security/209832-want-nail-how-2use-template-name-custom-css-file-correctly#1028846
For more information on CSS specificity Henning recommends: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know
In this particular case, the following should fix the issue you are having:
div#rt-logo {
background: url("/qatarclean/joomla-gantry/images/logodf.png") no-repeat scroll 50% 0 transparent !important;
}