I have trouble centering and modifying the height of a contact form inserted in a text widget positionned in the left footer of my website.
http://www.durocketdescarottes.fr/
I'd like to reduce the height of my form and center it horizontally.
I have tried this CSS snippet :
/* Contact form customization */
.wpcf7{
height: 20%;
max-width: 50%;
margin: auto;
}
Changing the max-width property does change the width of the form, but I am unable to center it in the widget area using the usual "margin: auto;" trick.
Changing the height property does not do anything.
EDIT: following D_S_B suggestion, I tried to style the div.wpcf7, but my changes don't appear in the CSS style of my page. What is going on ?
Thank you very much for your help,
Benjamin
Taking a quick look at your css, it looks like there are styles applied to div.wpcf7, as well as the styles you posted from .wpcf7.
The classes applied do the div.wpcf7 are more specific than the ones without the div selector, so any margin you apply to your class will be overwritten by the margin: 0 applied to the div.wpcf7.
If you scope your class to div.wpcf7 and add a margin: 0 auto there instead, that will cascade as expected and horizontally center your form for you.
I solved my problem by downloading the Contact Form 7 style plugin. It wraps the form with additionnal classes which makes customization easy.
Related
I'm using nz-input textarea in 'nz-form' form.
I don't know how to make textarea fit its parent's height.
Demo
Here is the status quo:
What I want is:
I know what the problem is
If I directly set style="height:100%" for the two div and textarea, then I can get the target. But, the two div actually are not on my component's template html. So, I do not know how to fix this issue. I've tried to override the 'ant-form-item-control-input-content' css class, but it did not work.
I also have this similar issue when using antd. My go to solution is always to use flexbox when I want to fit the remaining space of the parent height.
I could not give you an exact code sample from your code because the link that you provided is not editable, what I can give you is an example on how I did it by just editing it from the inspect element of the page.
Screenshot Output
First is change the display attribute of your form tag to flex, and set it's flex-direction to column.
Form
<form id="my-form">
// nz-input elements
</form>
Style of form
form#my-form {
display: flex;
flex-direction: column;
}
Next, remove the height that you made on your 2nd nz-form-item (this contains the label content and textarea).
and also set the display of that element to flex and flex-direction: column, so we will be able to set the height: 100% properly with no issues on all the div elements inside including the textarea.
This style is for the 2nd nz-form-item inside the form element
element.style {
flex-grow: 1;
display: flex;
flex-direction: column;
}
I added a flex-grow: 1, because we want the 2nd nz-form-item to take the remaining space of the parent element which is the form element.
Note: Using height: 100% will copy the height of the form element, which we don't want that to happen and we'll not use this style.
Now, we want also to set flex-grow: 1; on the nz-form-control to take the remaining space of it's parent (which is the nz-form-item),
And lastly to directly set style="height:100%" for the two div and textarea, and we're done!
You can see the styles that I set starting from the nz-form-control down to the textarea
If you'll update the link on the post that is editable, I can give you a clear example how to do it. But for now, I can only give you this descriptive steps on how to fix your issue.
LAST EDIT
I've edited your code on stackblitz, you can have a look at the result in this link. :)
Credits also to Sameer, which helped me create this answer using ::ng-deep. I wasn't able to add styles on the 2 divs under the nz-form-item tag without it.
output
See if it helps, Add the full-textarea class to nz-form-control of textarea and below CSS to your respective component's CSS file.
.full-textarea ::ng-deep .ant-form-item-control-input {
height: calc(100% - 110px);
}
.full-textarea ::ng-deep .ant-form-item-control-input-content {
height: 100%;
}
.full-textarea textarea {
height: 100%;
}
If I directly set style="height:100%" for the two div and textarea, then I can get the target. But, the two div actually are not on my component's template html. So, I do not know how to fix this issue. I've tried to override the 'ant-form-item-control-input-content' css class, but it did not work.
So when you tried to override the css did you only override .ant-form-item-control-input-content? Or did you also override .ant-form-item-control-input? You said it worked when both divs and the textarea had a height of 100% but only said you overrode one of the divs in CSS.
I am trying to design a WordPress theme using Bulma.io; I'd like a page with tabs and content inside a container div element. When I apply Bulma CSS class is-marginless, three margins get overwritten, but margin-right is not applied from the class. Adding style="margin-right: 0px !important;", does not affect the visuals either.
To switch between tabs, I use code from The Internet which works seamlessly except the margin-right issue.
Considering the design is relatively complex already, you can see the page for yourself.
As you can see, due to the div element right margin, the border does not meet with the border of the tab lines. I am quite new to Bulma and CSS in general.
When I open Chrome Developer Tools and find a definition of is-marginless for a given div, I can see margin: 0px !important; is set, but when I click the expand arrow, I can see margin-right: 0px !important; crossed out, so it does not apply for some reason, but I can't find out why.
I've added is-fullhd to the class and it fixed the issue, the blocking piece of code has been max-width: 1152px; on container class, added class increased it to max-width: 1344px;
I'm creating a basic web layout in CodePen to better understand how grid areas work with the CSS Grid module. It turns out that using the . notation doesn't actually "hide" the items, when applied to the grid-template-areas property.
Please see my code here: https://codepen.io/isaacasante/pen/KZmyKV
You can see that I'm leaving the grid cells below my menu empty, but the section element on which I've added grid-area: random still shows in the bottom right corner of my layout (below my footer).
Do you guys have any idea how I can get rid of it without removing the HTML? I want to use Grid Areas only, to hide it. I noticed that an easy solution is for me to set the padding on the section element to 0, but this isn't a good solution, because it won't work the next time I'm trying to "hide" an element that has content.
You could reset the grid-templates-rows to grid-template-rows: 70px 40px 0px 290px 50px;
https://codepen.io/anon/pen/JMNpaJ and set display:none to section.item. position:absolute;right:100vwworks to to lay it out of screen. https://codepen.io/anon/pen/vpmdzj But that is when you know it is empty or is to be hidden any times.
Instead you can use :empty and auto. https://codepen.io/anon/pen/NXjyLV so it is hidden only when empty.
In fine, the grid-gap remains visible. It can be reset to 0 and margin on .item might help along the :empty selector and auto value for this specific row:
https://codepen.io/anon/pen/NXjyLV
Use display: none:
section.item {
display: none;
}
JSFiddle
I'm having trouble removing a margin in CSS .
I am working in a MVC .NET project and have implemented the summernote editor.
It uses the following CSS files:
summernote.css
font-awesome.css
bootstrap.css
as well as the default css files for an MVC application.
I have inspected the page and it states I have a margin to the right on the .note-editor class. I have then set the margin to 0 for that div (and class), but so far it has been impossible to remove it.
Here is the link to my screenshot (since I require 10 reputation to post images):
http://imgur.com/gallery/cNlqLTi
I would be more than grateful if someone could help!
It is not the margin it is just the empty space inside the container .col-md-10 which is shown in screenshot. For better understanding I created this fiddle
Here the parent element .container has some max-width and it is aligned center and the inner element .inner-container has max-width: 90%; and there is a remaining space of 10%. If you inspect it you will see it as orange same as your example, which you thought it as margin.
In your scenario, the parent element .col-md-10 has some width and the inner element .note-editor has max-width:95%. Here, there is a remaining space of 5% which you assumed it as margin.
To remove it, remove max-width or if you give max-width:100% or width: 100%, your issue will be resolved.
Ok so I found what the problem was. The .note-editor was displaying as a block.
I changed its styling to display:inline-block and width:95%. This fixed it nicely. Thanks to everyone for helping out!
The following css worked for me.
.note-editor{
display: inline-block;
border: none;
}
Try in Site.css file or try directly to type style="margin 0 0 0 0" or try to apply another class to current.
I'm using the Twenty Fourteen theme in my WordPress web site. On one of the pages I want to add images on the left side of the content area (menu sidebar is to the left of that) such that the text wraps around the image.
I have added two images (near the third and fourth H4 tags, if you take a look at the page) and both of the images are being forced behind the left sidebar due to the theme's -168px margin-left setting on the image's parent figure element.
On the page, if you use an Element Inspector/FireBug/whatever, you'll see the images nested in figure elements in the code and that it's way off to the left behind the sidebar. In the Rules viewer, it's showing a margin-left: -168px on classes ".full-width .site-content .wp-caption.alignleft"
I added my own class to the images to try to offset the margin by using margin-right: 168px, but it's not having an effect, presumably because the -168 left margin setting is on an element that is a parent of the image.
I don't want to select all figure elements to offset that -168px - I may want that for other figures - I don't know. WP adds an ID to each image, but I don't want to have to select each and every image ID (unless that's the only way), so how do I handle this?
Thanks for anyone's help.
Remove the .alignleft class from the figure's html.
This will remove the margin.
To get the text to flow around the figure you need to give it a property of float: left and add some right and left margin to make it look a bit nicer.
html for the figure (your image) should read:
<figure id="attachment_10" style="width: 88px; float: left; margin: 0 20px 0 10px;" class="wp-caption">
I'd say you should look at styling elements in css stylesheets as opposed to defining your styles in html.
A book for you would be:
HTML & CSS: Design and Build Web Sites
By Jon Duckett
Its what I used when I first started CSS. Its got all you'll most likely need for a while and very beginner friendly...
After some more fiddling around looking at the CSS and trying some settings I realized that I kind of answered my own question. I said that the figure element that the image is in has a setting of margin-left: -186px;. All I had to do was add my own CSS: figure { margin-left: 0px; }. Why I didn't see that sooner, I don't know...