Radio button makes screen gigantic horizontally

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Radio button makes screen gigantic horizontally

decosvaldo pro asked 7 years ago

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?

Bartłomiej Malanowski staff pro premium commented 7 years ago

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

decosvaldo pro commented 7 years 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.

decosvaldo pro commented 7 years 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 commented 7 years 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.

Jakub Strebeyko staff answered 7 years 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

decosvaldo pro answered 7 years 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 answered 7 years ago

Please watch this video: 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 answered 7 years 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 staff commented 7 years ago

Happy to know it helped. :) Cheers!

Bartłomiej Malanowski staff pro premium answered 7 years 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 commented 7 years ago

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

Jakub Strebeyko staff answered 7 years 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

Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
decosvaldo
Pro User
42Support score
16Questions 10Answers
0Snippets likes 1Snippets