I have two buttons on a webform that are not displayed on an equal height. This happened after I updated Gravity Forms.
See http://topdek.nl/prijs/, enter a random name, email address and phone number, click 'Volgende' (Next), then choose any of the two options, and on the last step you will see two buttons on the bottom of the webform ('Vorige' and 'Verzenden'). Example: http://i.imgur.com/1rIrCFz.png
I was wondering if anyone would know how this can fixed using CSS?
Thanks :)
The following code in your css is affecting the first button and causing the problem. Change that code to margin-bottom: 0;
.gform_wrapper .gform_page_footer .button.gform_previous_button {
margin-bottom: .5em;
}
Related
I am stuck with an alignment issue of Kendo Grid Validation Message for dropdown. For text-box, validation message shows correctly and for dropdown it shows partially as the next row overlaps the validation message as in the below image.
I have tried many workarounds and couldn't fix this. Please help.
Comparison Image for text box and dropdown
Download Test Solution
As a work around. You can use:
.k-tooltip {
position: fixed;
}
It hurts me to have to ask this question here, but one full day of searching through the internet didn't get us an answer so far.
Like you can see, the content is stuck on the left side.
Adding the CSS .od-ClientFormFields-fieldsContainer {
max-width:100% !important;
} didn't have any effect. It does still limit the max-width to 378px. I just want to strech it to full width. Just this list, just on this page. Coming from PHP, I expected 5 minutes work max. Now a day is lost and I hate MS a little more...
Update:
in my display form (DispForm.aspx), I added my style from above below the given style:
<SharePoint:StyleBlock runat="server">
.ms-bodyareaframe {
padding: 8px;
border: none;
}
In this form, I can see just some lines (108) of code. Am I looking in the wrong place? I tried to create a new DisplayForm, but in the end it was nasty. The list was placed centered and didn't work properly. I couldn't even edit it.
Plus I've had another menu there, which I didn't have in my original DispForm.aspx, just "edit all". At that point, I stopped. I just want the list to be wider.
I have noticed this for a while however that when using Lightswitch and setting properties to "Stretch to Container", that the screen sometimes appears to be over-stretched and moves items down to the next line, for example:
When pressing the "See My Projects Only" the buttons switch (so I hide this one and display the other option" using the below code:
if (screen.ChangeDefaultValue.count > 0) {
screen.ChangeDefaultValue.selectedItem = screen.ChangeDefaultValue.data[0];
screen.ChangeDefaultValue.selectedItem.HomepageProjectsDefault = false;
screen.DefaultOption = null;
myapp.applyChanges();
setTimeout(function () {
screen.Projects.refresh();
}, 100);
screen.findContentItem("SeeAllProjects").isVisible = false;
screen.findContentItem("SeeMyProjectsOnly").isVisible = true;
}
else {
}
This works perfectly, however as you can see in the 2nd image above, the button moves down below the parameter search box as if it has been overstretched. I have tried changing the margin and padding of the .msls-content however this error still occurs here and on multiple of my other pages.
Has anyone found a fix to this problem?
Further information:
I am using msls-2.5.3.css and is declared in the default.htm file
I have tried this https://social.msdn.microsoft.com/Forums/vstudio/en-US/fb1305c5-ac13-474e-8ae0-df74ebf12590/html-client-custom-control-stretch-to-container-sizing-bug-problem?forum=lightswitch
THE PROBLEM
this small block of code in the msls-2.5.3.css appears to be the issue however if I comment it out then other screens break. all of the padding in the height appears to disappear and they all overlap each other on the modal screens
.msls-clear {
clear: both;
}
In LightSwitch HTML, we can use column layout option to render the control in each column. By setting "stretch to container" property, column is only stretched to container size and not the control inside each column is stretched with container. Controls are properly rendered inside the container. Issue occurs due to the column width stretches when hide and show the content item and this is not related with component used in the page. Follow the below workaround solution while remove the content item dynamically by click on the button. Please remove the class ‘msls-clear’ on button click or apply clear: none to the class ‘msls-clear’.
this.element.parents(".msls-column").next(".msls-clear").removeClass("msls-clear")
Hope this will helps you..!
Thanks,
Francis
Im no expert in CSS but this appears to have fixed my issues:
.msls-clear {
clear: right;
max-width: 1850px;
}
all of the machines I have tested have a resolution of 1920 x 1080 so by reducing the width down slightly it will never over stretch the items.
I did originally comment out the clear: right; which worked in internet explorer, however I tested some Syncfusion controls in google chrome/firefox. I could not click on any of them and therefore had to add in the max-width.
If someone can propose a better solution I would be grateful but at least for now this works
I'm making an app using JQuery Mobile on top of PhoneGap (Cordova). I used Codiqa to come up with a wireframe for my UI. It looks OK so far, but the group of radio buttons I'm going to use to change views with wasn't centred - it was off to the left by about 25px on a WVGA800-sized webkit browser. When scaled to a tablet shape, the group got further and further from the centre of the viewport.
Here's a jsFiddle link to my project with the problem unfixed - http://jsfiddle.net/jaspermogg/sahXy/1/
Here's a jsFiddle link to my project as fixed by me - http://jsfiddle.net/jaspermogg/NvMsK
I came up with a solution using JQuery, but I'm inexperienced and don't know which event to fire on.
When I load the UI in Webkit, it renders the UI pre-script, before refreshing after <1s to a post-script state. This looks lame. I have my script set up to run on $(window).load.
Questions:
What event should I be looking for, and could you show me how to implement that?
Is my script in the right place - should it be inside the page, the way it is, or outside? Or in head even?
It feels really stupid to be doing this with JQ - surely there's a way to do this with CSS?
Thanks in advance for any help offered! Cheers!
I guess I answered my own question in the comments above, so gonna formalise it by accepting my answer.
What I did in the end was -
(1) Set the radio button-containing div to visibility: hidden in the CSS.
(2) Find the widths of each radio button and add them together.
(3) Set the width of the radio button-containing div to the total width.
(4) Chain a change of the visibility property onto (3).
The CSS has to be set up like this -
#viewselector{
margin: 0 auto;
text-align: center;
visibility: hidden;
}
The code to do (1) to (4) is as follows -
$(document).ready(function(){
var idealwidth = 0
$(".ui-radio").each(function(){
idealwidth = idealwidth + $(this).width();
});
$("#viewselector").width(idealwidth).css('visibility','visible');
});
Hope this helps someone!
I have several Google +1 buttons on my website and when a button is clicked a certain amount of times the plus one button on the page becomes wider and therefore moves out of its space given. How could I stop this from happening dynamically?
The CSS code for the button is as follows:
.news-plusone {
float: right;
margin: 2px -20px 0 10px;
}
The second parameter in the margin is the one that needs to change dynamically.
Example: http://www.nblackburn.me/index.php?section=news
The +1 button is included in this segment of HTML on my website (formatted here to remove scrolling):
<span class="news-plusone">
<g:plusone size="small" href="http://example.com/"></g:plusone>
</span>
Publishers may not alter or obfuscate the +1 Button, and Publishers
may not associate the +1 Button with advertising content, such as
putting the +1 Button on or adjacent to an ad, or placing ads in
shared content, unless authorized to do so by Google. Publishers also
may not place in shared content any text, image, or other content that
violates the Google+ project's User Content and Conduct Policy.
+1 button policy
However if you were just changing the positioning of the button then possibly showing an example would help clarify your issue.