I am currently using gatsby for a project and when i put gatsby Img component inside Link component so that it's clickable, the image gets shrinked to its parent component(the link component). i know gatsby fluid Img stretches or shrinks to its parent's width but i want it to show as full image. i tried using fixed instead of fluid but it didn't work and it's even tried specifying width while querying.
code
frontend part
It seems clearly a CSS issue since your <Link> is shrinking to the text (sssssssssss) length.
Debug your .thumbnail class and the component to see what's happening inside. For example, a CSS rules like the following will work but maybe don't fit your design specs:
.thumbnail{
position: relative;
width: 100%;
}
.thumbnail a,
.thumbnail img {
width: 100%;
}
Take a look at the resultant HTML output the adjust your selectors, since gatsby-image wraps the <Img> inside a nested structure, what may affect your CSS rules.
It seems that you are using Bootstrap (hence the w-100) so try adding it to the wrapper (<Link> component),
Related
https://developers.google.com/recaptcha/docs/display
I would like to know how to apply styling to the image selector.
grecaptcha.render(
container,
parameters
)
According to the document: container is the HTML element to render the reCAPTCHA widget. Specify either the ID of the container (string) or the DOM element itself.
Then, I try to apply css to the container and pass it to the render method. However, it only applies to the grecaptcha-badge div.
I have no idea how to adjust the image-selector position.
visibility: visible; position: absolute; width: 1303px; top: 146px;
It seems the style is controlled by the google js: https://www.google.com/recaptcha/api.js
What could I do to edit the image-selector's style?
This question is quite old, but for those who want to customize the reCAPTCHA here is a solution: https://custom-captcha.com/
It has no image captchas but instead uses the new reCAPTCHA v3 in the background. You can customize the logo, the text, and the brand name as well. Also you can apply any CSS you want to it.
I am using CKEditor 5 in my application for users to input documents with images, media, tables and styled text. Once the user stores the document and I pull it out again for display. In the past when I only had the most generic styling I displayed the content like this:
<div [innerHTML]="doc.text"></div>
This is an Angular application which explains the syntax used above. The problem is that the text renders but the CSS that is effective makes it looks different. For example CKEditor has a feature for the user to automatically resize an image to 50% and flow text around it. It looks really nice in the editor but when displayed as above the image reverts to full size.
My workaround for now is to invoke a ckeditor in disabled mode like this:
<ckeditor [editor]="Editor" [config]="{ toolbar: [ ] }"
[disabled]="true" [data]="doc.text"></ckeditor>
That works but I would prefer to have a solution where I don't have to import the ckeditor into components that don't need to let the user edit the document. Does anyone know how to do this?
I'd say it is not passible to have all the ckeditor features working in Angular only by using a div with innerHTML as a viewer... I was using same approach but some of the "figures" weren't shown, concretely embedded videos...
In order to have a disabled and pure read-only viewer I created a dedicated wrapper component and I used some global CSS styles to get rid of that unwanted UI behavior in this scenario.
Here is my rich text viewer component HTML, it is a ckeditor with an empty toolbar, same as in the question indeed:
<ckeditor class="ckeditor-viewer" *ngIf="isBrowser" [editor]="editor" [ngModel]="data" [config]="{ toolbar: []}" [disabled]="true"></ckeditor>
Here are some global styles that hide borders on figure hover and table handlers:
// These styles hide weird "things" in CKeditor Viewer (read only mode)
.ckeditor-viewer .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected, .ck.ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected:hover{
outline-width: 0;
}
.ckeditor-viewer .ck .ck-editor__nested-editable {
border: 1px solid transparent;
height: 0;
margin: 0;
}
.ckeditor-viewer .ck-content .image>figcaption{
background-color: transparent !important;
}
.ckeditor-viewer .ck .ck-widget__selection-handle{
width: 0;
height: 0;
display: none;
}
// These styles hide weird "things" in CKeditor Viewer (read only mode)
I hope it helps.
I'd like to use the theme styles to generate different CI for sub companies of our main company. I would like to insert every sub-companies logo into the top naviagtion bar. The plan was to have a seperate theme style for each sub company and within each style have a custom css code which sets the background image to a referenced static file (or theme file). Unfortunately the custom css code does not seem to evaluate the substitution strings so the images can not be rendered. e.g.
div.t-Header-logo {
background-image: url(#APP_IMAGES#COMPANY1_LOGO.png);
background-repeat: no-repeat;
width: 250px; /*or your image's width*/
height: auto; /*or your image's height*/
margin: 0;
padding: 0;
}
Is there any way to achive different logos per theme style?
Thanks for your support
replace the #WORKSPACE_IMAGES# reference with it's resolved name in the CSS file.
e.g. #WORKSPACE_IMAGES#add.gif becomes-
http://apex.oracle.com/pls/otn/wwv_flow_file_mgr.get_file?p_security_group_id=441224701954687600&p_fname=add.gif
Get the resolved name for your workspace by viewing page source, copy and replace #WORKSPACE_IMAGES# with the same. It will work.
Note: make sure that the image file you have uploaded is not specific to an application.
in my Joomla template is of course the component included:
<jdoc:include type="component" />
That fills the whole width of the parent container at the moment (with margins). The parent container has a background that stretches from the top of the site to the bottom of the component. What I want to do is add a position after the component to place a module there, but I want it next to the component.
But once I make the component float:left and add a width:80% or something so the module on the new position will float next to the component. But, the background from the parent container changes when I add a width other than 100% to the component and stops before the component begins.
How can I have the component have a smaller width than 100% and float:left with another position next to it without changing the background of the parent container?
Edit: I like to add that I cannot use overflow:hidden on the parent container since another element will be clipped if I do. Adding a background to component and the other position won't work either since the original background is wider.
Edit2: I found a solution to my problem. For future reference if anyone is interested: the float clearing part on this page described my problem and clearing the float by adding a <div style="clear: both;"></div> after the last floating element solved my problem. If anyone has a cleaner, better solution I love to see it!
I'm not sure which version of Joomla you're using, but if it's 3.x, then you can use the clearfix class that comes with Bootstrap. It's a cleaner and more efficient approach to adding a clear div at the end of the parent element. So simply add the following to your parent container:
class="clearfix"
If you're using Joomla 2.5 then you can add the following to your template css file:
.clearfix:before,
.clearfix:after {
content: '\0020';
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 0;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
and then add the class as mentioned above.
Hope this helps
How to scale up images in bootstrap 3?
Images in Bootstrap 3 can be made responsive-friendly via the addition
of the .img-responsive class. This applies max-width: 100%; and
height: auto; to the image so that it scales nicely to the parent
element.
With the following code the image scales down well, but it's not get the parent div's size on larger screens.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-md-5" style="background:yellow">
<div class="image-container" style="background:green">
<img src="http://placehold.it/350x150" class="img-responsive">
</div>
</div>
</div>
How to do that? Demo: http://www.bootply.com/8uXBxX8Qjy
You can set the image width to 100%. The img-responsive sets max-width to 100%, the image itself will never be larger than it's actual dimensions. Setting the width to 100% will force it to be the width of its parent regardless of its actually size, but be warned that this can sometimes cause images to become pixelated depending on the image size and how much it is being scaled to fit.
I previously had this issue, I was using a theme based on Bootstrap 3.
I was using the theme in Wordpress live site.
Problem
The problem was that, image enclosed in img tag and which further was enclosed in Wordpress's own class defined for image. And the image not properly scaled.
Images having low width would fit inside the main div, in which the image was placed, some images having big width, going outside of the main article. And using such broken CSS functionalities is a havoc for my website. Until I found the solution.
Solution
Find which img tag is responsible for image scaling, you can test in Browser's inspect element, and find which tag is responsible for image scaling. And put the below code there and test. And your theme could have different tag responsible for img scaling property set with Bootstrap.
For mine it was :
img{
vertical-align: middle;
width: 100%;
height: auto;
}
The theme already had, img{vertical-align: middle} present, so I tested for width:100% and the rest CSS rule, and it worked. Your theme could have some differnt CSS rule or tag set, find that and apply. But these two rules should be applied to scale image properly. Thanks #David Taiaroa for height: auto CSS rule