Sign in


Sign up


Radio button makes screen gigantic horizontally

MDB SupportCategory: General Bootstrap questionsRadio button makes screen gigantic horizontally
decosvaldo Pro User asked 2 weeks ago, version:4

Hi, i’m a premium user and using this Radio:

<div class="form-group radio-pink-gap radio-80M-settings"><input name="group-1" type="radio" class="with-gap" id="1"><label class="small" for="1">Test</label></div>

The same moment I put the radio inside my code and reload the page, everything is rendered fine, but it is now possible to scrool the screen horizontally to far away on a blank screen. this makes applications like modals to become gigantic on mobile phones.

Once I remove the radio, everything is back to normal.I have tried to insert it into columns, new rows, forms, and the result is the same.

Can you please help me?

decosvaldo Pro User replied 1 week ago

The result is the same if I add checkboxes. Inputs like text doesn’t affect the screen. I also removed all the CSS classes.
If I enter a single line inside the card the problem appear.

decosvaldo Pro User replied 1 week ago

I have noticed that when I flip all the cards, the horizontal bar vanishes… but I sill don't know where the problem is…

decosvaldo Pro User replied 2 weeks ago

Sure. Sorry if it wasn’t enough.
I’m using the radio buttons on the back side of each artist album card, for users to apply a score.
I’m also using PHP

You can access this demo page on:
http://www.80minutos.com.br/dev/artist.php?artist=35
Here, you will find the radio buttons on the back side of any of the cards. To flip it, it will request for authentication, that you can get access with:
Username: testing@testing.com
Password: testing
At the first access you can see that a horizontal bar will appear.

I have duplicated the same page and posted as: http://www.80minutos.com.br/dev/artistnoradio.php?artist=35
Inside this second demo page, you can perform the same actions, but the card doesn’t have the radio buttons on the back side. Everything else is the same.
Here you can see that removing the radio buttons, the horizontal scroll bar disappear, showing the correct view of the page.

Please let me know if you still need the code, but with the live demo you have the entire source.

Bartłomiej Malanowski replied 2 weeks ago

could you please provide us more of your code? Live demo would be also great!

6 Answers
Best Answer
Jakub Strebeyko answered 7 days ago

Hi decosvaldo,

What is experienced is a bug stemming out of an almost ancient fix applied to form elements. Thanks for pointing it out!

The simplest possible fix to the issue would be creating a custom class and applying it to the <div> wrapped around the radio buttons. Class name is up to you; it goes like this:

.radio-button-help {

  overflow: hidden;

  position: relative;

}

It should help – let us know if it did!

Regards

Bartłomiej Malanowski answered 1 week ago

Please check this line: <html xmlns="http://www.w3.org/1999/xhtml>. As you can see the ” character after http://www.w3.org/1999/xhtml is missing. Could you please add missing character?

decosvaldo Pro User replied 1 week ago

Sorry for that.
I’ve fixed, but the result is the same.

Jakub Strebeyko answered 7 days ago

Hi decosvaldo,

Please confirm whether I understand the issue correctly. The desired outcome would be to have radio buttons fit the back of the card, meaning – having them lined up vertically, like so:

If that’s the case, please try removing “d-flex” CSS class from the <div> wrapped around the radio buttons inside the row beneath the “Escolha uma nota:” paragraph. Let us know if that fixed the issue.

With Best Regards,

Jake

decosvaldo Pro User answered 7 days ago

Yes, the cards should look like they are. Users should flip them to give a score to an album. Once I insert the radio button on the back of it, the problem appears.

Did you see it? Once you load the page, you can see a scrool bar on the bottom that allows you to move the screen to the far right. If I remove all the radios, the problem go away.

The d-flex class I’ve inserted yesterday, because I was trying some stuff to solve the problem. Therefore, I’ve removed and the problem remains.

I have also tried to use the rotating card sample from the mdb site without any information and the problem is the same. I doesn’t appear to be related to the information I’m typing.

If I remove everything (all the radios) and insert the one and only <input type=”radio”> or <input type=”checkbox”>, the problem also appears.

decosvaldo Pro User answered 7 days ago

Please watch this video: http://www.80minutos.com.br/dev/Radio-Problem.mp4

I’ve made this to help you identify the issue.

Can you please confirm if it is working and visible?

 

Thanks

decosvaldo Pro User answered 7 days ago

Yes! Finally it is fixed! I didn’t know what to try anymore.

To wrap this up, a basic question: I was not able to set this via CSS class, even using the !important flag. I tried inside the “col” div and in every single radio. And using the object id intead of a class. The only way was configuring style=”overflow:hidden;position:relative;” I was able to apply it and fix the problem. It works on both of the divs mentioned before.

But if this is the only way, fine by me 🙂

Jakub Strebeyko replied 7 days ago

Happy to know it helped. 🙂
Cheers!