Floating part of switcher if I write width

I want to change the width of the witcher of the currency app.
Probably 90px wide now, but I want to make it 60px wide.

But if I put width: 60px ;, it will float up on desktop.

On mobile, the position of the arrow on the right side is strange.

desktopdesktop

mobilemobile

 

And on mobile, if when there are many characters, they will overlap the cart icon.
Therefore, I want to put the part of the selected language in the frame.
It means that I want to cut the characters on the right side that stick out the frame.

My image is that the stacking order of characters is below the frame.

z-index?

I'm sorry if it couldn't get through my saying.

mobilemobile

 

mlveda-currencies-switcher.liquid

 

   </script>
{% if settings.mlvedaACS_position != 'hide' %}
<style>
select#currencies {
background-repeat: no-repeat;
      background-position: right center;
    
}
.nice-select .list {
max-height: 250px
overflow-y: auto !important;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}

select#currencies,select#currencies1 {
   margin-bottom: 0;
   margin-top: 0;
   vertical-align: middle;
   padding-top:0px;
  padding-bottom:0px;
   padding-right: 15px;
   border: 0;
  text-align: left
-webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
 background-color:transparent;
 background-position:right center;
}
select#currencies option{
color:#000;
   background-color:#fff;
}
select#currencies:focus,select#currencies:hover{
outline:none;border: 0;
}
{% if settings.mlvedaACS_position == "inline" %}
.pick_currency {
    display: inline-block;
  margin: 0 0 ;
  width:60px;                       /*60px I said is here*/
}
 
.pick_currency label{display:none !important;}

@media only screen and (max-width:768px) {
}
@media only screen and (max-width: 380px) {
  .pick_currency {
    display: inline-block;
    margin-right: 1px;
}
}
.pick_currency .nice-select {
    border: 0 !important;
}


  {% else %}
  select#currencies, select#currencies1 {
height: auto !important;
    line-height: 1 !important;
    min-height: unset !important;
    max-height: unset !important;
    min-width: unset !important;
    max-width: unset !important;
    width: auto !important;
    color:#000;
}
.pick_currency{
    border: 1px solid #ddd;
    width: auto;
    display: inline-block;
    padding: 5px;
    position: fixed;
    z-index: 9999999;
}
{% endif %}

 

 

mlveda-flag.liquid

Copy

 

  /* For Admin Side Only */

.canvasContainer{width:100%; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; font-size:13px; }
.switchWidth{ width:400px; background:#f6f6f6}
.cellWidth{ width:200px;}
.titleText{ background:#ebebeb; font-size:14px; font-weight:bold; border-bottom:1px solid #ccc;}
.multipleSelect{width:120px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.singleSelect{width:200px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;}
.formRaw{ background:#f2f5f9;}
.TextBox{ width:70px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.TextBoxLarge{ width:150px; border:1px solid #ebebeb; padding:3px; font-size:14px; font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif; }
.tmpClass{ margin:30px;}
/* .Button{ background:#f6f6f6; border:1px solid #000; font-size:13px; padding:5px; cursor:pointer; margin-right:10px;} */
.ButtonRow td{border-top:2px solid #000; padding:10px 0}

@media only screen and (max-width: 768px) {
 	.canvasContainer{ font-size:12px !important;}
	.switchWidth{ width:200px;}
	.tmpClass{ margin:10px;}
	.cellWidth{ width:150px;}
}

@media only screen and (max-width: 500px) {
 	.canvasContainer{ font-size:11px !important;}
	.switchWidth{ width:160px;}
	.tmpClass{ margin:5px;}
	.cellWidth{ width:100px;}
}


.nice-select .flags{width:20px; height:15px; display:block; width:20px; height:15px; display:block; float:left; margin:7px 5px 0 0;}
.flags-usa{ background:url(../images/usa.png) left center no-repeat;  }
.flags-aus{ background:url(../images/aus.png) left center no-repeat; }
.flags-uk{ background:url(../images/uk.png) left center no-repeat; }


 *nice-select.css
  *
  *
  */
  select.switch {display: none;}

.nice-select {
  -webkit-tap-highlight-color: transparent;
  background-color: transparent !important;
  border-radius: 0px;
/*  comment this line border: solid 1px; */
  border-color: inherit !important;
  box-sizing: border-box;
  clear: both;
  cursor: pointer;
  display: block;
  /* float: left; */
  font-family: inherit;
  font-size: inherit;
  font-weight: normal;
  height: 30px;
  line-height: 30px;
  outline: none;
  padding-left: 5px;
  padding-right: 20px;
  position: relative;
  text-align: left !important;
  transition: all 0.2s ease-in-out;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  white-space: nowrap;
  width: 90px; }
.nice-select:after {
/*   border-bottom: 2px solid;
  border-right: 2px solid; */
/*  comment this line border-color: inherit !important; */
/*   content: '';
  display: block;
  height: 5px;
  margin-top: -4px;
  pointer-events: none;
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform-origin: 66% 66%;
          transform-origin: 66% 66%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  transition: all 0.15s ease-in-out;
  width: 5px; */}
.nice-select.open:after {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg); }
.nice-select.open .list {
  opacity: 1;
  pointer-events: auto;
  -webkit-transform: scale(1) translateY(0);
          transform: scale(1) translateY(0); }
.nice-select.switch {
  font-size: 12px;
  height: 30px;
  width:60px;
  line-height: 30px; 
  display:inline-block;
  }
.nice-select.switch:after {
  height: 4px;
  width: 4px; }
.nice-select.switch .option {
  line-height: 30px;
  min-height: 30px; }
.nice-select .list {
/*   color: #000 !important; */
  background-color:#fff;
  z-index: 999 !important;
  width:92px !important;
  border-radius: 0px;
  border:1px solid #e8e8e8;
  box-sizing: border-box;
  margin-top:0px;
  margin-left:0px !important;
  margin-bottom:0px !important;
  opacity: 0;
  overflow: hidden;
  padding: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: -1px;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  -webkit-transform: scale(0.75) translateY(-21px);
          transform: scale(0.75) translateY(-21px);
  transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
  z-index: 9; }
.nice-select .option:hover {
  background-color: #f8f8f8; }
.nice-select .option {
  cursor: pointer;
   border-bottom: solid 1px #e8e8e8;
  font-weight: 400;
  line-height: 30px !important;
  list-style: none;
  margin-left: 0px !important;
  margin-right: 0px !important;
  height: 30px !important;
  outline: none;
/*   padding-left: 5px!important; */
  padding-left: 5px;
  padding-right: 5px;
  text-align: left;
  transition: all 0.2s; 
  float: left !important;
  border-left: 0px !important;
    border-top: 0px !important;
    border-right: 0px !important;
  width: 90px !important;
  
}

 

 

If it seems not enough, I will paste other section.

 

I would appreciate it if you could.

http://zakkyobiru.myshopify.com 

 

0 Likes

If anyone has any idea, could you help me?

I'm in trouble because this problem is unlikely to be solved by mysellf

0 Likes
PaulNewton
Shopify Partner
3122 191 572

Because there are other children elements whose total widths are greater than what your trying to do so a lot of weirdness is being created. And it's not clear what other changes you done that could be contributing to this.

The simplest fix would be to decrease fonts sizes to allow the top area enough room to breath and layout properly.

Always backup your theme before making changes.
Reset the .pick_currency width then try this css

 

.nice-select {
  width: 60px;
}

 

 
You can also hire me at paull.newton+shopifyforums@gmail.com to untangle the problem.
Problem Solved? ✔️Accept and ? Like the solution so you can help others.
Buy me a coffee ☕ paypal.me/paulnewton or donate to eff.org
Confused? Busy? Buy a custom solution paull.newton+shopifyforum@gmail.com
0 Likes

@PaulNewton 

I tried to make some child elements smaller, but it didn't work by me.

I see, I want to keep the font size as it is, but is it may related to the upper area?
I was thinking only about left and right padding.
I will try a little more.
Thank you for teach me it

0 Likes