Remove ion-radio from ion-select - Ionic v4

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

1

I would like to remove ion-radio which are generated when i call ion-select (with a popover interface)

<ion-item>

    <ion-label>Popover</ion-label>

    <ion-select interface="popover" placeholder="Select One">

      <ion-select-option value="brown">Brown</ion-select-option>

      <ion-select-option value="blonde">Blonde</ion-select-option>

      <ion-select-option value="black">Black</ion-select-option>

      <ion-select-option value="red">Red</ion-select-option>

    </ion-select>

</ion-item>

the code above generates ion-radio elements in the shadow DOM.

I tried to select them (trying a display: none, or modifying a property with css4 (--border-width for example)).

I also tried the interfaceOptions method [interfaceOptions]="{cssClass:'custom-popover'}", without success.

Thanks a lot

angular ionic-framework ionic4

share|improve this question

edited Jan 3 at 14:27

ppichier

asked Jan 3 at 14:22

ppichierppichier

181210

add a comment | 

1

I would like to remove ion-radio which are generated when i call ion-select (with a popover interface)

<ion-item>

    <ion-label>Popover</ion-label>

    <ion-select interface="popover" placeholder="Select One">

      <ion-select-option value="brown">Brown</ion-select-option>

      <ion-select-option value="blonde">Blonde</ion-select-option>

      <ion-select-option value="black">Black</ion-select-option>

      <ion-select-option value="red">Red</ion-select-option>

    </ion-select>

</ion-item>

the code above generates ion-radio elements in the shadow DOM.

I tried to select them (trying a display: none, or modifying a property with css4 (--border-width for example)).

I also tried the interfaceOptions method [interfaceOptions]="{cssClass:'custom-popover'}", without success.

Thanks a lot

angular ionic-framework ionic4

share|improve this question

edited Jan 3 at 14:27

ppichier

asked Jan 3 at 14:22

ppichierppichier

181210

add a comment | 

1

1

1

1

I would like to remove ion-radio which are generated when i call ion-select (with a popover interface)

<ion-item>

    <ion-label>Popover</ion-label>

    <ion-select interface="popover" placeholder="Select One">

      <ion-select-option value="brown">Brown</ion-select-option>

      <ion-select-option value="blonde">Blonde</ion-select-option>

      <ion-select-option value="black">Black</ion-select-option>

      <ion-select-option value="red">Red</ion-select-option>

    </ion-select>

</ion-item>

the code above generates ion-radio elements in the shadow DOM.

I tried to select them (trying a display: none, or modifying a property with css4 (--border-width for example)).

I also tried the interfaceOptions method [interfaceOptions]="{cssClass:'custom-popover'}", without success.

Thanks a lot

angular ionic-framework ionic4

share|improve this question

edited Jan 3 at 14:27

ppichier

asked Jan 3 at 14:22

ppichierppichier

181210

I would like to remove ion-radio which are generated when i call ion-select (with a popover interface)

<ion-item>

    <ion-label>Popover</ion-label>

    <ion-select interface="popover" placeholder="Select One">

      <ion-select-option value="brown">Brown</ion-select-option>

      <ion-select-option value="blonde">Blonde</ion-select-option>

      <ion-select-option value="black">Black</ion-select-option>

      <ion-select-option value="red">Red</ion-select-option>

    </ion-select>

</ion-item>

the code above generates ion-radio elements in the shadow DOM.

I tried to select them (trying a display: none, or modifying a property with css4 (--border-width for example)).

I also tried the interfaceOptions method [interfaceOptions]="{cssClass:'custom-popover'}", without success.

Thanks a lot

angular ionic-framework ionic4

angular ionic-framework ionic4

share|improve this question

edited Jan 3 at 14:27

ppichier

asked Jan 3 at 14:22

ppichierppichier

181210

share|improve this question

edited Jan 3 at 14:27

ppichier

asked Jan 3 at 14:22

ppichierppichier

181210

share|improve this question

share|improve this question

edited Jan 3 at 14:27

ppichier

edited Jan 3 at 14:27

ppichier

edited Jan 3 at 14:27

ppichier

asked Jan 3 at 14:22

ppichierppichier

181210

asked Jan 3 at 14:22

ppichierppichier

181210

asked Jan 3 at 14:22

ppichierppichier

181210

181210

add a comment | 

add a comment | 

1 Answer
1

active

oldest

votes

0

Can you try with mode="ios".

<ion-select placeholder="Select One" mode="ios">

  <ion-select-option value="f">Female</ion-select-option>

  <ion-select-option value="m">Male</ion-select-option>

</ion-select>

share|improve this answer

answered Jan 3 at 14:44

AnjiAnji

18112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  mode="ios" does not work ..
  
  – ppichier
  Jan 3 at 14:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file
  
  – Anji
  Jan 3 at 15:03
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does not work too. i think i should create my own popover via PopoverController
  
  – ppichier
  Jan 3 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  where did you added your styles.
  
  – Anji
  Jan 3 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  as you told me. In the global file styles.scss
  
  – ppichier
  Jan 3 at 15:58
  

  
  
  
  

 | 
show 2 more comments

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024187%2fremove-ion-radio-from-ion-select-ionic-v4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

Can you try with mode="ios".

<ion-select placeholder="Select One" mode="ios">

  <ion-select-option value="f">Female</ion-select-option>

  <ion-select-option value="m">Male</ion-select-option>

</ion-select>

share|improve this answer

answered Jan 3 at 14:44

AnjiAnji

18112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  mode="ios" does not work ..
  
  – ppichier
  Jan 3 at 14:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file
  
  – Anji
  Jan 3 at 15:03
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does not work too. i think i should create my own popover via PopoverController
  
  – ppichier
  Jan 3 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  where did you added your styles.
  
  – Anji
  Jan 3 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  as you told me. In the global file styles.scss
  
  – ppichier
  Jan 3 at 15:58
  

  
  
  
  

 | 
show 2 more comments

0

Can you try with mode="ios".

<ion-select placeholder="Select One" mode="ios">

  <ion-select-option value="f">Female</ion-select-option>

  <ion-select-option value="m">Male</ion-select-option>

</ion-select>

share|improve this answer

answered Jan 3 at 14:44

AnjiAnji

18112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  mode="ios" does not work ..
  
  – ppichier
  Jan 3 at 14:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file
  
  – Anji
  Jan 3 at 15:03
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does not work too. i think i should create my own popover via PopoverController
  
  – ppichier
  Jan 3 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  where did you added your styles.
  
  – Anji
  Jan 3 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  as you told me. In the global file styles.scss
  
  – ppichier
  Jan 3 at 15:58
  

  
  
  
  

 | 
show 2 more comments

0

0

0

Can you try with mode="ios".

<ion-select placeholder="Select One" mode="ios">

  <ion-select-option value="f">Female</ion-select-option>

  <ion-select-option value="m">Male</ion-select-option>

</ion-select>

share|improve this answer

answered Jan 3 at 14:44

AnjiAnji

18112

Can you try with mode="ios".

<ion-select placeholder="Select One" mode="ios">

  <ion-select-option value="f">Female</ion-select-option>

  <ion-select-option value="m">Male</ion-select-option>

</ion-select>

share|improve this answer

answered Jan 3 at 14:44

AnjiAnji

18112

share|improve this answer

share|improve this answer

answered Jan 3 at 14:44

AnjiAnji

18112

answered Jan 3 at 14:44

AnjiAnji

18112

answered Jan 3 at 14:44

AnjiAnji

18112

18112

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  mode="ios" does not work ..
  
  – ppichier
  Jan 3 at 14:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file
  
  – Anji
  Jan 3 at 15:03
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does not work too. i think i should create my own popover via PopoverController
  
  – ppichier
  Jan 3 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  where did you added your styles.
  
  – Anji
  Jan 3 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  as you told me. In the global file styles.scss
  
  – ppichier
  Jan 3 at 15:58
  

  
  
  
  

 | 
show 2 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  mode="ios" does not work ..
  
  – ppichier
  Jan 3 at 14:54
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file
  
  – Anji
  Jan 3 at 15:03
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  does not work too. i think i should create my own popover via PopoverController
  
  – ppichier
  Jan 3 at 15:33
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  where did you added your styles.
  
  – Anji
  Jan 3 at 15:36
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  as you told me. In the global file styles.scss
  
  – ppichier
  Jan 3 at 15:58
  

  
  
  
  

mode="ios" does not work ..

– ppichier
Jan 3 at 14:54

mode="ios" does not work ..

– ppichier
Jan 3 at 14:54

did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file

– Anji
Jan 3 at 15:03

did you tried with .alert-radio-icon{ display:none !important; } write this code in style.css file instead of writing it in component.scss file

– Anji
Jan 3 at 15:03

does not work too. i think i should create my own popover via PopoverController

– ppichier
Jan 3 at 15:33

does not work too. i think i should create my own popover via PopoverController

– ppichier
Jan 3 at 15:33

where did you added your styles.

– Anji
Jan 3 at 15:36

where did you added your styles.

– Anji
Jan 3 at 15:36

as you told me. In the global file styles.scss

– ppichier
Jan 3 at 15:58

as you told me. In the global file styles.scss

– ppichier
Jan 3 at 15:58

 | 
show 2 more comments

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54024187%2fremove-ion-radio-from-ion-select-ionic-v4%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here