How to Align to Right Drawing ?
Hey guys, i have in my form drawing section as for signature but in phone preview the drawing aligns to the left/center. I need it to be at the right side. Tried to align it with CSS with float, object position, direction. none of this helped. Tried to grab the class ID but didn't succeed.
-
Hi Shahar,
I trust you're familiar with manipulating text direction from left to right (LTR) or right to left (RTL) using JavaScript.
The issue at hand revolves around the default theme, which fails to set the label and/or control to a 100% width. Consequently, this may give the illusion of centered text when it's, in reality, set to RTL. To resolve this, all that's needed is to set the label to a 100% width, and perhaps the control itself for enhanced visual aesthetics—please take a moment to review your theme settings.
Below you can see the different results:
The default, LTR:
The default, RTL:
The true RTL, where the label AND the control is set to 100% width:
In case you're unsure about how to change the text direction using JavaScript, here's a small piece of code to assist you:
var formContent = document.getElementsByClassName('k-content')[0];
formContent.style.direction = 'rtl';I believe this should yield the desired result. However, if there are any discrepancies or if you'd like to provide further clarification, please don't hesitate to correct or enlighten me on the matter.
Best regards,
Emir
-
Hello Shahar,
Certainly, that approach can work, but there are more efficient ways to achieve the same result:
-
Manual Width Adjustment: In the eForm builder, you can easily modify the width of a control by hovering over it and selecting the 'Adjust width' option.
-
CSS Customization: Another method is to set the width using CSS. This provides more control over the styling, allowing you to fine-tune the appearance of labels and controls.
-
JavaScript Solution: As you mentioned, JavaScript can also be utilized. However, it's typically best reserved for more complex scenarios or dynamic behaviors. For simple width adjustments, the other options should suffice.
While these are the available options, I highly recommend using the first option. It simplifies the process and eliminates the need to delve into CSS syntax for label and control adjustments.
Best regards,
Emir
-
-
Hey Emir! thank you again!
I've tried these methods but nothing seems to work. when i adjust the control it overrides the 100% width and shrinks it. So i tried to CSS it with !important and it seems to work fine but only in the preview with F12 and when i insert to CSS code it doesnt apply. I tried with JS too but didn't managed to change it.
I know the class name of the div because i managed to change the background color to black with the CSS code but i can't adjust the width even with the !important.
-
Hello Shahar,
To ensure the desired width adjustment in the eForm builder (as shown in the image below), it's essential to follow up by implementing specific CSS code that will effectively override the '!important' property as outlined below.
To overwrite the inherit default CSS code, please use this:
label.alignLabel {
text-align: inherit !important;
}.eFormMobile .occupiedControl .checkboxInput.previewInput,
.eFormMobile .occupiedControl .commentsHistoryWrapper,
.eFormMobile .occupiedControl .geoLocationHistoryWrapper,
.eFormMobile .occupiedControl .radioInput.previewInput,
.eFormMobile .occupiedControl>.control .fieldWrapperDiv,
.eFormMobile .occupiedControl>.control .moneyFieldWrapper,
.eFormMobile .occupiedControl>.control .slider-container,
.eFormMobile .occupiedControl>.control .ssnInput,
.eFormMobile .occupiedControl>.control>.field:not(img, .k-List-View):not(.control input.PeoplePicker.ImageButton[type=button]),
.eFormMobile .occupiedControl>.control>.label,
.eFormMobile .occupiedControl>.fileuploadWrapper.control .dummydrop {
width: 100% !important;
}Regarding the Drawing control, the key class you should focus on is 'fieldWrapperDiv.' Additionally, I've included the other relevant classes for potential use on other form controls.
In summary:
- Modify the width of the selected controls along with their corresponding labels.
- Override the default CSS styling with the custom CSS code I've provided.
These steps should effectively achieve the desired outcome.
Best regards,
Emir
Please sign in to leave a comment.
Comments
5 comments