Survey-library: Alignment issue in radiogroup

[syash2015]

Are you requesting a feature, reporting a bug or ask a question?

Question

What is the current behavior?

Radio button coming in center when colCount=1. I want it to properly align from left. See attachment.

What is the expected behavior?

How would you reproduce the current behavior (if this is a bug)?

Provide the test code and the tested page URL (if applicable)

Tested page URL:

Test code

your_code_here

Specify your

• browser:
• browser version:
• surveyjs platform (angular or react or jquery or knockout or vue):
• surveyjs version:

[syash2015]

Another issue. no gap between radiogroup question and complete/next/previous button.

[andrewtelnov]

@syash2015 Could you create a plunker example? I believe something wrong with your bootstrap styles on your page.

Thank you,
Andrew

[dmitrykurmanov]

@syash2015, I think the problem could appear because of http://getbootstrap.com/dist/css/bootstrap.css. It returns bootstrap 4-beta now. So you need to use

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">

[syash2015]

Thank sir. issue is resolved.
But why question title is now not coming in bold.
I noticed when we see question title in "https://surveyjs.io" title is in
bold fonts
but same when opens in plunker the bold disappears.

On Tue, Aug 29, 2017 at 7:12 PM, DUODVK [e-mail] wrote:

@syash2015 https://github.com/syash2015, I think the problem could
appear because of http://getbootstrap.com/dist/css/bootstrap.css. It
returns bootstrap 4-beta now. So you need to use

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/surveyjs/surveyjs/issues/600#issuecomment-325667528,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AZkUZ2AtcUlihgI6OQLcvXJhXTHzV5cEks5sdBUtgaJpZM4PFnqK
.

--
Thanks & Regards,

Syed Asad Hasan
Tech/Team Lead
Logicsoft International Pvt. Ltd.
Email- [email protected] [e-mail]
Mobile -* [phone]*

[dmitrykurmanov]

@syash2015, this is because of "Segoe UI" font. We use it in our surveyjs.io site but not in plnkr examples. We will make it the same, thanks! If you want the same ui as our site you could try to add something like:

html body h1, html body h2, html body h3, html body h4, html body h5, html body h6, html body .h1, html body .h2, html body .h3, html body .h4, html body .h5, html body .h6 {
    font-family: "Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;
}

[alzulas]

The rest of my website needs Bootstrap 4.0 to display properly. Is there a way to fix this alignment issue without reverting to 3.3? The radio buttons just end up all over the place. http://www.personassessment.com/RSSM.html

[andrewtelnov]

@alzulas Could you please try the current version 0.96.3. We have added the BS4 support in this version.

Thank you,
Andrew

[tsv2013]

@andrewtelnov I fixed the wrong alignment for BS4 in this https://github.com/surveyjs/surveyjs/commit/645caa0c4089602955514b65d372ffe6f525b5c6 commit

[alzulas]

Awesome. The radio buttons now align on the left, which is great. Is there a way to make 0 column items space out evenly? Also, is there a way to properly space out the matrix buttons? See attached images.

[tsv2013]

@alzulas I've fixed spacing. As for matrix buttons - this is default buttons alignment inside the matrix table. You can override this behaviour via CSS styles as shown in this example.

[alzulas]

First, I've updated to the 0.97.0 and haven't seen the spacing issue fixed yet, so I'm just curious if it's coming soon? Or maybe not changed in the JQuery version? I'm not sure.

Second, is there a way to make the width of the first column different than the others instead of just forcing them all to be the same width? In your example, that would be the column with "Product is affordable" in it. I've been looking through the internet, and without making the tables by hand I don't see a good way to do this. Maybe I'm just too much of a CSS novice.

[tsv2013]

@alzulas As you can see from the commits history commit 044e93b was done after 0.97.0 had been released and will be available in the next update.

[tsv2013]

@alzulas For quesions customization you can use onAfterRenderQuestion event and patch rendered quesion in any manner.
If you want to use CSS selectors, I've updated the example.

[alzulas]

Awesome. Perfect! Thank you guys so much.