In Lightbox2 I'm trying to get the caption text centred and wider than the image. I'm using the CSS file section at:
.lb-data .lb-details {
width: 100%;
float: left;
text-align: center;
line-height: 1.2em;
}
By increasing "width" I can get wider text to the right and by changing the "float" to right I can get the wider text to hang to the left.
I've also tried setting "float" to "none" and "inherit" with no success.
What I want to do is have a portrait image with centred text wider than the image.
As the text can be made to be wider than the image I don't think it's a container issue but I could be wrong.
Any suggestions? All help appreciated.
It is a container issue. The div.lb-dataContainer get's a width applied to it that matches the image container above it. To make it wider, you can override it by either by editing the lightbox.js source or by using CSS, ex. .lb-dataContainer { width: 100% !important; }
Related
I'm trying to add a label (title) inside the border of my container. Although there are many implementations of input fields with this feature, I haven't found any for normal containers. Here's a screenshot of what I'm referring to:
I considered adding a background to the text, but since the container's background is different from the background behind it, this won't work as the colors will clash. Does anyone have any ideas on how to achieve this in React Native?
I haven't implemented this in react-native so I can't say if this will work for you, but I have done this in a web app before using a linear-gradient background on the label with a little padding-left and padding-right:
label {
background-image: linear-gradient(transparent 50%, #666 50%);
padding-left: 3px;
padding-right: 3px;
}
The hex value would be the background color of your input.
Have CKEditor 5 working in ReactJS. However, need the ability to make the entire editor resizable so content can be expanded for larger screen sizes. I have made attempts with CSS resize without success.
For example:
.ck-editor__editable {
min-height: 20vw;
height: 100%;
resize: both;
overflow: scroll;
}
Also, I have tried adding resize and overflow on the parent DIV to the editor.
Is CSS the best approach here?
If anyone has done this successfully advice is appreciated.
I have a series of text fields in an Android app. I want to align the text vertically to the center (and horizontally to the left), but I can't find the correct approach.
This is my code:
textField.setUIID("TextFieldSome");
textField.getAllStyles().setAlignment(Component.BOTTOM);
This is the css:
TextFieldSome {
background-color: rgba(255,0, 255, 0.2);
color: blue;
font-size: 9pt;
margin-left: 5pt;
margin-right: 15pt;
margin-bottom: 5pt;
text-align: left;
padding-left: 20pt;
}
This is the result:
I have tried WITHOUT css and using these code variations:
textField.getAllStyles().setAlignment(TextField.BOTTOM);
textField.setAlignment(Component.BOTTOM);
textField.setAlignment(Component.TOP);
textField.setAlignment(TextField.BOTTOM);
But the text always aligns vertically to the center and never to the top or bottom.
What am I missing?
The setAlignment method is defined as:
Sets the Alignment of the Label to one of: CENTER, LEFT, RIGHT
We don't support vertical alignment of text in the API. Even center horizontal alignment isn't supported well in text components because of the complexity related to that. The core problem is switching back and forth to native which would make the text "jump".
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
I am currently working on this repo with my friend: https://github.com/openteach/openteach.
I have this bug that I can not fix. I have tried everything, but nothing seems to work?!
I have attached a picture of the bug.
Any help/ideas is appreciated.
Thanks.
Picture of bug:
Bug
You can do as Mike King suggest, just remember to set the background size to cover aswell:
background-size: cover;
This will make sure the background will always cover all of it's element, no matter what size the image is.
Another thing could be the element is not taking all of the height of the viewport. This can be fixed by setting the height relative to the viewport like:
body {
height: 100vh;
background-image: url(assets/images/stardust.png);
background-size: cover;
}
Set the background on the body, and you won't have a gap any more
body{
background: url(assets/images/stardust.png);
}
The sum of the heights doesn't fill the whole page, and you only have the background on the <div class="App_component">
The other way is to set that class on the body tag:
<body class="App_component">